From 4e2be1bc77196b18465e671529cc0207204002cc Mon Sep 17 00:00:00 2001
From: Stephen <scook@tightknit.ai>
Date: Mon, 29 Jun 2026 23:21:36 -0700
Subject: [PATCH 1/2] fix(load-dialog): keep recent-message list inside the
 modal

The recent-messages picker rows overflowed the dialog horizontally: with
`min-width: auto` at every flex/grid level between each row's `shrink-0`
timestamp and the dialog's fixed width, intrinsic content width won and long
labels/timestamps spilled past the modal edge instead of truncating.

Add `min-w-0` down the chain (content wrapper, recent section, scroll
container, item button, title row) so widths resolve to the dialog and the
existing `truncate` takes effect. Also bump the message-label to text-sm to
match the channel name, and make the formatted date bold black while leaving
the raw `(ts)` muted/monospace.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/load-message-dialog.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/load-message-dialog.tsx b/src/components/load-message-dialog.tsx
index 00e0a5f..dc7b40d 100644
--- a/src/components/load-message-dialog.tsx
+++ b/src/components/load-message-dialog.tsx
@@ -208,7 +208,7 @@ export function LoadMessageDialog({
           </div>
         </DialogHeader>
 
-        <div className="flex flex-col gap-4">
+        <div className="flex min-w-0 flex-col gap-4">
           <div className="flex flex-col gap-1.5">
             <Label htmlFor="message-link">Message link</Label>
             <Input
@@ -258,7 +258,7 @@ export function LoadMessageDialog({
           )}
 
           {hasRecent && (
-            <div className="flex flex-col gap-2">
+            <div className="flex min-w-0 flex-col gap-2">
               <div className="flex items-center gap-2 text-xs text-muted-foreground">
                 <span className="h-px flex-1 bg-border" />
                 or pick a recent message
@@ -305,7 +305,7 @@ export function LoadMessageDialog({
                 <p className="text-xs text-muted-foreground">No recent messages from this app in this channel.</p>
               )}
               {channelId && recent && recent.length > 0 && (
-                <div className="flex max-h-48 flex-col gap-1 overflow-y-auto">
+                <div className="flex max-h-48 min-w-0 flex-col gap-1 overflow-y-auto">
                   {recent.map((m) => {
                     // Which identity the message was posted as — drives both
                     // this badge and (on load) the token the update uses.
@@ -315,9 +315,9 @@ export function LoadMessageDialog({
                         key={`${m.channelId}:${m.ts}`}
                         type="button"
                         onClick={() => onLoaded(recentToResult(m))}
-                        className="flex flex-col gap-0.5 rounded-md border border-input bg-background px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                        className="flex min-w-0 flex-col gap-0.5 rounded-md border border-input bg-background px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                       >
-                        <span className="flex items-baseline justify-between gap-2">
+                        <span className="flex min-w-0 items-baseline justify-between gap-2">
                           <span className="flex min-w-0 items-baseline gap-1.5">
                             <span className="truncate font-medium">
                               {m.channelName ? `#${m.channelName}` : m.channelId}
@@ -327,10 +327,13 @@ export function LoadMessageDialog({
                             </span>
                           </span>
                           <span className="shrink-0 text-xs text-muted-foreground">
-                            {new Date(Number(m.ts) * 1000).toLocaleString()} <span className="font-mono">({m.ts})</span>
+                            <span className="font-semibold text-foreground">
+                              {new Date(Number(m.ts) * 1000).toLocaleString()}
+                            </span>{' '}
+                            <span className="font-mono">({m.ts})</span>
                           </span>
                         </span>
-                        {m.label && <span className="truncate text-xs text-muted-foreground">{m.label}</span>}
+                        {m.label && <span className="truncate text-sm text-muted-foreground">{m.label}</span>}
                       </button>
                     );
                   })}

From ba64391e4508263693b89ab707cb16169bc8345e Mon Sep 17 00:00:00 2001
From: Stephen <scook@tightknit.ai>
Date: Mon, 29 Jun 2026 23:24:31 -0700
Subject: [PATCH 2/2] fix(load-dialog): left-align subtitle, drop redundant
 channel from recent rows

Force the dialog subtitle row left-aligned (the shared DialogHeader centers
it below the sm breakpoint). Remove the per-row channel name from the
recent-message list since the user already picks the channel above it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/load-message-dialog.tsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/components/load-message-dialog.tsx b/src/components/load-message-dialog.tsx
index dc7b40d..7540c4f 100644
--- a/src/components/load-message-dialog.tsx
+++ b/src/components/load-message-dialog.tsx
@@ -184,7 +184,7 @@ export function LoadMessageDialog({
       >
         <DialogHeader>
           <DialogTitle>Edit an existing message</DialogTitle>
-          <div className="flex items-start gap-1.5">
+          <div className="flex items-start gap-1.5 text-left">
             <DialogDescription>
               {hasRecent
                 ? 'Paste a Slack message link, or pick a recent message your app posted.'
@@ -318,13 +318,8 @@ export function LoadMessageDialog({
                         className="flex min-w-0 flex-col gap-0.5 rounded-md border border-input bg-background px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                       >
                         <span className="flex min-w-0 items-baseline justify-between gap-2">
-                          <span className="flex min-w-0 items-baseline gap-1.5">
-                            <span className="truncate font-medium">
-                              {m.channelName ? `#${m.channelName}` : m.channelId}
-                            </span>
-                            <span className="shrink-0 rounded border px-1 py-px text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
-                              {asUser ? 'You' : 'Bot'}
-                            </span>
+                          <span className="shrink-0 rounded border px-1 py-px text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+                            {asUser ? 'You' : 'Bot'}
                           </span>
                           <span className="shrink-0 text-xs text-muted-foreground">
                             <span className="font-semibold text-foreground">