diff --git a/app/globals.css b/app/globals.css index f3ecb856..32dec0fe 100644 --- a/app/globals.css +++ b/app/globals.css @@ -81,7 +81,7 @@ } /* Mobile layout specific styles */ -@media (max-width: 768px) { +@media (max-width: 1024px) { .mobile-layout-container { display: flex; flex-direction: column; @@ -121,7 +121,8 @@ display: flex; gap: 20px; padding: 0 10px; - min-width: max-content; + min-width: 100%; + justify-content: space-between; } /* diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx index 6d58759d..c83f4445 100644 --- a/components/chat-panel.tsx +++ b/components/chat-panel.tsx @@ -30,7 +30,7 @@ export function ChatPanel({ messages, input, setInput }: ChatPanelProps) { // Detect mobile layout useEffect(() => { const checkMobile = () => { - setIsMobile(window.innerWidth <= 768) + setIsMobile(window.innerWidth <= 1024) } checkMobile() window.addEventListener('resize', checkMobile) diff --git a/components/chat.tsx b/components/chat.tsx index 699ae13e..34e92244 100644 --- a/components/chat.tsx +++ b/components/chat.tsx @@ -34,7 +34,7 @@ export function Chat({ id }: ChatProps) { useEffect(() => { // Check if device is mobile const checkMobile = () => { - setIsMobile(window.innerWidth <= 768) + setIsMobile(window.innerWidth <= 1024) } // Initial check diff --git a/components/sidebar.tsx b/components/sidebar.tsx index 71de339c..ca2455fa 100644 --- a/components/sidebar.tsx +++ b/components/sidebar.tsx @@ -5,7 +5,7 @@ import { CircleUserRound } from 'lucide-react' export async function Sidebar() { return ( -
+