From 4680b9d3e8f51a9944af5200e90c5f7c1bb71da5 Mon Sep 17 00:00:00 2001
From: Glen Maddern <glen@glenmaddern.com>
Date: Mon, 23 Jun 2025 21:26:36 +1000
Subject: [PATCH] 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
---
 examples/chat-ui/src/components/ChatApp.tsx            | 4 ++--
 examples/chat-ui/src/components/ConversationThread.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/chat-ui/src/components/ChatApp.tsx b/examples/chat-ui/src/components/ChatApp.tsx
index 0d56519..835ec6c 100644
--- a/examples/chat-ui/src/components/ChatApp.tsx
+++ b/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 && (
           <>
diff --git a/examples/chat-ui/src/components/ConversationThread.tsx b/examples/chat-ui/src/components/ConversationThread.tsx
index 09a828f..f05ab9b 100644
--- a/examples/chat-ui/src/components/ConversationThread.tsx
+++ b/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={`