Enhance layout and component styles for improved responsiveness and user experience (#73)

- Updated header styles in layout.tsx for better visual consistency and added safe area insets.
- Adjusted main content padding in app.tsx to accommodate dynamic top strip height.
- Modified avatar-panel.tsx to change alignment of items for better layout.
- Enhanced intake-form.tsx with additional padding for improved form usability.
- Updated session-view.tsx to allow for better overflow handling in the component structure.

Author: codeSTACKr

complex-agents/avatars/anam/frontend/app/layout.tsx

@@ -72,9 +72,10 @@ export default async function RootLayout({ children }: RootLayoutProps) {
           disableTransitionOnChange
         >
           <header
-            className="fixed top-0 left-0 hidden w-full flex-row items-center justify-between px-4 md:flex"
+            className="border-border/60 bg-background/90 fixed top-0 left-0 flex w-full items-center justify-between border-b px-3 backdrop-blur-sm md:px-4"
             style={{
-              height: 'var(--app-top-strip-height)',
+              height: 'calc(var(--app-top-strip-height) + env(safe-area-inset-top))',
+              paddingTop: 'env(safe-area-inset-top)',
               zIndex: 'var(--app-z-header)',
             }}
           >
@@ -85,29 +86,34 @@ export default async function RootLayout({ children }: RootLayoutProps) {
               className="scale-100 transition-transform duration-300 hover:scale-110"
             >
               {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img src={logo} alt={`${companyName} Logo`} className="block size-26 dark:hidden" />
+              <img
+                src={logo}
+                alt={`${companyName} Logo`}
+                className="block size-14 sm:size-26 dark:hidden"
+              />
               {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
                 src={logoDark ?? logo}
                 alt={`${companyName} Logo`}
-                className="hidden size-26 dark:block"
+                className="hidden size-14 sm:size-26 dark:block"
               />
             </a>
-            <span className="text-foreground font-mono text-xs font-bold tracking-wider uppercase">
-              Built with{' '}
+            <span className="text-foreground text-right font-mono text-[11px] font-bold tracking-wider uppercase md:text-xs">
+              <span className="hidden sm:inline">Built with </span>
               <a
                 target="_blank"
                 rel="noopener noreferrer"
                 href="https://docs.livekit.io/agents"
                 className="underline underline-offset-4"
               >
-                LiveKit Agents
+                <span className="sm:hidden">LiveKit docs</span>
+                <span className="hidden sm:inline">LiveKit Agents</span>
               </a>
             </span>
           </header>
 
           {children}
-          <div className="group fixed bottom-0 left-1/2 z-50 mb-2 -translate-x-1/2">
+          <div className="group fixed bottom-0 left-1/2 z-50 mb-6 -translate-x-1/2 md:mb-2">
             <ThemeToggle className="translate-y-20 transition-transform delay-150 duration-300 group-hover:translate-y-0" />
           </div>
         </ThemeProvider>

complex-agents/avatars/anam/frontend/components/app/app.tsx

@@ -41,7 +41,7 @@ export function App({ appConfig }: AppProps) {
   return (
     <AgentSessionProvider session={session}>
       <AppSetup />
-      <main className="grid h-svh grid-cols-1 place-content-center pt-[var(--app-top-strip-height)]">
+      <main className="grid min-h-dvh grid-cols-1 place-content-center pt-[calc(var(--app-top-strip-height)+env(safe-area-inset-top))]">
         <ViewController appConfig={appConfig} />
       </main>
       <StartAudioButton label="Start Audio" />

complex-agents/avatars/anam/frontend/components/app/avatar-panel.tsx

@@ -59,7 +59,7 @@ export function AvatarPanel({ className }: AvatarPanelProps) {
   const videoHeight = trackRef?.publication.dimensions?.height ?? 0;
 
   return (
-    <div className={cn('flex flex-col items-center justify-center gap-5 p-6', className)}>
+    <div className={cn('flex flex-col items-center justify-start gap-5 p-6', className)}>
       <div className="relative flex aspect-square w-full max-w-xl min-w-0 items-center justify-center overflow-hidden rounded-lg bg-black">
         {trackRef ? (
           <VideoTrack

complex-agents/avatars/anam/frontend/components/app/intake-form.tsx

@@ -56,7 +56,10 @@ export function IntakeForm({
   }
 
   return (
-    <form className={cn('space-y-6 overflow-y-auto p-6', className)} onSubmit={handleSubmit}>
+    <form
+      className={cn('space-y-6 overflow-y-auto p-6 pb-24 md:pb-6', className)}
+      onSubmit={handleSubmit}
+    >
       <div className="space-y-1">
         <h2 className="text-2xl font-semibold tracking-tight">Patient intake form</h2>
         <p className="text-muted-foreground text-sm">

complex-agents/avatars/anam/frontend/components/app/session-view.tsx

@@ -71,7 +71,7 @@ export const SessionView = ({
         <div className="flex max-h-[45%] w-full min-w-0 shrink-0 flex-col border-b md:max-h-none md:w-[46%] md:border-b-0">
           <AvatarPanel className="flex-1" />
         </div>
-        <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+        <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto">
           <IntakeForm
             formData={formData}
             onFormDataChange={setFormData}