diff --git a/apps/web/src/components/sidebar/SidebarThreadUndoNotice.tsx b/apps/web/src/components/sidebar/SidebarThreadUndoNotice.tsx index 9cf7dc9e2ef53..6a85013ea911f 100644 --- a/apps/web/src/components/sidebar/SidebarThreadUndoNotice.tsx +++ b/apps/web/src/components/sidebar/SidebarThreadUndoNotice.tsx @@ -1,4 +1,5 @@ import { useAtomValue } from "@effect/atom-react"; +import { Undo2Icon } from "lucide-react"; import { useState } from "react"; import { @@ -29,8 +30,11 @@ export function SidebarThreadUndoNotice() { if (!text) return null; return ( - // No min-w-0: the undo button sets this item's minimum, so a shared row squeezes its neighbour. - +
{ if (!summary && event.target === event.currentTarget) setShownSummary(null); @@ -43,7 +47,14 @@ export function SidebarThreadUndoNotice() { !summary && "opacity-0", )} > - {threadUndoLabel(keybindings)} + + {/* The icon's negative margin cancels its width, so beside the label it sits in + clipped space; once the label is too wide it wraps away and the icon shows. */} + + + {threadUndoLabel(keybindings)} + + {text},
diff --git a/apps/web/src/components/sidebar/SidebarUpdateCapsule.tsx b/apps/web/src/components/sidebar/SidebarUpdateCapsule.tsx index 57e649ba0118c..5b6355891534f 100644 --- a/apps/web/src/components/sidebar/SidebarUpdateCapsule.tsx +++ b/apps/web/src/components/sidebar/SidebarUpdateCapsule.tsx @@ -88,7 +88,7 @@ export function SidebarUpdateCapsule({
} /> - + {/* w-0 keeps the label out of the capsule's minimum width, so a shared footer row + can squeeze the label but never push the action past the sidebar edge. */} + {view.label} {view.slow ? ( {view.slow.elapsed} diff --git a/apps/web/src/components/sidebar/SidebarUpdatePill.tsx b/apps/web/src/components/sidebar/SidebarUpdatePill.tsx index 7e0ee498cece5..0682de9b375af 100644 --- a/apps/web/src/components/sidebar/SidebarUpdatePill.tsx +++ b/apps/web/src/components/sidebar/SidebarUpdatePill.tsx @@ -413,7 +413,7 @@ function SidebarUpdateControl() { ? { status: "downloading", percent: state.downloadPercent } : { status: "waiting" }; return ( - +