From aaa6b96539eac17fb412cb2a1a35fcf42dfe00ac Mon Sep 17 00:00:00 2001
From: Haydn Ewers <27211+haydn@users.noreply.github.com>
Date: Mon, 11 Aug 2025 17:03:46 +1000
Subject: [PATCH] use multi column layout

---
 src/app/page.tsx | 68 +++++++++++++++++++++++++-----------------------
 1 file changed, 35 insertions(+), 33 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index d7e8f34..9b424f7 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -57,40 +57,42 @@ const HomePage = () => {
 
   return (
     <div>
-      {(lists ?? []).map((list) => (
-        <div key={list.id}>
-          <List {...list} />
-          <Dialog
-            render={(closeDialog) => (
-              <button
-                onClick={() => {
-                  deleteList(list);
-                  closeDialog();
-                }}
-                type="button"
-              >
-                Confirm
-              </button>
-            )}
-          >
-            Remove list
-          </Dialog>
+      <div style={{ columns: 4 }}>
+        {(lists ?? []).map((list) => (
+          <div key={list.id} style={{ breakInside: "avoid" }}>
+            <List {...list} />
+            <Dialog
+              render={(closeDialog) => (
+                <button
+                  onClick={() => {
+                    deleteList(list);
+                    closeDialog();
+                  }}
+                  type="button"
+                >
+                  Confirm
+                </button>
+              )}
+            >
+              Remove list
+            </Dialog>
 
-          <Dialog
-            render={(closeDialog) => (
-              <ListForm
-                list={list}
-                onSubmit={(list) => {
-                  updateList(list);
-                  closeDialog();
-                }}
-              />
-            )}
-          >
-            Edit list
-          </Dialog>
-        </div>
-      ))}
+            <Dialog
+              render={(closeDialog) => (
+                <ListForm
+                  list={list}
+                  onSubmit={(list) => {
+                    updateList(list);
+                    closeDialog();
+                  }}
+                />
+              )}
+            >
+              Edit list
+            </Dialog>
+          </div>
+        ))}
+      </div>
       <hr />
       <Dialog
         render={(closeDialog) => (
-- 
2.51.2