From c3993c602ca64a91d6b3205475e4647bbf8d31f4 Mon Sep 17 00:00:00 2001
From: Brendan Allan <git@brendonovich.dev>
Date: Thu, 18 Jun 2026 09:53:48 +0200
Subject: [PATCH] fix(app): tighten mobile utility UI

---
 packages/app/src/components/debug-bar.tsx               | 2 +-
 packages/app/src/components/help-button.tsx             | 2 +-
 packages/app/src/components/settings-v2/settings-v2.css | 8 ++++++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/components/debug-bar.tsx b/packages/app/src/components/debug-bar.tsx
index 11f9f59e4e..eda025546a 100644
--- a/packages/app/src/components/debug-bar.tsx
+++ b/packages/app/src/components/debug-bar.tsx
@@ -363,7 +363,7 @@ export function DebugBar() {
   return (
     <aside
       aria-label={language.t("debugBar.ariaLabel")}
-      class="pointer-events-auto fixed bottom-3 right-3 z-50 w-[308px] max-w-[calc(100vw-1.5rem)] overflow-hidden rounded-xl border border-border-base bg-surface-raised-stronger-non-alpha p-0.5 text-text-strong shadow-[var(--shadow-lg-border-base)] sm:bottom-4 sm:right-4 sm:w-[324px]"
+      class="pointer-events-auto fixed bottom-3 right-3 z-50 hidden w-[308px] max-w-[calc(100vw-1.5rem)] overflow-hidden rounded-xl border border-border-base bg-surface-raised-stronger-non-alpha p-0.5 text-text-strong shadow-[var(--shadow-lg-border-base)] md:block sm:bottom-4 sm:right-4 sm:w-[324px]"
     >
       <div class="grid grid-cols-5 gap-px font-mono">
         <Cell
diff --git a/packages/app/src/components/help-button.tsx b/packages/app/src/components/help-button.tsx
index 73d623fc6a..9109418fcf 100644
--- a/packages/app/src/components/help-button.tsx
+++ b/packages/app/src/components/help-button.tsx
@@ -11,7 +11,7 @@ export function HelpButton() {
 
   return (
     <Show when={!state.dismissed}>
-      <div class="fixed bottom-4 right-4 z-50">
+      <div class="fixed bottom-4 right-4 z-50 hidden md:block">
         <Popover
           open={shown()}
           onOpenChange={setShown}
diff --git a/packages/app/src/components/settings-v2/settings-v2.css b/packages/app/src/components/settings-v2/settings-v2.css
index 864adc27f6..e55777861f 100644
--- a/packages/app/src/components/settings-v2/settings-v2.css
+++ b/packages/app/src/components/settings-v2/settings-v2.css
@@ -167,6 +167,14 @@
   background-color: var(--v2-background-bg-layer-01);
 }
 
+@media (max-width: 639px) {
+  .settings-v2[data-orientation="vertical"] [data-slot="tabs-v2-list"] {
+    width: 144px;
+    min-width: 144px;
+    padding-inline: 8px;
+  }
+}
+
 .settings-v2-nav-footer {
   display: flex;
   flex-direction: column;