From 88b193f6f6f08e2572fbdbb37d09a1003c547125 Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@piment-noir.org>
Date: Mon, 10 Aug 2026 19:38:42 +0200
Subject: [PATCH] fix(webui): polish the station details view (panel placement
 + section/key-value separation) (#2076)

CSS/Vue-only polish of the #993 Show details view: classic panel-placement fix + section/key-value separation; modern section panels, promoted titles and tighter symmetric row separators; not-found escape; toggle-navigation test coverage.
---
 .../components/actions/ShowDetails.vue        | 40 +++++++++++++------
 .../components/dialogs/ShowDetailsDialog.vue  | 18 ++++++++-
 .../tests/unit/skins/classic/Actions.test.ts  |  8 +---
 .../tests/unit/skins/classic/CSData.test.ts   | 22 ++++++++++
 4 files changed, 68 insertions(+), 20 deletions(-)

diff --git a/ui/web/src/skins/classic/components/actions/ShowDetails.vue b/ui/web/src/skins/classic/components/actions/ShowDetails.vue
index 9557b19f..2b482cae 100644
--- a/ui/web/src/skins/classic/components/actions/ShowDetails.vue
+++ b/ui/web/src/skins/classic/components/actions/ShowDetails.vue
@@ -3,12 +3,17 @@
     Show Details
   </h1>
   <h2>{{ chargingStationId }}</h2>
-  <p
-    v-if="station == null"
-    class="show-details__empty"
-  >
-    Charging station not found
-  </p>
+  <template v-if="station == null">
+    <p class="show-details__empty">
+      Charging station not found
+    </p>
+    <Button
+      id="action-button"
+      @click="close()"
+    >
+      Back to Charging Stations
+    </Button>
+  </template>
   <template v-else>
     <table
       v-for="section in sections"
@@ -72,12 +77,6 @@
       </tbody>
     </table>
   </template>
-  <Button
-    id="action-button"
-    @click="close()"
-  >
-    Close
-  </Button>
 </template>
 
 <script setup lang="ts">
@@ -104,12 +103,27 @@ const close = (): void => {
 </script>
 
 <style scoped>
+/* Bound the width: the shared action container is `min-width: max-content`,
+ * so uncapped these tables would grow it to fill the main area. */
 .show-details__section {
-  margin-bottom: var(--spacing-md);
+  width: 32rem;
+  margin-bottom: var(--spacing-lg);
+}
+
+.show-details__section:last-of-type {
+  margin-bottom: 0;
 }
 
 .show-details__section :is(th, td) {
   text-align: left;
+  vertical-align: top;
+  overflow-wrap: anywhere;
+}
+
+.show-details__section th[scope='row'] {
+  font-weight: bold;
+  background-color: var(--color-bg-header);
+  border-right: solid 0.25px var(--color-border);
 }
 
 .show-details__empty {
diff --git a/ui/web/src/skins/modern/components/dialogs/ShowDetailsDialog.vue b/ui/web/src/skins/modern/components/dialogs/ShowDetailsDialog.vue
index d74124b0..669e7056 100644
--- a/ui/web/src/skins/modern/components/dialogs/ShowDetailsDialog.vue
+++ b/ui/web/src/skins/modern/components/dialogs/ShowDetailsDialog.vue
@@ -134,12 +134,23 @@ const close = (): void => {
   display: flex;
   flex-direction: column;
   gap: var(--skin-space-2);
+  padding: var(--skin-space-3);
+  background-color: var(--skin-surface-sunken);
+  border: 1px solid var(--skin-border);
+  border-radius: var(--skin-radius-lg);
+}
+
+.station-details__section > h3 {
+  font-size: 0.8125rem;
+  color: var(--color-text-strong);
+  padding-bottom: var(--skin-space-2);
+  border-bottom: 1px solid var(--skin-border);
 }
 
 .station-details__list {
   margin: 0;
   display: grid;
-  gap: var(--skin-space-2);
+  gap: var(--skin-space-1);
 }
 
 .station-details__row {
@@ -149,6 +160,11 @@ const close = (): void => {
   align-items: baseline;
 }
 
+.station-details__row + .station-details__row {
+  padding-top: var(--skin-space-1);
+  border-top: 1px solid var(--skin-border);
+}
+
 .station-details__row dt {
   margin: 0;
   font-size: 0.6875rem;
diff --git a/ui/web/tests/unit/skins/classic/Actions.test.ts b/ui/web/tests/unit/skins/classic/Actions.test.ts
index 1a2d18f1..9b86caed 100644
--- a/ui/web/tests/unit/skins/classic/Actions.test.ts
+++ b/ui/web/tests/unit/skins/classic/Actions.test.ts
@@ -422,10 +422,6 @@ describe('Actions', () => {
   })
 
   describe('ShowDetails', () => {
-    beforeEach(() => {
-      mockPush.mockClear()
-    })
-
     afterEach(() => {
       vi.clearAllMocks()
       vi.restoreAllMocks()
@@ -506,8 +502,8 @@ describe('Actions', () => {
       expect(wrapper.text()).toContain('Charging station not found')
     })
 
-    it('should navigate to charging-stations on close', async () => {
-      const wrapper = mountShowDetails()
+    it('should navigate to charging-stations from the not-found panel', async () => {
+      const wrapper = mountShowDetails([])
       await wrapper.findComponent(ButtonStub).trigger('click')
       await flushPromises()
       expect(mockPush).toHaveBeenCalledWith({ name: 'charging-stations' })
diff --git a/ui/web/tests/unit/skins/classic/CSData.test.ts b/ui/web/tests/unit/skins/classic/CSData.test.ts
index bb320a78..512d469c 100644
--- a/ui/web/tests/unit/skins/classic/CSData.test.ts
+++ b/ui/web/tests/unit/skins/classic/CSData.test.ts
@@ -313,5 +313,27 @@ describe('CSData', () => {
       toggleProps.off?.()
       expect(mockPush).toHaveBeenCalledWith({ name: 'charging-stations' })
     })
+
+    it('should trigger router push to show-details on toggle on', () => {
+      const wrapper = mountCSData()
+      const toggleButtons = wrapper.findAllComponents(ToggleButtonStub)
+      expect(toggleButtons[1].props('id')).toBe(`${TEST_HASH_ID}-show-details`)
+      const toggleProps = toggleButtons[1].props() as unknown as StubProps
+      toggleProps.on?.()
+      expect(mockPush).toHaveBeenCalledOnce()
+      const callArg = mockPush.mock.calls[0][0] as { name: string; params: Record<string, string> }
+      expect(callArg.name).toBe('show-details')
+      expect(callArg.params.hashId).toBe(TEST_HASH_ID)
+      expect(callArg.params.chargingStationId).toBe(TEST_STATION_ID)
+    })
+
+    it('should trigger router push to charging-stations on show-details toggle off', () => {
+      const wrapper = mountCSData()
+      const toggleButtons = wrapper.findAllComponents(ToggleButtonStub)
+      expect(toggleButtons[1].props('id')).toBe(`${TEST_HASH_ID}-show-details`)
+      const toggleProps = toggleButtons[1].props() as unknown as StubProps
+      toggleProps.off?.()
+      expect(mockPush).toHaveBeenCalledWith({ name: 'charging-stations' })
+    })
   })
 })
-- 
2.53.0