From d9378056f42a229e61a31f843804876e6a47df70 Mon Sep 17 00:00:00 2001
From: h <h@kotikot.com>
Date: Mon, 19 Oct 2026 06:19:46 +0000
Subject: [PATCH] fix(frontend): chat header keeps the name readable on a
 phone, all its actions are in its menu, menus open below the pointer and stay
 on screen

---
 frontend/src/lib/components/ChatHeader.svelte  | 18 ++++++++++++++++++
 frontend/src/lib/components/ui/Button.svelte   |  3 ++-
 .../src/lib/components/ui/ContextMenu.svelte   |  7 ++++++-
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/ChatHeader.svelte b/frontend/src/lib/components/ChatHeader.svelte
index 0b9d7b1..f350737 100644
--- a/frontend/src/lib/components/ChatHeader.svelte
+++ b/frontend/src/lib/components/ChatHeader.svelte
@@ -185,6 +185,16 @@
       <ContextMenuItem icon="recent" onselect={() => ui.openPanel("changes")}
         >{t("feed.changes")}</ContextMenuItem
       >
+      <ContextMenuItem icon="stats" onselect={() => ui.openPanel("presence")}
+        >{t("chat.analytics")}</ContextMenuItem
+      >
+      <ContextMenuItem
+        icon={backfilled ? "check" : "cloud-download"}
+        onselect={backfill}
+        >{backfilled
+          ? t("chat.backfill.started")
+          : t("chat.backfill")}</ContextMenuItem
+      >
       <ContextMenuItem
         icon="play-story"
         onselect={() => ui.openPanel("stories")}
@@ -209,6 +219,7 @@
     </Button>
     <Button
       aria-label={t("feed.changes")}
+      class="wide-only"
       onclick={() => ui.openPanel("changes")}
       round
       smaller
@@ -227,6 +238,7 @@
     </Button>
     <Button
       aria-label={backfilled ? t("chat.backfill.started") : t("chat.backfill")}
+      class="wide-only"
       loading={backfilling}
       onclick={backfill}
       round
@@ -286,6 +298,12 @@
     align-items: center;
     gap: 0.25rem;
     margin-left: auto;
+
+    @media (max-width: 600px) {
+      :global(.wide-only) {
+        display: none;
+      }
+    }
   }
 
   .title {
diff --git a/frontend/src/lib/components/ui/Button.svelte b/frontend/src/lib/components/ui/Button.svelte
index 45c7370..2297587 100644
--- a/frontend/src/lib/components/ui/Button.svelte
+++ b/frontend/src/lib/components/ui/Button.svelte
@@ -33,13 +33,14 @@
     loading = false,
     type = "button",
     disabled = false,
+    class: className,
     children,
     ...rest
   }: Props = $props();
 </script>
 
 <button
-  class="Button {variant}"
+  class={["Button", variant, className]}
   {disabled}
   {type}
   class:disabled
diff --git a/frontend/src/lib/components/ui/ContextMenu.svelte b/frontend/src/lib/components/ui/ContextMenu.svelte
index 324eb63..499a290 100644
--- a/frontend/src/lib/components/ui/ContextMenu.svelte
+++ b/frontend/src/lib/components/ui/ContextMenu.svelte
@@ -63,7 +63,12 @@
     {/snippet}
   </ContextMenu.Trigger>
   <ContextMenu.Portal>
-    <ContextMenu.Content class="bg-menu-content" collisionPadding={8}>
+    <ContextMenu.Content
+      align="start"
+      class="bg-menu-content"
+      collisionPadding={8}
+      side="bottom"
+    >
       {@render menu()}
     </ContextMenu.Content>
   </ContextMenu.Portal>