Skip to content

Commit e67c6bb

Browse files
author
Dylan Huang
committed
Update layout for responsive design in App component
- Adjusted the main content and chat window sections to improve visibility on small screens. - The main content is now hidden on small screens, while the chat window takes full width on extra small screens.
1 parent bba0df5 commit e67c6bb

File tree

1 file changed

+4
-4
lines changed

1 file changed

+4
-4
lines changed

vite-app/src/App.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -167,8 +167,8 @@ const App = observer(() => {
167167

168168
<main className="max-w-full mx-auto px-1 py-1">
169169
<div className="flex gap-1">
170-
{/* Left side - Main content (2/3 width) */}
171-
<div className="flex-1 min-w-0">
170+
{/* Left side - Main content (2/3 width) - Hidden on small screens */}
171+
<div className="flex-1 min-w-0 hidden sm:block">
172172
<Routes>
173173
<Route path="/" element={<Navigate to="/table" replace />} />
174174
<Route
@@ -182,8 +182,8 @@ const App = observer(() => {
182182
</Routes>
183183
</div>
184184

185-
{/* Right side - Chat window (1/3 width) - Sticky */}
186-
<div className="w-1/3 min-w-[300px]">
185+
{/* Right side - Chat window (1/3 width on small+ screens, full width on extra small screens) - Sticky */}
186+
<div className="w-full sm:w-1/3 sm:min-w-[300px]">
187187
<div className="sticky top-2">
188188
<ChatWindow className="w-full" />
189189
</div>

0 commit comments

Comments
 (0)