From 126c41a03344517e9fb623642050e41f39c663d8 Mon Sep 17 00:00:00 2001 From: Pier-Jean Malandrino Date: Thu, 2 Apr 2026 16:39:08 +0200 Subject: [PATCH 1/5] Fix studio topbar title wrapping when sidebar is open Prevent multi-line title by adding ellipsis truncation and min-width constraints on the topbar-left container. --- frontend/src/pages/StudioPage.vue | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/frontend/src/pages/StudioPage.vue b/frontend/src/pages/StudioPage.vue index 072719d..2bd6791 100644 --- a/frontend/src/pages/StudioPage.vue +++ b/frontend/src/pages/StudioPage.vue @@ -551,12 +551,17 @@ onBeforeUnmount(() => { display: flex; align-items: center; gap: 20px; + min-width: 0; } .topbar-title { font-size: 15px; font-weight: 600; color: var(--text); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + min-width: 0; } .mode-toggle { From a78c9ec415f6193cab1d965df7d5aebc265de59a Mon Sep 17 00:00:00 2001 From: Pier-Jean Malandrino Date: Thu, 2 Apr 2026 16:40:20 +0200 Subject: [PATCH 2/5] Redesign documents page rows as cards with accent hover Replace flat border-bottom rows with rounded cards that have a subtle border and accent-colored border on hover for better visual hierarchy. --- frontend/src/pages/DocumentsPage.vue | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/frontend/src/pages/DocumentsPage.vue b/frontend/src/pages/DocumentsPage.vue index a0fb581..8875995 100644 --- a/frontend/src/pages/DocumentsPage.vue +++ b/frontend/src/pages/DocumentsPage.vue @@ -89,19 +89,25 @@ onMounted(() => { .doc-items { display: flex; flex-direction: column; - gap: 2px; + gap: 6px; + padding: 12px; } .doc-row { display: flex; align-items: center; justify-content: space-between; - padding: 14px 20px; - border-bottom: 1px solid var(--border); - transition: background var(--transition); + padding: 12px 16px; + background: var(--bg-surface); + border: 1px solid var(--border); + border-radius: var(--radius-sm); + transition: all 150ms ease; } -.doc-row:hover { background: var(--bg-hover); } +.doc-row:hover { + border-color: var(--accent); + background: var(--bg-elevated); +} .doc-row-info { display: flex; From e4bbffe2584efb353e625f6510dfb0298ad28bba Mon Sep 17 00:00:00 2001 From: Pier-Jean Malandrino Date: Thu, 2 Apr 2026 16:41:06 +0200 Subject: [PATCH 3/5] Redesign history list as cards with subtle completed badges Replace flat rows with rounded cards matching documents page style. Reduce COMPLETED badge to a green dot so exceptions (FAILED, RUNNING) stand out visually instead of blending into a wall of green badges. --- .../src/features/history/ui/HistoryList.vue | 32 +++++++++++++++---- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/frontend/src/features/history/ui/HistoryList.vue b/frontend/src/features/history/ui/HistoryList.vue index cb89b5e..ffbafa0 100644 --- a/frontend/src/features/history/ui/HistoryList.vue +++ b/frontend/src/features/history/ui/HistoryList.vue @@ -13,7 +13,14 @@
{{ analysis.documentFilename }} - + + + + {{ analysis.status }}
@@ -81,20 +88,26 @@ function duration(analysis: Analysis) { .history-items { display: flex; flex-direction: column; - gap: 2px; + gap: 6px; + padding: 12px; } .history-item { display: flex; align-items: center; justify-content: space-between; - padding: 14px 20px; - border-bottom: 1px solid var(--border); - transition: background var(--transition); + padding: 12px 16px; + background: var(--bg-surface); + border: 1px solid var(--border); + border-radius: var(--radius-sm); + transition: all 150ms ease; cursor: pointer; } -.history-item:hover { background: var(--bg-hover); } +.history-item:hover { + border-color: var(--accent); + background: var(--bg-elevated); +} .item-main { flex: 1; min-width: 0; } @@ -122,9 +135,14 @@ function duration(analysis: Analysis) { flex-shrink: 0; } +.status-dot { + width: 8px; + height: 8px; +} + .status-pending { background: rgba(234, 179, 8, 0.15); color: var(--warning); } .status-running { background: rgba(59, 130, 246, 0.15); color: var(--info); } -.status-completed { background: rgba(34, 197, 94, 0.15); color: var(--success); } +.status-completed { background: none; color: var(--success); padding: 0; } .status-failed { background: rgba(239, 68, 68, 0.15); color: var(--error); } .item-meta { From 8ed0e333130d7bac389a4bd4aff82c5f90f241de Mon Sep 17 00:00:00 2001 From: Pier-Jean Malandrino Date: Thu, 2 Apr 2026 16:41:34 +0200 Subject: [PATCH 4/5] Compact settings toggles as segmented controls Reduce toggle width to fit-content with inner padding and individual border-radius, matching the studio tabs design. Narrower max-width for a tighter settings layout. --- .../features/settings/ui/SettingsPanel.vue | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/frontend/src/features/settings/ui/SettingsPanel.vue b/frontend/src/features/settings/ui/SettingsPanel.vue index 356585d..e6739a9 100644 --- a/frontend/src/features/settings/ui/SettingsPanel.vue +++ b/frontend/src/features/settings/ui/SettingsPanel.vue @@ -40,14 +40,14 @@ const { t } = useI18n() .settings-panel { display: flex; flex-direction: column; - gap: 20px; - max-width: 500px; + gap: 24px; + max-width: 320px; } .setting-group { display: flex; flex-direction: column; - gap: 6px; + gap: 8px; } .setting-label { @@ -59,33 +59,36 @@ const { t } = useI18n() } .setting-toggle { - display: flex; + display: inline-flex; + gap: 2px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); - overflow: hidden; + padding: 3px; + width: fit-content; } .setting-toggle button { - flex: 1; - padding: 8px 16px; + padding: 6px 16px; font-size: 13px; font-weight: 500; - color: var(--text-secondary); + color: var(--text-muted); background: transparent; border: none; + border-radius: calc(var(--radius-sm) - 2px); cursor: pointer; - transition: all var(--transition); + transition: all 200ms ease; } .setting-toggle button:hover { - color: var(--text); + color: var(--text-secondary); background: var(--bg-hover); } .setting-toggle button.active { background: var(--accent-muted); color: var(--accent); + font-weight: 600; } .setting-input { From 598b370e1a88a7daa862149d67d4f9cb44e04a30 Mon Sep 17 00:00:00 2001 From: Pier-Jean Malandrino Date: Thu, 2 Apr 2026 16:42:04 +0200 Subject: [PATCH 5/5] Add icons to home stats cards with accent hover Add document and clock icons above the stat numbers for better visual context. Accent border and icon color on hover for consistent interactive feedback across the app. --- frontend/src/pages/HomePage.vue | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/HomePage.vue b/frontend/src/pages/HomePage.vue index 8c7241f..8b054e7 100644 --- a/frontend/src/pages/HomePage.vue +++ b/frontend/src/pages/HomePage.vue @@ -17,10 +17,12 @@
+
{{ docCount }}
{{ t('home.documents') }}
+
{{ analysisCount }}
{{ t('home.analyses') }}
@@ -171,10 +173,21 @@ onMounted(() => { } .stat-card:hover { - border-color: var(--border-light); + border-color: var(--accent); background: var(--bg-elevated); } +.stat-icon { + width: 20px; + height: 20px; + color: var(--text-muted); + margin-bottom: 4px; +} + +.stat-card:hover .stat-icon { + color: var(--accent); +} + .stat-value { font-size: 28px; font-weight: 700;