From 4e42cb9893277f8dc34da81c9a46a9af131559d5 Mon Sep 17 00:00:00 2001
From: Sam Sartor <me@samsartor.com>
Date: Sat, 28 Sep 2024 19:36:36 -0600
Subject: [PATCH] responsive grid

---
 src/app.rs | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/app.rs b/src/app.rs
index febb898..16fecb7 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -232,33 +232,46 @@ pub fn ServerView() -> Element {
     let server = STATE.server.read();
 
     let grid = css!(
-        "
+        r#"
         display: grid;
-        grid-template-rows: auto 1fr;
-        grid-template-columns: 1fr 1fr;
         height: 100%;
         background-color: white;
 
+        grid-template-rows: auto 1fr;
+        grid-template-columns: 1fr 1fr;
+        grid-template-areas:
+            "bar bar"
+            "tree chat";
+
+        @media screen and (max-width: 720px) {
+            grid-template-rows: auto 1fr 1fr;
+            grid-template-columns: 1fr;
+            grid-template-areas:
+                "bar"
+                "tree"
+                "chat";
+        }
+
         gap: 4px;
         padding: 4px;
-    "
+    "#
     );
 
     let channel_box = css!(
         "
         padding: 16px;
         border: solid black 1px;
-        grid-row: 2;
         overflow: auto;
+        grid-area: tree;
     "
     );
 
     let chat_box = css!(
         "
         border: solid black 1px;
-        grid-row: 2;
         display: flex;
         flex-direction: column;
+        grid-area: chat;
     "
     );
 
@@ -266,8 +279,7 @@ pub fn ServerView() -> Element {
         "
         padding: 16px;
         border: solid black 1px;
-        grid-row: 1;
-        grid-column: span 2;
+        grid-area: bar;
 
         button {
             padding: 8px;
@@ -321,7 +333,6 @@ pub fn LoginView() -> Element {
     let login_box = css!(
         "
         max-width: 50vw;
-        min-width: 640px;
         align-self: center;
         padding: 16px;
         background-color: white;