responsive grid

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;