From 90041dc7bfef475e8ef827b1a96d4e231e0cccf6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kvasnic=CC=8Ca=CC=81k?=
 <michal.kvasnicak@gmail.com>
Date: Tue, 12 Nov 2024 08:57:52 +0100
Subject: [PATCH] fix: prevent long urls in cast embeds from overflowing

---
 .changeset/hungry-actors-call.md              |  5 ++++
 .../debugger/app/components/cast-composer.tsx | 24 +++++++++++--------
 2 files changed, 19 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/hungry-actors-call.md

diff --git a/.changeset/hungry-actors-call.md b/.changeset/hungry-actors-call.md
new file mode 100644
index 000000000..c2817102a
--- /dev/null
+++ b/.changeset/hungry-actors-call.md
@@ -0,0 +1,5 @@
+---
+"@frames.js/debugger": patch
+---
+
+fix(debugger): prevent long urls in cast embeds from overflowing
diff --git a/packages/debugger/app/components/cast-composer.tsx b/packages/debugger/app/components/cast-composer.tsx
index 8452fa809..bfc203f27 100644
--- a/packages/debugger/app/components/cast-composer.tsx
+++ b/packages/debugger/app/components/cast-composer.tsx
@@ -77,7 +77,7 @@ export const CastComposer = React.forwardRef<
       {state.embeds.length > 0 ? (
         <ul className="flex flex-col gap-2">
           {state.embeds.slice(0, 2).map((embed, index) => (
-            <li key={`${embed}-${index}`}>
+            <li key={`${embed}-${index}`} className="flex flex-grow">
               <CastEmbedPreview
                 farcasterFrameConfig={farcasterFrameConfig}
                 onRemove={() => {
@@ -234,20 +234,24 @@ function CastEmbedPreview({
           allowPartialFrame
           onError={handleFrameError}
         />
-        <span className="ml-auto truncate text-sm text-slate-400">{url}</span>
+        <WithTooltip tooltip={url}>
+          <span className="ml-auto truncate text-sm text-slate-400 max-w-full">
+            {url}
+          </span>
+        </WithTooltip>
       </div>
     );
   }
 
   return (
-    <span className="flex gap-2 w-full items-center">
-      <div className="flex flex-grow items-center gap-4 bg-slate-100 p-2 rounded">
-        <div className="bg-slate-200 rounded p-4">
-          <GlobeIcon className="flex-shrink-0" />
-        </div>
-        <span className="truncate text-sm text-slate-800 flex-grow">{url}</span>
-        <div className="flex gap-2 text-slate-300">{buttons}</div>
+    <div className="flex gap-2 w-full max-w-full items-center bg-slate-100 p-2 rounded">
+      <div className="bg-slate-200 rounded p-4">
+        <GlobeIcon className="flex-shrink-0" />
       </div>
-    </span>
+      <WithTooltip tooltip={url}>
+        <span className="truncate text-sm text-slate-800 flex-grow">{url}</span>
+      </WithTooltip>
+      <div className="flex gap-2 text-slate-300">{buttons}</div>
+    </div>
   );
 }