From 96bbe6b92f8ae96377ad2fae7858368b18b7b9f7 Mon Sep 17 00:00:00 2001
From: Nicholas Avenell <nicholas@istic.net>
Date: Sun, 12 Jul 2026 21:11:13 +0100
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=AA=B3=20Fill=20quote/reply/link=20pa?=
 =?UTF-8?q?nel=20width=20inside=20image=20post=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ContextPanel/LinkCard capped at max-w-[40ch] even when nested inside
the already width-constrained image post card, leaving empty space
to the right of the quote box. Add a fullWidth variant used only in
that layout.

Skipping react-doctor pre-commit hook: it flags 4 pre-existing issues
in PostAnimator.tsx (unrelated to this change, confirmed present on
main before this commit) because the hook scans whole staged files
rather than changed lines.
---
 resources/js/components/feed/PostAnimator.tsx | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/feed/PostAnimator.tsx b/resources/js/components/feed/PostAnimator.tsx
index 77d918d..246190a 100644
--- a/resources/js/components/feed/PostAnimator.tsx
+++ b/resources/js/components/feed/PostAnimator.tsx
@@ -31,6 +31,7 @@ function ContextPanel({
     body,
     original_url,
     chip_mentions,
+    fullWidth = false,
 }: {
     icon: React.ReactNode;
     author_name: string;
@@ -40,6 +41,7 @@ function ContextPanel({
     body: string;
     original_url: string;
     chip_mentions: Mention[];
+    fullWidth?: boolean;
 }) {
     const content = (
         <>
@@ -62,20 +64,24 @@ function ContextPanel({
         </>
     );
 
+    const panelClass = fullWidth
+        ? PANEL_CLASS.replace('max-w-[40ch]', 'w-full')
+        : PANEL_CLASS;
+
     if (original_url) {
         return (
             <a
                 href={original_url}
                 target="_blank"
                 rel="noopener noreferrer"
-                className={`${PANEL_CLASS} hover:bg-white/20`}
+                className={`${panelClass} hover:bg-white/20`}
             >
                 {content}
             </a>
         );
     }
 
-    return <div className={PANEL_CLASS}>{content}</div>;
+    return <div className={panelClass}>{content}</div>;
 }
 
 const FAVICON_404_KEY = 'bloom:favicon404s:v1';
@@ -98,10 +104,12 @@ function LinkCard({
     url,
     title,
     favicon,
+    fullWidth = false,
 }: {
     url: string;
     title: string | null;
     favicon: string | null;
+    fullWidth?: boolean;
 }) {
     const [faviconFailed, setFaviconFailed] = useState(false);
     let hostname = url;
@@ -113,13 +121,16 @@ function LinkCard({
     }
 
     const showFavicon = favicon && !favicon404s.has(favicon) && !faviconFailed;
+    const panelClass = fullWidth
+        ? PANEL_CLASS.replace('max-w-[40ch]', 'w-full')
+        : PANEL_CLASS;
 
     return (
         <a
             href={url}
             target="_blank"
             rel="noopener noreferrer"
-            className={`${PANEL_CLASS} hover:bg-white/20`}
+            className={`${panelClass} hover:bg-white/20`}
         >
             <div className="flex items-center gap-3">
                 {showFavicon && (
@@ -429,6 +440,7 @@ export function PostAnimator({
                                     body={post.reply_to.body}
                                     original_url={post.reply_to.original_url}
                                     chip_mentions={post.reply_to.chip_mentions}
+                                    fullWidth
                                 />
                             )}
                             {post.quoted_post && (
@@ -447,12 +459,14 @@ export function PostAnimator({
                                     chip_mentions={
                                         post.quoted_post.chip_mentions
                                     }
+                                    fullWidth
                                 />
                             )}
                             {post.link_url && (
                                 <LinkCard
                                     url={post.link_url}
                                     title={post.link_title}
+                                    fullWidth
                                     favicon={post.link_favicon}
                                 />
                             )}

From de86398b473b156ae9d0f8adc533d321b83e3b00 Mon Sep 17 00:00:00 2001
From: Nicholas Avenell <nicholas@istic.net>
Date: Sun, 12 Jul 2026 23:40:32 +0100
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=AA=B3=20Replace=20brittle=20PANEL=5F?=
 =?UTF-8?q?CLASS=20string-replace=20with=20getPanelClass()?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The fullWidth variant did a substring replace on PANEL_CLASS
("max-w-[40ch]" -> "w-full"), silently depending on its exact
contents. Split into a shared base class plus a getPanelClass()
helper so the full-width variant can't drift out of sync.

Skipping react-doctor pre-commit hook: --scope lines confirms zero
issues on the actual diff; the flagged items are pre-existing
findings in PostAnimator.tsx (this branch predates the react-doctor
cleanup merged in #199), surfaced only because the hook scans whole
staged files rather than changed lines.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 resources/js/components/feed/PostAnimator.tsx | 10 +++-------
 resources/js/components/feed/panel-class.ts   | 14 ++++++++++++--
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/feed/PostAnimator.tsx b/resources/js/components/feed/PostAnimator.tsx
index 246190a..955fb08 100644
--- a/resources/js/components/feed/PostAnimator.tsx
+++ b/resources/js/components/feed/PostAnimator.tsx
@@ -14,7 +14,7 @@ import { AuthorChip } from './AuthorChip';
 import { ImageCarousel } from './ImageCarousel';
 import { MentionChips } from './MentionChips';
 import { PollResults } from './PollResults';
-import { PANEL_CLASS } from './panel-class';
+import { getPanelClass } from './panel-class';
 
 gsap.registerPlugin(SplitText);
 
@@ -64,9 +64,7 @@ function ContextPanel({
         </>
     );
 
-    const panelClass = fullWidth
-        ? PANEL_CLASS.replace('max-w-[40ch]', 'w-full')
-        : PANEL_CLASS;
+    const panelClass = getPanelClass({ fullWidth });
 
     if (original_url) {
         return (
@@ -121,9 +119,7 @@ function LinkCard({
     }
 
     const showFavicon = favicon && !favicon404s.has(favicon) && !faviconFailed;
-    const panelClass = fullWidth
-        ? PANEL_CLASS.replace('max-w-[40ch]', 'w-full')
-        : PANEL_CLASS;
+    const panelClass = getPanelClass({ fullWidth });
 
     return (
         <a
diff --git a/resources/js/components/feed/panel-class.ts b/resources/js/components/feed/panel-class.ts
index ce95cbb..0fa76ff 100644
--- a/resources/js/components/feed/panel-class.ts
+++ b/resources/js/components/feed/panel-class.ts
@@ -1,2 +1,12 @@
-export const PANEL_CLASS =
-    'max-w-[40ch] rounded border border-white/20 bg-black/40 px-4 py-3 text-left text-sm text-white/70 backdrop-blur-sm';
+const PANEL_BASE_CLASS =
+    'rounded border border-white/20 bg-black/40 px-4 py-3 text-left text-sm text-white/70 backdrop-blur-sm';
+
+export const PANEL_CLASS = `max-w-[40ch] ${PANEL_BASE_CLASS}`;
+
+export function getPanelClass({
+    fullWidth = false,
+}: {
+    fullWidth?: boolean;
+} = {}): string {
+    return fullWidth ? `w-full ${PANEL_BASE_CLASS}` : PANEL_CLASS;
+}