Skip to content

feat(frontend): implement responsive layout improvements across dashboard #131

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
djdembeck wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

feat(frontend): implement responsive layout improvements across dashboard #131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
57ad569
feat(ui): add horizontal scroll container to Logs table
djdembeck Mar 13, 2026
e2c73b2
feat(ui): implement viewport-based sidebar width scaling
djdembeck Mar 13, 2026
0c2902f
feat(ui): make Dashboard and LiveTab fully responsive
djdembeck Mar 13, 2026
f52eee3
feat(dashboard): make widget grid responsive to sidebar width
djdembeck Mar 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/frontend/src/components/dashboard/tabs/LiveTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3027,7 +3027,7 @@ export const LiveTab: React.FC<LiveTabProps> = ({
onDragCancel={handleDragCancel}
>
<SortableContext items={orderedCardIds}>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4 lg:gap-5 xl:gap-6 mb-4">
{orderedCardIds.map((cardId, index) => (
<div key={cardId}>{renderDraggableCard(cardId, index)}</div>
))}
Expand Down
6 changes: 3 additions & 3 deletions packages/frontend/src/components/layout/MainLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ export const MainLayout: React.FC<{ children: React.ReactNode }> = ({ children }
<Sidebar />
<main
className={clsx(
'flex-1 min-h-screen p-8 transition-[margin] duration-300',
isCollapsed ? 'ml-[64px]' : 'ml-[200px]'
'flex-1 min-h-screen p-4 md:p-6 lg:p-8 transition-[margin] duration-300 overflow-x-hidden',
isCollapsed ? 'ml-[64px]' : 'ml-[clamp(64px,15vw,200px)]'
)}
>
<div className="main-content-inner">{children}</div>
<div className="main-content-inner w-full">{children}</div>
</main>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/frontend/src/components/layout/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,7 +272,7 @@ export const Sidebar: React.FC = () => {
<aside
className={clsx(
'h-screen fixed left-0 top-0 bg-bg-surface flex flex-col overflow-y-auto overflow-x-hidden z-50 transition-all duration-300 border-r border-border',
isCollapsed ? 'w-[64px]' : 'w-[200px]'
isCollapsed ? 'w-[64px]' : 'w-[clamp(64px,15vw,200px)]'
)}
>
<div className="px-5 py-3 border-b border-border flex items-center justify-between">
Expand Down
8 changes: 4 additions & 4 deletions packages/frontend/src/pages/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@ export const Dashboard = () => {
}, [activeTab]);

return (
<div className="flex flex-col h-full">
<div className="border-b border-border-glass bg-bg-card/40 backdrop-blur-sm sticky top-0 z-10">
<div className="flex gap-0 px-4">
<div className="flex flex-col h-full w-full">
<div className="border-b border-border-glass bg-bg-card/40 backdrop-blur-sm sticky top-0 z-10 w-full">
<div className="flex gap-0 px-4 w-full">
{TABS.map((tab) => {
const isActive = tab.id === activeTab;
return (
Expand All @@ -62,7 +62,7 @@ export const Dashboard = () => {
</div>
</div>

<div className="flex-1 overflow-auto">
<div className="flex-1 overflow-auto w-full">
{activeTab === 'live' && (
<LiveTab
pollInterval={pollInterval}
Expand Down
18 changes: 6 additions & 12 deletions packages/frontend/src/pages/Logs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -397,8 +397,8 @@ export const Logs = () => {
</form>
</div>

<div className="overflow-x-auto -mx-3 px-3">
<table className="w-full border-collapse font-body text-[13px]">
<div className="overflow-x-auto lg:overflow-x-visible -mx-3 px-3">
<table className="min-w-full border-collapse font-body text-[13px]">
<thead>
<tr className="text-center border-b border-border">
<th className="px-2 py-1.5 text-center border-b border-border-glass border-r border-r-border-glass bg-bg-hover font-semibold text-text-secondary text-[11px] uppercase tracking-wider whitespace-nowrap">
Expand All @@ -414,16 +414,10 @@ export const Logs = () => {
Model
</th>
{/* <th style={{ padding: '6px' }}>Provider</th> */}
<th
className="px-2 py-1.5 text-center border-b border-border-glass border-r border-r-border-glass bg-bg-hover font-semibold text-text-secondary text-[11px] uppercase tracking-wider whitespace-nowrap"
style={{ width: '125px' }}
>
<th className="px-2 py-1.5 text-center border-b border-border-glass border-r border-r-border-glass bg-bg-hover font-semibold text-text-secondary text-[11px] uppercase tracking-wider whitespace-nowrap min-w-[100px] max-w-[200px]">
Tokens
</th>
<th
className="px-2 py-1.5 text-center border-b border-border-glass border-r border-r-border-glass bg-bg-hover font-semibold text-text-secondary text-[11px] uppercase tracking-wider whitespace-nowrap"
style={{ minWidth: '70px' }}
>
<th className="px-2 py-1.5 text-center border-b border-border-glass border-r border-r-border-glass bg-bg-hover font-semibold text-text-secondary text-[11px] uppercase tracking-wider whitespace-nowrap min-w-[60px]">
Cost
</th>
<th className="px-2 py-1.5 text-center border-b border-border-glass border-r border-r-border-glass bg-bg-hover font-semibold text-text-secondary text-[11px] uppercase tracking-wider whitespace-nowrap">
Expand Down Expand Up @@ -503,7 +497,7 @@ export const Logs = () => {
</div>
</td>
<td
className="px-2 py-1.5 text-left border-b border-border-glass text-text align-middle whitespace-nowrap"
className="px-2 py-1.5 text-left border-b border-border-glass text-text align-middle whitespace-nowrap max-w-[150px] truncate"
title={`Incoming: ${log.incomingApiType || '?'} → Outgoing: ${log.outgoingApiType || '?'} • ${log.isStreamed ? 'Streamed' : 'Non-streamed'} • ${log.isPassthrough ? 'Direct/Passthrough' : 'Translated'}`}
style={{ cursor: 'help' }}
>
Expand Down Expand Up @@ -617,7 +611,7 @@ export const Logs = () => {
)}
</div>
</td>
<td className="px-2 py-1.5 text-left border-b border-border-glass text-text align-middle whitespace-nowrap">
<td className="px-2 py-1.5 text-left border-b border-border-glass text-text align-middle whitespace-nowrap max-w-[200px] truncate">
<div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
<div className="group/model flex items-center gap-1">
<span>{log.incomingModelAlias || '-'}</span>
Expand Down