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

21
frontend/src/features/agents/AgentsPanel.tsx
View File

@ -206,9 +206,9 @@ export function AgentsPanel({ projectId, projectRoot = "" }: AgentsPanelProps) {
{/* ── Create form ── */}
<form
onSubmit={(e) => void handleCreate(e)}
className="flex flex-wrap items-end gap-2 border-b border-border p-4"
className="flex flex-col gap-3 border-b border-border p-4"
>
<div className="flex min-w-0 flex-1 flex-col gap-1">
<div className="flex min-w-0 flex-col gap-1">
<label
htmlFor="agent-name-input"
className="text-xs font-medium text-muted"
@ -221,12 +221,12 @@ export function AgentsPanel({ projectId, projectRoot = "" }: AgentsPanelProps) {
placeholder="My agent"
value={newName}
onChange={(e) => setNewName(e.target.value)}
className="min-w-32"
className="w-full"
/>
</div>
{/* Template selector */}
<div className="flex min-w-0 flex-1 flex-col gap-1">
<div className="flex min-w-0 flex-col gap-1">
<label
htmlFor="agent-template-select"
className="text-xs font-medium text-muted"
@ -256,7 +256,7 @@ export function AgentsPanel({ projectId, projectRoot = "" }: AgentsPanelProps) {
{/* Profile selector — hidden when a template is chosen */}
{!hasTemplate && (
<div className="flex min-w-0 flex-1 flex-col gap-1">
<div className="flex min-w-0 flex-col gap-1">
<label
htmlFor="agent-profile-select"
className="text-xs font-medium text-muted"
@ -304,6 +304,7 @@ export function AgentsPanel({ projectId, projectRoot = "" }: AgentsPanelProps) {
aria-label="create agent"
disabled={!canCreate}
loading={vm.busy}
className="self-end"
>
Create
</Button>
@ -330,17 +331,17 @@ export function AgentsPanel({ projectId, projectRoot = "" }: AgentsPanelProps) {
<li
key={a.id}
className={cn(
"flex items-center justify-between gap-3 py-2 first:pt-0 last:pb-0",
"flex flex-col gap-2 py-3 first:pt-0 last:pb-0",
isSelected && "rounded-md bg-raised px-2",
)}
>
<button
type="button"
onClick={() => void vm.selectAgent(a.id)}
className="flex min-w-0 flex-1 flex-col items-start gap-0.5 text-left"
className="flex min-w-0 flex-col items-start gap-0.5 text-left"
aria-pressed={isSelected}
>
<span className="flex items-center gap-2">
<span className="flex min-w-0 max-w-full flex-wrap items-center gap-2">
<span className="font-medium text-content">{a.name}</span>
{agentDrift && (
<span
@ -366,13 +367,13 @@ export function AgentsPanel({ projectId, projectRoot = "" }: AgentsPanelProps) {
</span>
<span className="text-xs text-muted">{profileName}</span>
{live && (
<span className="text-xs text-primary">
<span className="block w-full min-w-0 truncate text-xs text-primary">
running in IdeA · {live.sessionId ?? live.nodeId}
</span>
)}
</button>
<div className="flex items-center gap-1.5 shrink-0">
<div className="flex flex-wrap items-center gap-1.5">
{/* Profile hot-swap selector (Chantier A). Changing the
engine abandons the conversation history → confirmation. */}
{vm.profiles.length > 0 && (