From 315b653079151e20cf0b615e2dd9fcf1c8acb35e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Mon, 5 Oct 2026 19:47:50 +0200
Subject: [PATCH] fix(coach): keep the docked panel header and new-chat button
 clear of the safe areas

A standalone PWA on a tablet reserves the status bar in the top bar but
not in the docked panel's header row, which could tuck its title and
icons under the status bar; the new-chat button sat without the home
indicator inset. Both now reserve the same insets as the top bar.
---
 .../insights/coach-panel/conversations-panel.tsx          | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/insights/coach-panel/conversations-panel.tsx b/src/components/insights/coach-panel/conversations-panel.tsx
index fc5113ba8..eb756f365 100644
--- a/src/components/insights/coach-panel/conversations-panel.tsx
+++ b/src/components/insights/coach-panel/conversations-panel.tsx
@@ -209,6 +209,12 @@ export function ConversationsPanel({
   const header = (inSheet: boolean) => (
     <div
       data-slot="coach-conversations-panel-header"
+      // Docked, the row reserves the safe-area inset the top bar reserves,
+      // so a standalone PWA on a tablet does not tuck it under the status
+      // bar; the band keeps its height (border-box), like the top bar.
+      style={
+        inSheet ? undefined : { paddingTop: "env(safe-area-inset-top, 0px)" }
+      }
       // Docked, the row is the top bar's band (height and bottom border
       // from `SHELL_HEADER_BAND`), so the two borders draw one line.
       className={cn(
@@ -297,7 +303,7 @@ export function ConversationsPanel({
             }}
             data-slot="coach-panel-new-chat"
             aria-label={t("insights.coach.newChat")}
-            className="absolute right-4 bottom-4 size-12 rounded-full shadow-lg md:right-6 md:bottom-6"
+            className="absolute right-4 bottom-[calc(1rem+env(safe-area-inset-bottom,0px))] size-12 rounded-full shadow-lg md:right-6 md:bottom-[calc(1.5rem+env(safe-area-inset-bottom,0px))]"
           >
             <Plus className="size-6" aria-hidden="true" />
           </Button>