@xenide-io/the-old-ui-theme 0.6.2 → 0.6.5

package/src/suite/components/ai-panel.tsx

@@ -5,6 +5,7 @@ import {
   Suspense,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useRef,
   useState,
   type ComponentType,
@@ -12,7 +13,17 @@ import {
   type PointerEvent as ReactPointerEvent,
   type ReactNode,
 } from 'react';
-import { Check, Copy, Sparks, Xmark as X } from 'iconoir-react';
+import {
+  ArrowDown,
+  ArrowUp,
+  Check,
+  Copy,
+  Erase,
+  Sparks,
+  Square,
+  WarningTriangle,
+  Xmark as X,
+} from 'iconoir-react';
 
 const SuiteAiBlockNoteMessage = lazy(() => import('./ai-message-blocknote'));
 
@@ -140,6 +151,7 @@ export function SuiteAiPanel({
   }>;
   sendMessage: (params: {
     prompt: string;
+    signal?: AbortSignal;
   }) => Promise<{ messages: SuiteAiChatMessage[]; reply: string }>;
   clearChat: () => Promise<void>;
   brandIcon?: ComponentType<{ className?: string }>;
@@ -154,12 +166,15 @@ export function SuiteAiPanel({
   const [hydrating, setHydrating] = useState(false);
   const [error, setError] = useState('');
   const [copiedId, setCopiedId] = useState<number | null>(null);
+  const [atBottom, setAtBottom] = useState(true);
   const [launcherSide, setLauncherSide] = useState<LauncherEdge>('right');
   const [panelSide, setPanelSide] = useState<'left' | 'right'>('right');
   const [launcherPosition, setLauncherPosition] =
     useState<LauncherPosition | null>(null);
   const [draggingLauncher, setDraggingLauncher] = useState(false);
   const scrollerRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const abortRef = useRef<AbortController | null>(null);
   const launcherRef = useRef<HTMLButtonElement>(null);
   const launcherSideRef = useRef<LauncherEdge>('right');
   const launcherPositionRef = useRef<LauncherPosition | null>(null);
@@ -232,10 +247,20 @@ export function SuiteAiPanel({
     return () => window.removeEventListener('resize', placeLauncher);
   }, []);
 
-  const scrollToBottom = useCallback(() => {
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = 'auto') => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    el.scrollTo({ top: el.scrollHeight, behavior });
+    setAtBottom(true);
+  }, []);
+
+  const handleScroll = useCallback(() => {
     const el = scrollerRef.current;
     if (!el) return;
-    el.scrollTop = el.scrollHeight;
+    // Within 64px of the bottom counts as "pinned" — matches the
+    // stick-to-bottom threshold most AI chats use for streaming reflow.
+    const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
+    setAtBottom(distance < 64);
   }, []);
 
   const hydrate = useCallback(async () => {
@@ -282,21 +307,54 @@ export function SuiteAiPanel({
   }, [open, hydrate]);
 
   useEffect(() => {
-    if (open) scrollToBottom();
-  }, [messages, loading, open, scrollToBottom]);
+    if (open && atBottom) scrollToBottom();
+  }, [messages, loading, open, atBottom, scrollToBottom]);
+
+  // Focus the composer when the panel opens (but never steal focus mid-stream).
+  useEffect(() => {
+    if (open && !hydrating) textareaRef.current?.focus();
+  }, [open, hydrating]);
+
+  // Close on Escape while the panel is open.
+  useEffect(() => {
+    if (!open) return;
+    function onKey(event: KeyboardEvent) {
+      if (event.key === 'Escape') setOpen(false);
+    }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open]);
+
+  // Auto-grow the composer with content, up to a cap, then scroll.
+  useLayoutEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${Math.min(el.scrollHeight, 176)}px`;
+  }, [prompt, open]);
 
   async function ask(text: string) {
     const trimmed = text.trim();
     if (!trimmed || loading) return;
+    const controller = new AbortController();
+    abortRef.current = controller;
     setLoading(true);
     setError('');
     setPrompt('');
-    // Optimistic user bubble — replaced by server messages on success.
+    setAtBottom(true);
+    // Optimistic user message — replaced by server messages on success.
     setMessages((prev) => [...prev, { role: 'user', content: trimmed }]);
     try {
-      const result = await sendMessage({ prompt: trimmed });
+      const result = await sendMessage({
+        prompt: trimmed,
+        signal: controller.signal,
+      });
+      if (controller.signal.aborted) return;
       setMessages(result.messages ?? []);
     } catch (err) {
+      // A user-initiated stop is not an error — leave the optimistic
+      // message in place and let them retry.
+      if (controller.signal.aborted) return;
       setMessages((prev) =>
         prev[prev.length - 1]?.role === 'user' &&
         prev[prev.length - 1]?.content === trimmed
@@ -310,10 +368,26 @@ export function SuiteAiPanel({
           : 'The AI request failed. Try again.',
       );
     } finally {
+      if (abortRef.current === controller) abortRef.current = null;
       setLoading(false);
     }
   }
 
+  function stop() {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    setLoading(false);
+  }
+
+  function retry() {
+    const lastUser = [...messages]
+      .reverse()
+      .find((m) => m.role === 'user')?.content;
+    setError('');
+    if (lastUser) void ask(lastUser);
+    else void hydrate();
+  }
+
   async function handleClear() {
     if (loading) return;
     try {
@@ -503,174 +577,269 @@ export function SuiteAiPanel({
       ) : null}
 
       {open ? (
-        <div className="fixed inset-0 z-40" role="dialog" aria-modal="true">
+        <div
+          className="fixed inset-0 z-40"
+          role="dialog"
+          aria-modal="true"
+          aria-label={title}
+        >
           <button
             type="button"
-            className="absolute inset-0 bg-black/25"
+            className="absolute inset-0 bg-ph-ink/25"
             onClick={() => setOpen(false)}
             aria-label="Close Ask AI"
+            tabIndex={-1}
           />
           <aside
-            className={`absolute inset-y-0 flex w-full max-w-md flex-col bg-ph-surface shadow-2xl ${panelSide === 'left' ? 'left-0 border-r border-ph-border' : 'right-0 border-l border-ph-border'}`}
+            className={`absolute inset-y-0 flex w-full flex-col bg-ph-canvas shadow-2xl sm:max-w-xl ${panelSide === 'left' ? 'left-0 border-r border-ph-border' : 'right-0 border-l border-ph-border'}`}
             data-test="suite-ask-ai-panel"
           >
-            <div className="flex items-center justify-between border-b border-ph-border px-4 py-3">
-              <div className="min-w-0">
-                <div className="flex items-center gap-2">
-                  <Icon className="h-4 w-4 shrink-0 text-ph-brand" />
-                  <span className="text-sm font-semibold text-ph-ink">
-                    {title}
-                  </span>
-                </div>
-                <p className="mt-0.5 text-[11px] text-ph-mutedtext">
-                  Shared across your suite · same chat in every app
-                </p>
-              </div>
-              <div className="flex items-center gap-1">
-                {messages.length > 0 ? (
-                  <button
-                    type="button"
-                    onClick={() => void handleClear()}
-                    disabled={loading}
-                    className="rounded-md px-2 py-1 text-xs text-ph-mutedtext hover:bg-ph-muted hover:text-ph-ink disabled:opacity-50"
-                    data-test="ask-ai-clear"
-                  >
-                    Clear
-                  </button>
-                ) : null}
+            {/* ── Header ─────────────────────────────────────────────── */}
+            <header className="flex items-center gap-2 px-4 py-3">
+              <h2 className="min-w-0 flex-1 truncate text-sm font-semibold text-ph-ink">
+                {title}
+              </h2>
+              {messages.length > 0 ? (
                 <button
                   type="button"
-                  onClick={() => setOpen(false)}
-                  className="rounded p-1 hover:bg-ph-muted"
-                  aria-label="Close"
+                  onClick={() => void handleClear()}
+                  disabled={loading}
+                  className="inline-flex h-10 items-center gap-1.5 rounded-lg px-2.5 text-xs font-medium text-ph-subtle transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40"
+                  data-test="ask-ai-clear"
                 >
-                  <X className="h-4 w-4" />
+                  <Erase className="h-3.5 w-3.5" />
+                  Clear
                 </button>
-              </div>
-            </div>
-
-            {presets.length > 0 && messages.length === 0 ? (
-              <div className="flex flex-wrap gap-1.5 border-b border-ph-border px-4 py-2">
-                {presets.map((preset) => (
-                  <button
-                    key={preset.label}
-                    type="button"
-                    onClick={() => void ask(preset.prompt)}
-                    disabled={loading || hydrating}
-                    className="rounded-full border border-ph-border px-2.5 py-1 text-xs text-ph-ink hover:bg-ph-muted disabled:opacity-50"
-                  >
-                    {preset.label}
-                  </button>
-                ))}
-              </div>
-            ) : null}
-
-            <div
-              ref={scrollerRef}
-              className="flex-1 space-y-3 overflow-y-auto p-4"
-            >
-              {error ? (
-                <p className="bg-ph-danger/10 rounded-lg px-3 py-2 text-sm text-ph-danger">
-                  {error}
-                </p>
               ) : null}
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-ph-subtle transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus"
+                aria-label="Close Ask AI"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </header>
+
+            {/* ── Message stream ─────────────────────────────────────── */}
+            <div className="relative min-h-0 flex-1">
+              <div
+                ref={scrollerRef}
+                onScroll={handleScroll}
+                role="log"
+                aria-live="polite"
+                aria-label="Conversation"
+                className="suite-scroll-lock h-full space-y-5 overflow-y-auto px-4 py-5"
+              >
+                {hydrating && messages.length === 0 ? (
+                  <div className="flex items-center gap-2 text-sm text-ph-subtle">
+                    <Spinner className="h-4 w-4 animate-spin" />
+                    Loading your chat…
+                  </div>
+                ) : null}
 
-              {hydrating && messages.length === 0 ? (
-                <div className="flex items-center gap-2 text-sm text-ph-mutedtext">
-                  <Spinner className="h-4 w-4 animate-spin" />
-                  Loading chat…
-                </div>
-              ) : null}
+                {!hydrating && messages.length === 0 && !error ? (
+                  <div className="mx-auto mt-6 flex max-w-sm flex-col items-center px-2 text-center">
+                    <span className="flex h-12 w-12 items-center justify-center rounded-2xl bg-ph-brand/10 text-ph-brand">
+                      <Icon className="h-6 w-6" />
+                    </span>
+                    <p className="mt-4 font-display text-lg font-semibold text-ph-ink">
+                      How can I help?
+                    </p>
+                    <p className="mt-1.5 text-sm leading-relaxed text-ph-subtle">
+                      {emptyState}
+                    </p>
+                    {presets.length > 0 ? (
+                      <div className="mt-5 flex w-full flex-col gap-2">
+                        {presets.map((preset) => (
+                          <button
+                            key={preset.label}
+                            type="button"
+                            onClick={() => void ask(preset.prompt)}
+                            disabled={loading || hydrating}
+                            className="group flex w-full items-center gap-2 rounded-xl border border-ph-border bg-ph-surface px-3.5 py-2.5 text-left text-sm text-ph-ink transition-colors hover:border-ph-brand/40 hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40"
+                          >
+                            <Sparks className="h-4 w-4 shrink-0 text-ph-brand" />
+                            <span className="min-w-0 flex-1 truncate">
+                              {preset.label}
+                            </span>
+                            <ArrowUp className="h-3.5 w-3.5 shrink-0 rotate-45 text-ph-mutedtext transition-transform group-hover:translate-x-0.5" />
+                          </button>
+                        ))}
+                      </div>
+                    ) : null}
+                  </div>
+                ) : null}
 
-              {!hydrating && messages.length === 0 && !error ? (
-                <div className="mt-10 px-2 text-center">
-                  <p className="font-display text-base font-semibold text-ph-ink">
-                    How can I help?
-                  </p>
-                  <p className="mt-2 text-sm leading-relaxed text-ph-subtle">
-                    {emptyState}
-                  </p>
-                </div>
-              ) : null}
+                {messages.map((message, index) => {
+                  const isUser = message.role === 'user';
+                  if (isUser) {
+                    return (
+                      <div
+                        key={`user-${index}`}
+                        className="flex justify-end"
+                        data-test="ask-ai-user"
+                      >
+                        <div className="max-w-[min(85%,42rem)] whitespace-pre-wrap break-words rounded-2xl rounded-br-md bg-ph-brand/12 px-3.5 py-2.5 text-sm leading-relaxed text-ph-ink">
+                          {message.content}
+                        </div>
+                      </div>
+                    );
+                  }
+                  return (
+                    <div
+                      key={`assistant-${index}`}
+                      className="flex gap-3"
+                      data-test="ask-ai-assistant"
+                    >
+                      <span
+                        className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-ph-brand/10 text-ph-brand"
+                        aria-hidden
+                      >
+                        <Icon className="h-4 w-4" />
+                      </span>
+                      <div className="min-w-0 flex-1">
+                        <div className="text-sm leading-relaxed text-ph-ink">
+                          <Suspense
+                            fallback={
+                              <p className="whitespace-pre-wrap break-words">
+                                {message.content}
+                              </p>
+                            }
+                          >
+                            <SuiteAiBlockNoteMessage
+                              markdown={message.content}
+                            />
+                          </Suspense>
+                        </div>
+                        <button
+                          type="button"
+                          onClick={() =>
+                            void copyMessage(index, message.content)
+                          }
+                          className="mt-1.5 inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus"
+                        >
+                          {copiedId === index ? (
+                            <Check className="h-3 w-3" />
+                          ) : (
+                            <Copy className="h-3 w-3" />
+                          )}
+                          {copiedId === index ? 'Copied' : 'Copy'}
+                        </button>
+                      </div>
+                    </div>
+                  );
+                })}
+
+                {loading ? (
+                  <div className="flex gap-3" aria-hidden>
+                    <span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-ph-brand/10 text-ph-brand">
+                      <Icon className="h-4 w-4" />
+                    </span>
+                    <div className="flex items-center gap-1.5 py-1.5">
+                      <span className="h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce" />
+                      <span className="h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce [animation-delay:0.15s]" />
+                      <span className="h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce [animation-delay:0.3s]" />
+                    </div>
+                  </div>
+                ) : null}
 
-              {messages.map((message, index) => {
-                const isUser = message.role === 'user';
-                return (
+                {loading ? (
+                  <span className="sr-only" aria-live="polite">
+                    Assistant is responding…
+                  </span>
+                ) : null}
+
+                {error ? (
                   <div
-                    key={`${message.role}-${index}-${message.content.slice(0, 24)}`}
-                    className={
-                      isUser
-                        ? 'ml-8 rounded-2xl bg-ph-brand/10 px-3.5 py-2.5 text-sm text-ph-ink'
-                        : 'mr-4 rounded-2xl bg-ph-muted px-3.5 py-2.5 text-sm text-ph-ink'
-                    }
-                    data-test={isUser ? 'ask-ai-user' : 'ask-ai-assistant'}
+                    role="alert"
+                    className="flex items-start gap-2.5 rounded-xl border border-ph-danger/30 bg-ph-danger/10 px-3.5 py-3 text-sm text-ph-ink"
                   >
-                    {isUser ? (
-                      <p className="whitespace-pre-wrap">{message.content}</p>
-                    ) : (
-                      <Suspense
-                        fallback={
-                          <p className="whitespace-pre-wrap">
-                            {message.content}
-                          </p>
-                        }
-                      >
-                        <SuiteAiBlockNoteMessage markdown={message.content} />
-                      </Suspense>
-                    )}
-                    {!isUser ? (
+                    <WarningTriangle className="mt-0.5 h-4 w-4 shrink-0 text-ph-danger" />
+                    <div className="min-w-0 flex-1">
+                      <p className="font-medium text-ph-danger">
+                        Something went wrong
+                      </p>
+                      <p className="mt-0.5 text-ph-subtle">{error}</p>
                       <button
                         type="button"
-                        onClick={() => void copyMessage(index, message.content)}
-                        className="mt-2 inline-flex items-center gap-1 text-xs text-ph-mutedtext hover:text-ph-ink"
+                        onClick={retry}
+                        disabled={loading}
+                        className="mt-2 inline-flex min-h-8 items-center gap-1.5 rounded-lg border border-ph-border bg-ph-surface px-2.5 text-xs font-medium text-ph-ink transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40"
                       >
-                        {copiedId === index ? (
-                          <Check className="h-3 w-3" />
-                        ) : (
-                          <Copy className="h-3 w-3" />
-                        )}
-                        {copiedId === index ? 'Copied' : 'Copy'}
+                        Try again
                       </button>
-                    ) : null}
+                    </div>
                   </div>
-                );
-              })}
-
-              {loading ? (
-                <div className="flex items-center gap-2 text-sm text-ph-mutedtext">
-                  <Spinner className="h-4 w-4 animate-spin" />
-                  Thinking…
-                </div>
+                ) : null}
+              </div>
+
+              {!atBottom ? (
+                <button
+                  type="button"
+                  onClick={() => scrollToBottom('smooth')}
+                  className="absolute bottom-3 left-1/2 flex h-9 w-9 -translate-x-1/2 items-center justify-center rounded-full border border-ph-border bg-ph-surface text-ph-subtle shadow-ph-md transition-colors hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus motion-safe:animate-[suite-ai-fade_150ms_ease-out]"
+                  aria-label="Scroll to latest"
+                >
+                  <ArrowDown className="h-4 w-4" />
+                </button>
               ) : null}
             </div>
 
-            <div className="border-t border-ph-border p-3">
-              <div className="flex gap-2">
+            {/* ── Composer ───────────────────────────────────────────── */}
+            <div className="px-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-1">
+              <div className="flex items-end gap-2 rounded-3xl border border-ph-border bg-ph-surface px-2 py-1 shadow-sm transition-colors focus-within:border-ph-brand/45 focus-within:ring-2 focus-within:ring-ph-focus/35">
+                <label htmlFor="suite-ask-ai-input" className="sr-only">
+                  Ask a question
+                </label>
                 <textarea
+                  id="suite-ask-ai-input"
+                  ref={textareaRef}
                   value={prompt}
                   onChange={(e) => setPrompt(e.target.value)}
                   onKeyDown={(e) => {
-                    if (e.key === 'Enter' && !e.shiftKey) {
+                    if (
+                      e.key === 'Enter' &&
+                      !e.shiftKey &&
+                      !e.nativeEvent.isComposing
+                    ) {
                       e.preventDefault();
                       void ask(prompt);
                     }
                   }}
                   placeholder="Ask anything…"
-                  rows={2}
-                  disabled={loading}
+                  rows={1}
                   data-test="ask-ai-input"
-                  className="flex-1 resize-none rounded-xl border border-ph-border bg-ph-canvas p-2.5 text-sm text-ph-ink outline-none focus:ring-1 focus:ring-ph-brand"
+                  className="max-h-44 min-h-[44px] flex-1 resize-none bg-transparent px-2 py-2.5 text-sm leading-relaxed text-ph-ink outline-none placeholder:text-ph-mutedtext"
                 />
-                <button
-                  type="button"
-                  onClick={() => void ask(prompt)}
-                  disabled={loading || !prompt.trim()}
-                  data-test="ask-ai-send"
-                  className="self-end rounded-xl bg-ph-brand px-3.5 py-2 text-sm font-medium text-white disabled:opacity-50"
-                >
-                  Ask
-                </button>
+                {loading ? (
+                  <button
+                    type="button"
+                    onClick={stop}
+                    data-test="ask-ai-stop"
+                    className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-ph-muted text-ph-ink transition-colors hover:bg-ph-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus"
+                    aria-label="Stop generating"
+                  >
+                    <Square className="h-3.5 w-3.5 fill-current" />
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => void ask(prompt)}
+                    disabled={!prompt.trim()}
+                    data-test="ask-ai-send"
+                    className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-ph-brand text-[color:var(--ph-on-accent)] transition-opacity hover:bg-ph-brand-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40"
+                    aria-label="Send message"
+                  >
+                    <ArrowUp className="h-[18px] w-[18px]" />
+                  </button>
+                )}
               </div>
+              <p className="mt-1.5 px-1 text-center text-xs text-ph-mutedtext">
+                <kbd className="font-mono">Enter</kbd> to send ·{' '}
+                <kbd className="font-mono">Shift</kbd>+
+                <kbd className="font-mono">Enter</kbd> for a new line
+              </p>
             </div>
           </aside>
         </div>

package/src/suite/components/suite-layout.test.tsx

@@ -40,5 +40,10 @@ describe("suite scroll ownership", () => {
     ).toHaveClass("break-words", "text-balance");
     expect(screen.getByRole("button", { name: "Export report" }).parentElement)
       .toHaveClass("max-w-full", "overflow-x-auto");
+    expect(
+      screen.getByRole("heading", {
+        name: "A very long responsive page title",
+      }).closest("header"),
+    ).toHaveClass("shrink-0");
   });
 });

package/src/suite/components/suite-layout.tsx

@@ -92,7 +92,7 @@ export function SuitePage({
       role={role}
       aria-live={ariaLive}
       className={cn(
-        'suite-page-stage flex w-full min-w-0 flex-col',
+        'suite-page-stage relative flex w-full min-w-0 flex-col',
         inset && 'suite-page-inset',
         className,
       )}
@@ -119,8 +119,11 @@ export function SuitePageHeader({
   badge,
   /** Breadcrumb line rendered above the title. */
   breadcrumb,
-  /** Stick to the top of the scrollport (desktop page titles). */
-  sticky = false,
+  /**
+   * Keep the title parked at the top of the scrollport while the page scrolls.
+   * On by default — opt out only for pages that are not the page's own title.
+   */
+  sticky = true,
 }: {
   title: ReactNode;
   description?: ReactNode;
@@ -141,15 +144,23 @@ export function SuitePageHeader({
 
   useEffect(() => {
     if (!sticky) return;
+    if (typeof IntersectionObserver === "undefined") return;
     const el = headerRef.current;
     if (!el) return;
 
-    // Sentinel just above the header — when it leaves the scrollport, we're stuck.
+    const parent = el.parentElement;
+    if (!parent) return;
+
+    // Keep the sentinel out of flow so flex `gap` on the page doesn't add
+    // a blank strip above the title.
     const sentinel = document.createElement('div');
     sentinel.setAttribute('aria-hidden', 'true');
     sentinel.style.cssText =
-      'position:relative;height:1px;width:100%;margin:0;padding:0;pointer-events:none';
-    el.parentElement?.insertBefore(sentinel, el);
+      'position:absolute;top:0;left:0;height:1px;width:1px;margin:0;padding:0;pointer-events:none';
+    if (getComputedStyle(parent).position === 'static') {
+      parent.style.position = 'relative';
+    }
+    parent.insertBefore(sentinel, el);
 
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -167,7 +178,7 @@ export function SuitePageHeader({
   const resolvedIcon = todayIcon ? (
     <TodayTimeIcon
       className={cn(
-        'h-7 w-7 text-amber-500 sm:h-8 sm:w-8',
+        'h-6 w-6 text-amber-500',
         todayIconClassName,
       )}
     />
@@ -181,9 +192,8 @@ export function SuitePageHeader({
       data-test={dataTest}
       data-stuck={sticky ? (stuck ? 'true' : 'false') : undefined}
       className={cn(
-        'flex min-w-0 flex-col items-start gap-3 pb-2 sm:flex-row sm:justify-between sm:gap-4 sm:pb-3',
+        'flex min-w-0 shrink-0 flex-col items-start gap-3 pb-2 sm:flex-row sm:justify-between sm:gap-4 sm:pb-3',
         // No extra pt here — page inset sets the shared title baseline.
-        // Stuck state adds pad via .suite-page-header-sticky[data-stuck].
         sticky && 'suite-page-header-sticky',
         className,
       )}
@@ -203,7 +213,7 @@ export function SuitePageHeader({
         <div className="flex min-w-0 items-center gap-3">
           {resolvedIcon ? (
             <div
-              className="hidden shrink-0 sm:flex sm:items-center [&_svg]:h-7 [&_svg]:w-7 sm:[&_svg]:h-8 sm:[&_svg]:w-8"
+              className="hidden shrink-0 sm:flex sm:items-center [&_svg]:h-6 [&_svg]:w-6"
               aria-hidden="true"
             >
               {resolvedIcon}
@@ -212,7 +222,7 @@ export function SuitePageHeader({
           <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
             <h1
               className={cn(
-                'min-w-0 break-words font-display text-[1.625rem] font-bold leading-none tracking-tight text-ph-ink text-balance sm:text-[2.25rem]',
+                'min-w-0 break-words font-display text-[1.375rem] font-semibold leading-tight tracking-tight text-ph-ink text-balance sm:text-2xl',
                 titleClassName,
               )}
             >
@@ -229,7 +239,7 @@ export function SuitePageHeader({
           <div
             className={cn(
               'mt-1.5 max-w-2xl text-pretty text-sm leading-5 text-ph-subtle',
-              resolvedIcon && 'sm:pl-11',
+              resolvedIcon && 'sm:pl-9',
             )}
           >
             {description}