From dcf95bd9d48fc92bde07ef494605543d72bdae04 Mon Sep 17 00:00:00 2001
From: h <h@kotikot.com>
Date: Sat, 13 Jun 2026 14:40:24 +0200
Subject: [PATCH] fix: adapt for mobile

---
 frontend/src/lib/components/ChatHeader.svelte | 21 +++++++++
 frontend/src/routes/app/+layout.svelte        | 43 ++++++++++++++++++-
 2 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/ChatHeader.svelte b/frontend/src/lib/components/ChatHeader.svelte
index e63d02e..5021ee1 100644
--- a/frontend/src/lib/components/ChatHeader.svelte
+++ b/frontend/src/lib/components/ChatHeader.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { goto } from "$app/navigation";
   import {
     enqueueBackfill,
     getCurrentPresence,
@@ -123,6 +124,17 @@
 </script>
 
 <header class="chat-header">
+  <div class="back">
+    <Button
+      variant="translucent"
+      round
+      smaller
+      onclick={() => goto("/app")}
+      aria-label="Назад"
+    >
+      <Icon name="arrow-left" />
+    </Button>
+  </div>
   <ContextMenu>
     {#snippet children({ props })}
       <button
@@ -207,6 +219,15 @@
     background-color: var(--color-background);
   }
 
+  .back {
+    display: none;
+    margin-left: -0.25rem;
+
+    @media (max-width: 600px) {
+      display: block;
+    }
+  }
+
   .peek {
     display: flex;
     flex: 1;
diff --git a/frontend/src/routes/app/+layout.svelte b/frontend/src/routes/app/+layout.svelte
index 309ab85..44d9bea 100644
--- a/frontend/src/routes/app/+layout.svelte
+++ b/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 {