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
This commit is contained in:
Glen Maddern 2025-06-23 21:26:36 +10:00
commit 4680b9d3e8
2 changed files with 3 additions and 3 deletions

View file

@ -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 && (
<>

View file

@ -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={`