refactor: optimize safe area handling in web components

Apply safe area insets to sticky/fixed headers (using top inset) and bottom-fixed elements (using bottom inset), rather than to scroll containers. This ensures proper spacing on devices with notches and home indicators (e.g., iPhone).

- Sessions List page: Move header outside scroll container with sticky positioning and pt-[env(safe-area-inset-top)]
- SessionList component: Add renderHeader prop to optionally hide internal header when parent renders it
- HappyComposer: Change bottom padding to pb-[calc(0.75rem+env(safe-area-inset-bottom))] for proper iPhone home indicator spacing

web/src/components/AssistantChat/HappyComposer.tsx

@@ -436,7 +436,7 @@ export function HappyComposer(props: {
     ])
 
     return (
-        <div className="px-3 pb-3 pt-2 bg-[var(--app-bg)]">
+        <div className="px-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] pt-2 bg-[var(--app-bg)]">
             <div className="mx-auto w-full max-w-content">
                 <ComposerPrimitive.Root className="relative">
                     {overlays}

web/src/components/SessionList.tsx

@@ -98,22 +98,27 @@ export function SessionList(props: {
     onNewSession: () => void
     onRefresh: () => void
     isLoading: boolean
+    renderHeader?: boolean
 }) {
+    const { renderHeader = true } = props
+
     return (
         <div className="mx-auto w-full max-w-content flex flex-col">
-            <div className="flex items-center justify-between px-3 py-1">
-                <div className="text-xs text-[var(--app-hint)]">
-                    {props.sessions.length} sessions
+            {renderHeader ? (
+                <div className="flex items-center justify-between px-3 py-1">
+                    <div className="text-xs text-[var(--app-hint)]">
+                        {props.sessions.length} sessions
+                    </div>
+                    <button
+                        type="button"
+                        onClick={props.onNewSession}
+                        className="session-list-new-button p-1.5 rounded-full text-[var(--app-link)] transition-colors"
+                        title="New Session"
+                    >
+                        <PlusIcon className="h-5 w-5" />
+                    </button>
                 </div>
-                <button
-                    type="button"
-                    onClick={props.onNewSession}
-                    className="session-list-new-button p-1.5 rounded-full text-[var(--app-link)] transition-colors"
-                    title="New Session"
-                >
-                    <PlusIcon className="h-5 w-5" />
-                </button>
-            </div>
+            ) : null}
 
             <div className="flex flex-col divide-y divide-[var(--app-divider)]">
                 {props.sessions.map((s) => (