Make gradient background fill entire content height

- Change from h-dvh to min-h-screen on main container
- Remove overflow-clip to allow content to expand
- Update inner containers to use min-h-screen for proper height
- Background gradient now extends with content rather than fixed to viewport
- Allows for scrolling when content exceeds viewport height

Author: geelen

examples/chat-ui/src/components/ChatApp.tsx

@@ -104,10 +104,10 @@ const ChatApp: React.FC<ChatAppProps> = () => {
 
   return (
     <div 
-      className="flex h-dvh w-screen overflow-clip animated-bg-container"
+      className="flex min-h-screen w-screen animated-bg-container"
       style={{ '--random-delay': `${animationDelay}s` } as React.CSSProperties}
     >
-      <div className="flex flex-row flex-grow flex-1 overflow-hidden relative">
+      <div className="flex flex-row flex-grow flex-1 min-h-screen relative">
         {/* Sidebar and Navbar components hidden but kept in codebase */}
         {false && (
           <>

examples/chat-ui/src/components/ConversationThread.tsx

@@ -171,7 +171,7 @@ const ConversationThread: React.FC<ConversationThreadProps> = ({
   console.log({ currentConversation })
 
   return (
-    <div className={`flex flex-col h-full w-full ${currentConversation.messages.length === 0 ? 'justify-center' : ''}`}>
+    <div className={`flex flex-col min-h-screen w-full ${currentConversation.messages.length === 0 ? 'justify-center' : ''}`}>
       <div
         ref={messagesContainerRef}
         className={`