From 47ae762e7222e58898f6b0049c27be7300974da6 Mon Sep 17 00:00:00 2001
From: Daniel Volz <mail@danielvolz.org>
Date: Sun, 28 Dec 2025 13:26:14 +0100
Subject: [PATCH] feat(ui): improve table layout with left-aligned text and
 status chips

---
 frontend/src/App.tsx    | 2 +-
 frontend/src/styles.css | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e5515e9..21f119c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2501,7 +2501,7 @@ function AppContent() {
 											<span>{t('form.blisters.startTime')}</span>
 											<input type="time" value={b.startTime} onChange={(e) => setBlisterValue(idx, "startTime", e.target.value)} />
 										</label>
-										{form.blisters.length > 1 && <button type="button" className="danger remove-blister-btn" onClick={() => removeBlister(idx)} title={t('common.delete')}>🗑</button>}
+										{form.blisters.length > 1 && <button type="button" className="danger remove-blister-btn" onClick={() => removeBlister(idx)}>{t('common.remove')}</button>}
 									</div>
 								))}
 								<button type="button" className="ghost add-blister" onClick={addBlister}>+ {t('form.blisters.addIntake')}</button>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index e77fe1a..13869b3 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -900,11 +900,13 @@ textarea {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
+    align-items: stretch;
   }
   .table-row span {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    text-align: left;
   }
   .table-row span::before {
     content: attr(data-label);
@@ -914,6 +916,7 @@ textarea {
     text-transform: uppercase;
     margin-right: 1rem;
     flex-shrink: 0;
+    text-align: left;
   }
   /* First span (name cell) - centered horizontal layout */
   .table-row span:first-child {
@@ -924,6 +927,10 @@ textarea {
   .table-row span:first-child::before {
     display: none; /* Hide "NAME" label on mobile */
   }
+  /* Status chip in table row - left aligned */
+  .table-row span.status-chip {
+    align-self: flex-start;
+  }
   /* Avatar + name layout - centered */
   .table-row .cell-with-avatar {
     display: flex;