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 (
-
+