fix(web): thread undo notice sits above the bottom shelves instead of pushing the list

apps/web/src/components/sidebar/SidebarChrome.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from "react";
 import { memo } from "react";
 import { Link, useLocation, useNavigate } from "@tanstack/react-router";
 
+import { useThreadUndoNotice } from "../../hooks/showThreadUndoNotice";
 import { useEnvironmentIdentificationMode } from "../../hooks/useSettings";
 import { cn } from "../../lib/utils";
 import { usePullRequestsSupported } from "../../state/environments";
@@ -37,6 +38,7 @@ export const SidebarChromeHeader = memo(function SidebarChromeHeader({
   isElectron: boolean;
 }) {
   const stageLabel = useEnvironmentStageLabel();
+  const showingUndoNotice = useThreadUndoNotice((state) => state.notice !== null);
   const environmentIdentificationMode = useEnvironmentIdentificationMode();
   const backdropVariant = resolveSidebarStageBackdropVariant(
     stageLabel,
@@ -63,7 +65,8 @@ export const SidebarChromeHeader = memo(function SidebarChromeHeader({
         />
       </div>
       <div className="relative z-10 flex h-8 min-w-0 flex-1 flex-wrap content-start items-center gap-x-2 overflow-hidden py-0.5">
-        <SidebarBrand onBackdrop={backdropVariant !== null} />
+        <SidebarThreadUndoNotice onBackdrop={backdropVariant !== null} />
+        {showingUndoNotice ? null : <SidebarBrand onBackdrop={backdropVariant !== null} />}
         {pillLabel ? (
           <div className="ml-1 flex h-7 items-center">
             <Badge data-environment-identification="pill" size="sm" variant="secondary">
@@ -231,7 +234,6 @@ const SidebarUtilityMenu = memo(function SidebarUtilityMenu() {
 export const SidebarChromeFooter = memo(function SidebarChromeFooter() {
   return (
     <SidebarFooter>
-      <SidebarThreadUndoNotice />
       <SidebarProviderUpdatePill />
       <SidebarUpdateArchitectureWarning />
       <SidebarUtilityMenu />

apps/web/src/components/sidebar/SidebarThreadUndoNotice.browser.test.tsx

@@ -12,7 +12,7 @@ const spoken = () =>
 describe("SidebarThreadUndoNotice", () => {
   it("speaks the notice, and drops it when the notice clears before it is spoken", async () => {
     using _notice = { [Symbol.dispose]: () => useThreadUndoNotice.setState({ notice: null }) };
-    await using _screen = await render(<SidebarThreadUndoNotice />);
+    await using _screen = await render(<SidebarThreadUndoNotice onBackdrop={false} />);
     using _timers = fakeTimers();
     const showSettled = () =>
       act(async () =>

apps/web/src/components/sidebar/SidebarThreadUndoNotice.tsx

@@ -4,11 +4,11 @@ import { useEffect } from "react";
 import { undoLatestThreadAction, useThreadUndoNotice } from "../../hooks/showThreadUndoNotice";
 import { shortcutLabelForCommand } from "../../keybindings";
 import { announce, cancelAnnouncement } from "../../lib/announce";
+import { cn } from "../../lib/utils";
 import { primaryServerKeybindingsAtom } from "../../state/server";
-import { Alert, AlertDescription } from "../ui/alert";
 import { InlineButton } from "../ui/button";
 
-export function SidebarThreadUndoNotice() {
+export function SidebarThreadUndoNotice({ onBackdrop }: { onBackdrop: boolean }) {
   const notice = useThreadUndoNotice((state) => state.notice);
   const keybindings = useAtomValue(primaryServerKeybindingsAtom);
 
@@ -28,10 +28,17 @@ export function SidebarThreadUndoNotice() {
   if (!summary) return null;
 
   return (
-    <Alert role="group" variant="sidebar">
-      <AlertDescription>
-        {summary}, <InlineButton onClick={undoLatestThreadAction}>{undoLabel}</InlineButton>
-      </AlertDescription>
-    </Alert>
+    <div
+      role="group"
+      className={cn(
+        "ml-[var(--workspace-titlebar-content-left)] min-w-0 truncate text-2xs leading-7",
+        onBackdrop ? "text-white/70" : "text-sidebar-muted-foreground",
+      )}
+    >
+      {summary},{" "}
+      <InlineButton onClick={undoLatestThreadAction} tone="inherit">
+        {undoLabel}
+      </InlineButton>
+    </div>
   );
 }

apps/web/src/components/ui/button.tsx

@@ -103,6 +103,7 @@ const inlineButtonVariants = cva(
     variants: {
       tone: {
         default: "text-foreground",
+        inherit: "text-inherit",
         muted: "text-muted-foreground hover:text-foreground",
         destructive: "text-destructive/80 hover:text-destructive",
         picker: