From 307fe78c38b3f06cd34d5032cda40f5876801bb4 Mon Sep 17 00:00:00 2001
From: Adam Malczewski <github@tradam.dev>
Date: Thu, 15 Oct 2026 10:12:55 +0900
Subject: fix(ui): lint-clean dvh fallback (@supports); left padding for the
 overlay (mobile) sidebar

---
 src/app.css                             | 8 ++++++--
 src/features/layout/ui/TileSplit.svelte | 5 ++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/app.css b/src/app.css
index d7e0967..3c7b17c 100644
--- a/src/app.css
+++ b/src/app.css
@@ -364,10 +364,14 @@ body {
    while they're showing the bottom of the app sits underneath them (the
    sidebar's last item / the composer looked flush against the bottom edge).
    100dvh tracks the visible viewport as the toolbars show/hide; 100vh stays as
-   the fallback for engines without dvh (the cascade drops the unknown unit). */
+   the fallback for engines without dvh. */
 .h-app {
   height: 100vh;
-  height: 100dvh;
+}
+@supports (height: 100dvh) {
+  .h-app {
+    height: 100dvh;
+  }
 }
 
 /* Transcript rows: skip layout + paint for rows scrolled out of view. A long
diff --git a/src/features/layout/ui/TileSplit.svelte b/src/features/layout/ui/TileSplit.svelte
index b526ccd..84fa075 100644
--- a/src/features/layout/ui/TileSplit.svelte
+++ b/src/features/layout/ui/TileSplit.svelte
@@ -86,6 +86,9 @@
           visible panel.
         -->
         <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <!-- Viewport padding: top/right/bottom always; LEFT only in overlay mode
+             (< lg) — inline (≥ lg) the chat column's gutter already separates the
+             views, but the overlay's left edge is the panel's own edge. -->
         <aside
           class="flex shrink-0 flex-col overflow-x-hidden transition-[width] duration-300 ease-out max-lg:absolute max-lg:inset-y-0 max-lg:right-0 max-lg:z-30 lg:relative"
           style="width: {open ? (child.basis ?? 320) : 0}px"
@@ -93,7 +96,7 @@
           data-open={open}
         >
           <div
-            class="flex h-full flex-col gap-2 overflow-y-auto bg-base-100 pt-3 pr-3 pb-3 transition-transform duration-300 ease-out"
+            class="flex h-full flex-col gap-2 overflow-y-auto bg-base-100 pt-3 pr-3 pb-3 max-lg:pl-3 transition-transform duration-300 ease-out"
             style={scrollViewportStyle(child.basis, open, child.node.marker)}
             data-testid="sidebar-scroll-viewport"
           >
-- 
cgit v1.2.3