fix: app-wide Electron title bar offset via --titlebar-h CSS variable

Sets --titlebar-h on document.documentElement (40px in Electron, 0px
otherwise). All fixed-position elements now use top-[var(--titlebar-h)]
instead of top-0 so nothing overlaps the title bar.

Updated: workspace-shell, chat-panel, agent-view-panel, agent-stream-panel,
toast, update-notifier, openclaw-update-notifier, mobile-prompt-trigger,
provider-wizard, sidebar-backdrop.

Author: outsourc-e

src/components/agent-view/agent-stream-panel.tsx

@@ -193,7 +193,7 @@ export function AgentStreamPanel({ sessionKey, agentName, agentColor, onClose }:
   return (
     <>
       <button type="button" aria-label="Close live stream panel" className="fixed inset-0 z-40 bg-black/30" onClick={onClose} />
-      <aside className="fixed inset-x-0 bottom-0 z-50 h-[70vh] rounded-t-2xl border-t border-neutral-200 bg-white shadow-2xl dark:border-neutral-800 dark:bg-neutral-900 md:inset-y-0 md:right-0 md:left-auto md:h-auto md:w-[400px] md:rounded-none md:border-t-0 md:border-l">
+      <aside className="fixed inset-x-0 bottom-0 z-50 h-[70vh] rounded-t-2xl border-t border-neutral-200 bg-white shadow-2xl dark:border-neutral-800 dark:bg-neutral-900 md:right-0 md:bottom-0 md:left-auto md:top-[var(--titlebar-h,0px)] md:h-auto md:w-[400px] md:rounded-none md:border-t-0 md:border-l">
         <div className="flex h-full min-h-0 flex-col">
           <div className="sticky top-0 z-10 border-b border-neutral-200 bg-white/95 backdrop-blur dark:border-neutral-800 dark:bg-neutral-900/95">
             <div className="mx-auto mt-2 h-1 w-10 rounded-full bg-neutral-300 dark:bg-neutral-700 md:hidden" />

src/components/agent-view/agent-view-panel.tsx

@@ -809,7 +809,7 @@ export function AgentViewPanel() {
           animate={{ x: panelVisible ? 0 : panelWidth }}
           transition={{ duration: 0.22, ease: 'easeInOut' }}
           className={cn(
-            'fixed inset-y-0 right-0 z-40 w-72 border-l border-primary-300/70 bg-primary-100/92 backdrop-blur-xl',
+            'fixed right-0 bottom-0 top-[var(--titlebar-h,0px)] z-40 w-72 border-l border-primary-300/70 bg-primary-100/92 backdrop-blur-xl',
             panelVisible ? 'pointer-events-auto' : 'pointer-events-none',
           )}
         >

src/components/chat-panel.tsx

@@ -142,7 +142,7 @@ export function ChatPanel() {
             animate={{ x: 0, opacity: 1 }}
             exit={{ x: '100%', opacity: 0 }}
             transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
-            className="fixed inset-y-0 right-0 h-[100dvh] max-h-[100dvh] w-[420px] max-w-[100vw] border-l border-primary-200 bg-surface overflow-hidden flex flex-col z-20 shadow-xl"
+            className="fixed right-0 bottom-0 top-[var(--titlebar-h,0px)] h-[calc(100dvh-var(--titlebar-h,0px))] max-h-[calc(100dvh-var(--titlebar-h,0px))] w-[420px] max-w-[100vw] border-l border-primary-200 bg-surface overflow-hidden flex flex-col z-20 shadow-xl"
           >
             {/* Panel header */}
             <div className="flex items-center justify-between h-10 px-3 border-b border-primary-200 shrink-0">

src/components/mobile-prompt/MobilePromptTrigger.tsx

@@ -88,7 +88,7 @@ export function MobilePromptTrigger() {
             animate={{ opacity: 1, y: 0, scale: 1 }}
             exit={{ opacity: 0, y: -50, scale: 0.95 }}
             transition={{ duration: 0.35, ease: [0.23, 1, 0.32, 1] }}
-            className="fixed top-4 left-1/2 z-[9999] w-[90vw] max-w-md -translate-x-1/2 overflow-hidden rounded-2xl border border-primary-800/60 bg-primary-950 text-white shadow-2xl shadow-black/40"
+            className="fixed left-1/2 z-[9999] w-[90vw] max-w-md -translate-x-1/2 overflow-hidden rounded-2xl border border-primary-800/60 bg-primary-950 text-white shadow-2xl shadow-black/40 top-[calc(var(--titlebar-h,0px)+1rem)]"
           >
             <div className="px-4 py-3">
               <div className="flex items-center gap-3">

src/components/openclaw-update-notifier.tsx

@@ -166,7 +166,7 @@ export function OpenClawUpdateNotifier() {
           exit={{ opacity: 0, y: -50, scale: 0.95 }}
           transition={{ duration: 0.35, ease: [0.23, 1, 0.32, 1] }}
           className={cn(
-            'fixed top-4 left-1/2 -translate-x-1/2 z-[9998]',
+            'fixed left-1/2 -translate-x-1/2 z-[9998] top-[calc(var(--titlebar-h,0px)+1rem)]',
             'flex flex-col rounded-2xl overflow-hidden',
             'bg-primary-950 text-white',
             'shadow-2xl shadow-black/40',

src/components/ui/toast.tsx

@@ -74,7 +74,7 @@ export function Toaster() {
   if (!toasts.length) return null
 
   return createPortal(
-    <div className="pointer-events-none fixed top-4 left-2 right-2 z-[9999] flex flex-col gap-2 sm:left-auto sm:right-4 sm:w-auto">
+    <div className="pointer-events-none fixed left-2 right-2 z-[9999] flex flex-col gap-2 top-[calc(var(--titlebar-h,0px)+1rem)] sm:left-auto sm:right-4 sm:w-auto">
       {toasts.map((t) => (
         <div
           key={t.id}

src/components/update-notifier.tsx

@@ -201,7 +201,7 @@ export function UpdateNotifier() {
           exit={{ opacity: 0, y: -50, scale: 0.95 }}
           transition={{ duration: 0.35, ease: [0.23, 1, 0.32, 1] }}
           className={cn(
-            'fixed top-4 left-1/2 -translate-x-1/2 z-[9999]',
+            'fixed left-1/2 -translate-x-1/2 z-[9999] top-[calc(var(--titlebar-h,0px)+1rem)]',
             'flex flex-col rounded-2xl overflow-hidden',
             'bg-primary-950 text-white',
             'shadow-2xl shadow-black/40',

src/components/workspace-shell.tsx

@@ -36,7 +36,7 @@ import type { SessionMeta } from '@/screens/chat/types'
 
 type SessionsListResponse = Array<SessionMeta>
 export const DESKTOP_SIDEBAR_BACKDROP_CLASS =
-  'fixed inset-y-0 left-0 w-[300px] z-10 bg-black/10 backdrop-blur-[1px]'
+  'fixed left-0 bottom-0 top-[var(--titlebar-h,0px)] w-[300px] z-10 bg-black/10 backdrop-blur-[1px]'
 
 async function fetchSessions(): Promise<SessionsListResponse> {
   const res = await fetch('/api/sessions')
@@ -188,6 +188,15 @@ export function WorkspaceShell() {
     return () => media.removeEventListener('change', update)
   }, [])
 
+  useEffect(() => {
+    if (typeof document === 'undefined') return
+    const titlebarHeight = isElectron ? '40px' : '0px'
+    document.documentElement.style.setProperty('--titlebar-h', titlebarHeight)
+    return () => {
+      document.documentElement.style.removeProperty('--titlebar-h')
+    }
+  }, [isElectron])
+
   // Keep mobile sidebar state closed after resize and route changes.
   useEffect(() => {
     if (!isMobile) return
@@ -300,11 +309,17 @@ export function WorkspaceShell() {
     return <LoginScreen />
   }
 
+  const shellStyle: React.CSSProperties & Record<'--titlebar-h', string> = {
+    height: 'var(--vvh, 100dvh)',
+    paddingTop: isElectron ? 40 : 0,
+    '--titlebar-h': isElectron ? '40px' : '0px',
+  }
+
   return (
     <>
       <div
         className="relative overflow-hidden theme-bg theme-text"
-        style={{ height: 'var(--vvh, 100dvh)', paddingTop: isElectron ? 40 : 0 }}
+        style={shellStyle}
       >
         {/* Electron: native-style title bar (absolute over the padding) */}
         {isElectron && (

src/screens/settings/components/provider-wizard.tsx

@@ -326,7 +326,7 @@ export function ProviderWizard({ open, onOpenChange, editProvider }: ProviderWiz
 
   return (
     <DialogRoot open={open} onOpenChange={handleDialogOpenChange}>
-      <DialogContent className="left-auto right-0 top-0 h-[100dvh] w-screen translate-x-0 translate-y-0 overflow-hidden rounded-none border-primary-200 bg-primary-50/95 backdrop-blur-sm duration-300 ease-out sm:w-[min(860px,100vw)] sm:rounded-l-2xl data-[state=open]:scale-100 data-[state=closed]:scale-100 data-[state=open]:translate-x-0 data-[state=closed]:translate-x-full">
+      <DialogContent className="left-auto right-0 top-[var(--titlebar-h,0px)] h-[calc(100dvh-var(--titlebar-h,0px))] w-screen translate-x-0 translate-y-0 overflow-hidden rounded-none border-primary-200 bg-primary-50/95 backdrop-blur-sm duration-300 ease-out sm:w-[min(860px,100vw)] sm:rounded-l-2xl data-[state=open]:scale-100 data-[state=closed]:scale-100 data-[state=open]:translate-x-0 data-[state=closed]:translate-x-full">
         <div className="flex h-full min-h-0 flex-col">
           <div className="border-b border-primary-200 p-4 sm:p-5">
             <div className="flex items-start justify-between gap-4">