fix(home): pin compact wallet row only on camera-style top insets

TMA keeps the logo bar aligned with Telegram chrome. The first header row scrolls away unless a notch/camera safe area is present; Feed/Messages still locks after the header above it.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: anriltine

ui/components/AuthenticatedHomeLeftNavStrip.tsx

@@ -144,6 +144,7 @@ export function AuthenticatedHomeLeftNavStrip({
   feedUnreadCount = 0,
   marginTopPx,
   passVerticalScroll = false,
+  tone = "background",
 }: {
   colors: ThemeColors;
   /** Controlled mode: parent owns which tab is highlighted. */
@@ -155,6 +156,8 @@ export function AuthenticatedHomeLeftNavStrip({
   marginTopPx?: number;
   /** Compact sticky strip: allow vertical pan so the parent list can collapse/expand the header. */
   passVerticalScroll?: boolean;
+  /** Compact sticky last header band uses undercover so list rows do not show through. */
+  tone?: "background" | "undercover";
 }) {
   const { t, locale } = useAppStrings();
   const { width: windowWidth } = useWindowDimensions();
@@ -726,7 +729,7 @@ export function AuthenticatedHomeLeftNavStrip({
         marginBottom: 0,
         position: "relative",
         overflow: "visible",
-        backgroundColor: colors.background,
+        backgroundColor: tone === "undercover" ? colors.undercover : colors.background,
         ...(Platform.OS === "web"
           ? ({
               cursor: grabbing ? "grabbing" : scrollEnabled ? "grab" : "default",

ui/components/GlobalLogoBar.tsx

@@ -297,7 +297,12 @@ export function GlobalLogoBar() {
     <View
       style={[
         styles.container,
-        { height: blockHeight, backgroundColor },
+        { height: blockHeight, backgroundColor, zIndex: 6 },
+        isInTelegram
+          ? Platform.OS === "web"
+            ? ({ position: "sticky", top: 0 } as object)
+            : { zIndex: 6 }
+          : null,
         logoBarBottomSeparator,
       ]}
     >

ui/components/HomeAuthenticatedHeaderRow.tsx

@@ -373,6 +373,8 @@ type Props = {
   compactStickyTopInsetPx?: number;
   /** Compact: live scroll offset (native sticky fallback via translate). */
   compactScrollYPx?: number;
+  /** Compact: pin the wallet row (camera / notch band only). */
+  compactStickFirstRow?: boolean;
   /** Compact: vertical scroll on the sticky first row (wheel / drag). */
   compactStickyScrollBridge?: {
     onTouchStart?: (event: { nativeEvent: { pageY: number } }) => void;
@@ -401,6 +403,7 @@ export function HomeAuthenticatedHeaderRow({
   onCompactStickyLayout,
   compactStickyTopInsetPx = 0,
   compactScrollYPx = 0,
+  compactStickFirstRow = false,
   compactStickyScrollBridge,
 }: Props) {
   const router = useRouter();
@@ -1010,14 +1013,18 @@ export function HomeAuthenticatedHeaderRow({
                 : {})}
               style={{
                 width: "100%",
-                backgroundColor: colors.background,
-                zIndex: 4,
+                marginHorizontal: -layout.contentSideInsetPx,
+                paddingHorizontal: layout.contentSideInsetPx,
+                backgroundColor: colors.undercover,
+                zIndex: compactStickFirstRow ? 4 : 1,
                 paddingTop: compactStickyTopInsetPx,
                 overflow: "visible",
-                transform: [{ translateY: compactScrollYPx }],
+                ...(compactStickFirstRow
+                  ? { transform: [{ translateY: compactScrollYPx }] }
+                  : null),
                 ...(Platform.OS === "web"
                   ? ({
-                      willChange: "transform",
+                      ...(compactStickFirstRow ? { willChange: "transform" } : null),
                       touchAction: "pan-y",
                     } as object)
                   : null),

ui/screens/HomeAuthenticatedScreen.tsx

@@ -31,6 +31,10 @@ import {
   readImportedWallets,
   subscribeImportedWallets,
 } from "../wallet/importedWalletsStore";
+import {
+  compactNavStickAfterPx,
+  shouldStickCompactFirstHeaderRow,
+} from "../wallet/headerRowFit";
 import { useTonConnectSession } from "../ton/TonConnectProvider";
 import { AuthenticatedHomeLeftNavStrip } from "../components/AuthenticatedHomeLeftNavStrip";
 import { AuthenticatedHomeFeedPanel } from "../components/AuthenticatedHomeFeedPanel";
@@ -673,6 +677,17 @@ function HomeAuthenticatedScreenMain() {
       layout.authenticatedHome.headerDividerHeight,
   );
   const [compactChromeHeightPx, setCompactChromeHeightPx] = useState(0);
+  const [webSafeAreaInsetTopPx, setWebSafeAreaInsetTopPx] = useState(0);
+  useEffect(() => {
+    if (Platform.OS !== "web" || typeof document === "undefined") return;
+    const probe = document.createElement("div");
+    probe.style.cssText =
+      "position:absolute;visibility:hidden;pointer-events:none;padding-top:env(safe-area-inset-top, 0px)";
+    document.body.appendChild(probe);
+    const px = Number.parseFloat(window.getComputedStyle(probe).paddingTop || "0") || 0;
+    probe.remove();
+    setWebSafeAreaInsetTopPx(px);
+  }, []);
   const handleHomeLeftScrollPositionChange = useCallback(
     (metrics: { scrollY: number; layoutH: number; contentH: number }) => {
       setCompactHeaderScrollY(metrics.scrollY);
@@ -701,6 +716,7 @@ function HomeAuthenticatedScreenMain() {
     debug,
     applyServerWalletAfterRegister,
     browserSessionChecked,
+    safeAreaInsetTop,
   } = useTelegram();
   const pathname = useResolvedPathname();
   const { width: windowWidth } = useWindowDimensions();
@@ -720,6 +736,14 @@ function HomeAuthenticatedScreenMain() {
     ? Math.min(splitLayoutMetrics.effectiveSplitWidthPx, fallbackLayoutWidthPx)
     : fallbackLayoutWidthPx;
   const isWideHome = isAuthenticatedHomeWideLayoutWidthPx(liveLayoutWidthPx);
+  const stickCompactFirstHeaderRow =
+    !isWideHome &&
+    shouldStickCompactFirstHeaderRow(Math.max(safeAreaInsetTop, webSafeAreaInsetTopPx));
+  const compactNavLockAfterPx = compactNavStickAfterPx({
+    stickFirstRow: stickCompactFirstHeaderRow,
+    firstRowHeightPx: compactStickyHeightPx,
+    collapsibleHeightPx: compactCollapsibleHeightPx,
+  });
   const compactHeaderCollapsePx = !isWideHome
     ? Math.min(Math.max(0, compactHeaderScrollY), Math.max(0, compactCollapsibleHeightPx))
     : 0;
@@ -1786,9 +1810,16 @@ function HomeAuthenticatedScreenMain() {
       compactCollapsePx={compactHeaderCollapsePx}
       onCompactCollapsibleLayout={setCompactCollapsibleHeightPx}
       onCompactStickyLayout={setCompactStickyHeightPx}
-      compactStickyTopInsetPx={layout.authenticatedHome.contentInsetTop}
-      compactScrollYPx={isWideHome ? 0 : compactHeaderScrollY}
-      compactStickyScrollBridge={compactStickyScrollBridge}
+      compactStickyTopInsetPx={
+        stickCompactFirstHeaderRow ? layout.authenticatedHome.contentInsetTop : 0
+      }
+      compactScrollYPx={
+        !isWideHome && stickCompactFirstHeaderRow ? compactHeaderScrollY : 0
+      }
+      compactStickFirstRow={stickCompactFirstHeaderRow}
+      compactStickyScrollBridge={
+        stickCompactFirstHeaderRow ? compactStickyScrollBridge : undefined
+      }
         activeHeaderMenuKey={
           messagesChatOpen
             ? null
@@ -1875,14 +1906,11 @@ function HomeAuthenticatedScreenMain() {
                 style={{
                   zIndex: 3,
                   width: "100%",
-                  backgroundColor: colors.background,
+                  backgroundColor: colors.undercover,
                   overflow: "visible",
                   transform: [
                     {
-                      translateY: Math.max(
-                        0,
-                        compactHeaderScrollY - compactCollapsibleHeightPx,
-                      ),
+                      translateY: Math.max(0, compactHeaderScrollY - compactNavLockAfterPx),
                     },
                   ],
                   ...(Platform.OS === "web"
@@ -1901,6 +1929,7 @@ function HomeAuthenticatedScreenMain() {
                   feedUnreadCount={feedUnreadCount}
                   marginTopPx={0}
                   passVerticalScroll
+                  tone="undercover"
                 />
               </View>
             </View>

ui/wallet/__tests__/headerRowFit.test.ts

@@ -1,8 +1,10 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import {
+  compactNavStickAfterPx,
   fitHeaderAmountFontSize,
   pickHeaderDisplayName,
+  shouldStickCompactFirstHeaderRow,
 } from "../headerRowFit";
 import { formatHeaderWalletBalanceLabel } from "../formatHeaderWalletBalanceLabel";
 
@@ -75,3 +77,33 @@ describe("fitHeaderAmountFontSize", () => {
     assert.equal(fitHeaderAmountFontSize(120, 60), 15);
   });
 });
+
+describe("shouldStickCompactFirstHeaderRow", () => {
+  it("pins only when the top inset is a camera-sized band", () => {
+    assert.equal(shouldStickCompactFirstHeaderRow(0), false);
+    assert.equal(shouldStickCompactFirstHeaderRow(22), false);
+    assert.equal(shouldStickCompactFirstHeaderRow(40), true);
+    assert.equal(shouldStickCompactFirstHeaderRow(59), true);
+  });
+});
+
+describe("compactNavStickAfterPx", () => {
+  it("locks Feed/Messages after the first row when that row is not pinned", () => {
+    assert.equal(
+      compactNavStickAfterPx({
+        stickFirstRow: false,
+        firstRowHeightPx: 50,
+        collapsibleHeightPx: 80,
+      }),
+      130,
+    );
+    assert.equal(
+      compactNavStickAfterPx({
+        stickFirstRow: true,
+        firstRowHeightPx: 50,
+        collapsibleHeightPx: 80,
+      }),
+      80,
+    );
+  });
+});

ui/wallet/headerRowFit.ts

@@ -22,6 +22,31 @@ export function pickHeaderDisplayName(options: {
 export const HEADER_AMOUNT_FONT_MAX_PX = 30;
 export const HEADER_AMOUNT_FONT_MIN_PX = 12;
 
+/**
+ * Top system inset large enough to be a camera / Dynamic Island / punch-hole band
+ * (not Telegram’s built-in close-button row alone).
+ */
+export const COMPACT_CAMERA_BAND_MIN_PX = 40;
+
+/** Pin the compact wallet row only when a camera-style top inset is reserved. */
+export function shouldStickCompactFirstHeaderRow(safeAreaInsetTopPx: number): boolean {
+  return Math.max(0, safeAreaInsetTopPx) >= COMPACT_CAMERA_BAND_MIN_PX;
+}
+
+/**
+ * Scroll distance before Feed/Messages locks. When the first row is not pinned,
+ * it must scroll away with the collapsing bands first.
+ */
+export function compactNavStickAfterPx(options: {
+  stickFirstRow: boolean;
+  firstRowHeightPx: number;
+  collapsibleHeightPx: number;
+}): number {
+  const collapsible = Math.max(0, options.collapsibleHeightPx);
+  if (options.stickFirstRow) return collapsible;
+  return Math.max(0, options.firstRowHeightPx) + collapsible;
+}
+
 /** Shrink amount digits to fit the slot; never clip/abbreviate the numeric string. */
 export function fitHeaderAmountFontSize(
   naturalWidthPx: number,