blomios/IdeA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): layouts responsive pour panneau agents et bandeau d'onglets sidebar

Browse Source 
AgentsPanel : formulaire de création et items d'agent passent en colonne,
les libellés/états longs (running in IdeA, profil) wrappent/tronquent au lieu
de déborder. ProjectsView : les onglets de la sidebar wrappent sur plusieurs
lignes pour rester tous visibles, le bouton collapse reste épinglé en haut.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Blomios
2026-06-16 09:39:03 +02:00
parent 40bce5c8bf
commit 31b636037d
2 changed files with 35 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/features/projects/ProjectsView.tsx
View File

@ -147,30 +147,35 @@ export function ProjectsView() {
sidebarCollapsed && "hidden",
)}
>
{/* Sidebar tab strip (no role="tablist" to avoid collision with project tabs) */}
<div className="flex shrink-0 items-stretch border-b border-border">
{SIDEBAR_TABS.map((t) => (
<button
key={t.id}
type="button"
aria-selected={sidebarTab === t.id}
onClick={() => setSidebarTab(t.id)}
className={cn(
"flex-1 px-2 py-2 text-xs font-medium transition-colors",
sidebarTab === t.id
? "border-b-2 border-primary text-content"
: "text-muted hover:text-content",
)}
>
{t.label}
</button>
))}
{/* Sidebar tab strip (no role="tablist" to avoid collision with project tabs).
The tabs wrap onto multiple rows when they exceed the sidebar width
so every label stays visible without scrolling; the collapse button
stays pinned to the top-right. */}
<div className="flex shrink-0 items-start border-b border-border">
<div className="flex min-w-0 flex-1 flex-wrap items-stretch">
{SIDEBAR_TABS.map((t) => (
<button
key={t.id}
type="button"
aria-selected={sidebarTab === t.id}
onClick={() => setSidebarTab(t.id)}
className={cn(
"shrink-0 whitespace-nowrap px-3 py-2 text-xs font-medium transition-colors",
sidebarTab === t.id
? "border-b-2 border-primary text-content"
: "text-muted hover:text-content",
)}
>
{t.label}
</button>
))}
</div>
<button
type="button"
aria-label="collapse sidebar"
title="Collapse sidebar"
onClick={() => setSidebarCollapsed(true)}
className="shrink-0 px-2 text-muted hover:text-content"
className="shrink-0 self-stretch border-l border-border px-2 text-muted hover:text-content"
>
«
</button>