Fill quote/reply/link panel width in image post cards

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);
 
@@ -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,22 @@ function ContextPanel({
         </>
     );
 
+    const panelClass = getPanelClass({ fullWidth });
+
     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 +102,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 +119,14 @@ function LinkCard({
     }
 
     const showFavicon = favicon && !favicon404s.has(favicon) && !faviconFailed;
+    const panelClass = getPanelClass({ fullWidth });
 
     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 +436,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 +455,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}
                                 />
                             )}

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;
+}