fix: adapt for mobile

frontend/src/routes/app/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { cubicOut } from "svelte/easing";
   import { fly } from "svelte/transition";
+  import { page } from "$app/state";
   import ChatList from "$lib/components/ChatList.svelte";
   import FolderTabs from "$lib/components/FolderTabs.svelte";
   import RightColumn from "$lib/components/RightColumn.svelte";
@@ -17,6 +18,8 @@
 
   let { children } = $props();
 
+  const chatOpen = $derived(page.params.chatId != null);
+
   $effect(() => {
     if (!accounts.loaded) {
       accounts.load().catch(() => toasts.error("Failed to load accounts"));
@@ -28,7 +31,11 @@
   });
 </script>
 
-<div id="Main" class:with-right={ui.rightPanel !== null}>
+<div
+  id="Main"
+  class:with-right={ui.rightPanel !== null}
+  class:chat-open={chatOpen}
+>
   <div id="LeftColumn">
     {#if ui.leftView === "settings"}
       <div
@@ -102,6 +109,40 @@
     &.with-right {
       grid-template-columns: minmax(16rem, 26.5rem) 1fr minmax(20rem, 25rem);
     }
+
+    @media (max-width: 600px) {
+      grid-template-columns: 100%;
+
+      &.with-right {
+        grid-template-columns: 100%;
+      }
+
+      #LeftColumn,
+      #MiddleColumn,
+      #RightColumn {
+        grid-row: 1;
+        grid-column: 1;
+      }
+
+      #RightColumn {
+        position: relative;
+        z-index: 1;
+      }
+
+      #MiddleColumn {
+        display: none;
+      }
+
+      &.chat-open {
+        #LeftColumn {
+          display: none;
+        }
+
+        #MiddleColumn {
+          display: block;
+        }
+      }
+    }
   }
 
   #LeftColumn {