From 3634f5e2d87018337d051015344f4fe1700b5ae1 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Wed, 3 Jun 2026 19:32:49 +0700
Subject: [PATCH] Fix compact composer flash on tab switch

---
 .../app/src/hooks/use-container-width.test.ts | 24 +++++++++++++++++++
 packages/app/src/hooks/use-container-width.ts |  6 ++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/hooks/use-container-width.test.ts b/packages/app/src/hooks/use-container-width.test.ts
index 0d0670942..e4df58f9d 100644
--- a/packages/app/src/hooks/use-container-width.test.ts
+++ b/packages/app/src/hooks/use-container-width.test.ts
@@ -53,4 +53,28 @@ describe("useContainerWidthBelow", () => {
     expect(result.current.isBelow).toBe(false);
     expect(renderCount).toBe(2);
   });
+
+  it("ignores zero-width measurements from hidden mounted content", () => {
+    let renderCount = 0;
+    const { result } = renderHook(() => {
+      renderCount += 1;
+      return useContainerWidthBelow(700, { initialIsBelow: false });
+    });
+
+    expect(result.current.isBelow).toBe(false);
+
+    act(() => {
+      result.current.onLayout(layoutEvent(0));
+    });
+
+    expect(result.current.isBelow).toBe(false);
+    expect(renderCount).toBe(1);
+
+    act(() => {
+      result.current.onLayout(layoutEvent(650));
+    });
+
+    expect(result.current.isBelow).toBe(true);
+    expect(renderCount).toBe(2);
+  });
 });
diff --git a/packages/app/src/hooks/use-container-width.ts b/packages/app/src/hooks/use-container-width.ts
index f04c22188..a23554167 100644
--- a/packages/app/src/hooks/use-container-width.ts
+++ b/packages/app/src/hooks/use-container-width.ts
@@ -31,7 +31,11 @@ export function useContainerWidthBelow(
   return {
     onLayout: useCallback(
       (e: LayoutChangeEvent) => {
-        const nextIsBelow = e.nativeEvent.layout.width < threshold;
+        const width = e.nativeEvent.layout.width;
+        if (width <= 0) {
+          return;
+        }
+        const nextIsBelow = width < threshold;
         setIsBelow((currentIsBelow) =>
           currentIsBelow === nextIsBelow ? currentIsBelow : nextIsBelow,
         );