fix: make sidebar reachable on mobile and use dynamic viewport units

On viewports below md the only SidebarTrigger was rendered inside the
sidebar itself, which becomes a closed off-canvas drawer on mobile - so
the conversation list, new-conversation button, and theme toggle were
unreachable on phones. Add a mobile-only header with a SidebarTrigger
outside the drawer.

Also replace h-screen/basis-[100vh] with dvh units so the layout tracks
the visual viewport when mobile browsers show/hide the URL bar and
keyboard.

Author: Kludex

src/App.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import Chat from './Chat.tsx'
 import { AppSidebar } from './components/app-sidebar.tsx'
+import { MobileHeader } from './components/mobile-header.tsx'
 import { ThemeProvider } from './components/theme-provider.tsx'
 import { SidebarProvider } from './components/ui/sidebar.tsx'
 import { Toaster } from './components/ui/sonner.tsx'
@@ -35,14 +36,17 @@ export default function App() {
         <SidebarProvider defaultOpen>
           <AppSidebar />
 
-          <div className="flex flex-col justify-center flex-1 h-screen overflow-hidden">
-            <div
-              className={cn(
-                'flex flex-col max-w-4xl mx-auto relative w-full basis-[100vh] overflow-hidden',
-                'has-[.stick-to-bottom:empty]:overflow-visible has-[.stick-to-bottom:empty]:basis-[0px] transition-[flex-basis] duration-200',
-              )}
-            >
-              {ready && <Chat />}
+          <div className="flex flex-col flex-1 h-dvh overflow-hidden">
+            <MobileHeader />
+            <div className="flex flex-col justify-center flex-1 min-h-0">
+              <div
+                className={cn(
+                  'flex flex-col max-w-4xl mx-auto relative w-full basis-[100dvh] overflow-hidden',
+                  'has-[.stick-to-bottom:empty]:overflow-visible has-[.stick-to-bottom:empty]:basis-[0px] transition-[flex-basis] duration-200',
+                )}
+              >
+                {ready && <Chat />}
+              </div>
             </div>
           </div>
         </SidebarProvider>

src/components/mobile-header.tsx

@@ -0,0 +1,15 @@
+import { SidebarTrigger } from '@/components/ui/sidebar'
+
+import logoSvg from '../assets/logo.svg'
+
+export function MobileHeader() {
+  return (
+    <header className="flex shrink-0 items-center gap-2 border-b p-2 md:hidden">
+      <SidebarTrigger />
+      <h1 className="text-l font-medium">
+        <img src={logoSvg} className="inline h-4 mr-2 mb-1" />
+        Pydantic AI
+      </h1>
+    </header>
+  )
+}