From fa712e8b26e74b006fb74af04ed334d2bca9e88c Mon Sep 17 00:00:00 2001
From: Theo Browne <me@t3.gg>
Date: Mon, 5 Oct 2026 02:27:52 -0700
Subject: [PATCH] fix(mobile): full-screen HTML renders keep a side gutter

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/features/threads/HtmlRenderWebView.tsx    | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/apps/mobile/src/features/threads/HtmlRenderWebView.tsx b/apps/mobile/src/features/threads/HtmlRenderWebView.tsx
index 9c03d392a39a..0249e36673e3 100644
--- a/apps/mobile/src/features/threads/HtmlRenderWebView.tsx
+++ b/apps/mobile/src/features/threads/HtmlRenderWebView.tsx
@@ -20,6 +20,7 @@ import { useAssetUrlState, useRefreshAssetUrl } from "../../state/assets";
 import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
 
 const ROW_BOTTOM_MARGIN = 8;
+const FULL_SCREEN_GUTTER = 16;
 
 /** A render row is its frame's height plus spacing; the page's content never sizes it. */
 export function htmlRenderRowHeight(frameHeight: number) {
@@ -114,8 +115,20 @@ export function HtmlRenderWebView(props: {
     setGeneration((value) => value + 1);
   };
   const scrollable = !props.nested || overflows;
+  // Pages have no horizontal padding of their own, so full screen adds the
+  // feed's gutter in the page's background color.
   return (
-    <View style={{ flex: 1 }}>
+    <View
+      style={
+        props.nested
+          ? { flex: 1 }
+          : {
+              flex: 1,
+              paddingHorizontal: FULL_SCREEN_GUTTER,
+              backgroundColor: theme.variables["--background"],
+            }
+      }
+    >
       <WebView<object>
         key={generation}
         ref={webView}