From 09b7788fdf71d238c5c175001a66409c1a08bbb5 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Fri, 14 Aug 2026 11:30:15 +0200
Subject: [PATCH] style: optimize layout and spacing in DiaryParticipantsPanel

---
 .../src/components/DiaryParticipantsPanel.vue | 86 ++++++++++++++-----
 1 file changed, 65 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/DiaryParticipantsPanel.vue b/frontend/src/components/DiaryParticipantsPanel.vue
index 8278a735..459c17d0 100755
--- a/frontend/src/components/DiaryParticipantsPanel.vue
+++ b/frontend/src/components/DiaryParticipantsPanel.vue
@@ -178,27 +178,30 @@ export default {
 }
 
 .participant-summary {
-    margin: -0.35rem 0 0.85rem;
+    margin: -0.2rem 0 0.55rem;
     color: var(--text-muted, #5f7b8b);
-    font-size: 0.92rem;
+    font-size: 0.82rem;
+    line-height: 1.3;
 }
 
 .participant-toolbar {
     display: flex;
     flex-direction: column;
-    gap: 0.65rem;
-    margin-bottom: 0.85rem;
+    gap: 0.45rem;
+    margin-bottom: 0.6rem;
 }
 
 .participant-toolbar-actions {
     display: flex;
     justify-content: flex-end;
+    gap: 0.4rem;
 }
 
 .participant-gallery-button {
-    padding: 0.45rem 0.75rem;
+    min-height: 2rem;
+    padding: 0.3rem 0.55rem;
     border: 1px solid var(--primary-soft);
-    border-radius: 10px;
+    border-radius: 7px;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
     color: var(--text-on-primary);
     font-weight: 600;
@@ -207,6 +210,7 @@ export default {
     align-items: center;
     gap: 0.4rem;
     box-shadow: 0 2px 8px rgba(47, 122, 95, 0.18);
+    font-size: 0.82rem;
 }
 
 .participant-gallery-button:hover:not(:disabled) {
@@ -227,9 +231,10 @@ export default {
 }
 
 .participant-group-photo-button {
-    padding: 0.45rem 0.75rem;
+    min-height: 2rem;
+    padding: 0.3rem 0.55rem;
     border: 1px solid var(--border-color);
-    border-radius: 10px;
+    border-radius: 7px;
     background: var(--surface-muted);
     color: var(--text-color);
     font-weight: 600;
@@ -237,15 +242,18 @@ export default {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
+    font-size: 0.82rem;
 }
 
 .participant-search-input {
     width: 100%;
-    padding: 0.65rem 0.8rem;
+    min-height: 2.15rem;
+    padding: 0.4rem 0.6rem;
     border: 1px solid var(--border-color);
-    border-radius: 10px;
+    border-radius: 7px;
     background: var(--surface-color);
     color: var(--text-color);
+    font-size: 0.88rem;
 }
 
 .participant-search-input:focus {
@@ -257,7 +265,7 @@ export default {
 .participant-filter-chips {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.45rem;
+    gap: 0.3rem;
 }
 
 .participant-filter-chip {
@@ -265,8 +273,9 @@ export default {
     background: var(--surface-muted);
     color: var(--text-color);
     border-radius: 999px;
-    padding: 0.35rem 0.75rem;
-    font-size: 0.85rem;
+    min-height: 1.9rem;
+    padding: 0.22rem 0.55rem;
+    font-size: 0.78rem;
     cursor: pointer;
     font-weight: 600;
 }
@@ -280,15 +289,28 @@ export default {
 
 .participant-row {
     display: grid;
-    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
+    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
     align-items: center;
-    gap: 0.55rem;
-    padding: 0.55rem 0;
+    gap: 0.35rem;
+    min-height: 2.35rem;
+    padding: 0.15rem 0;
+    margin: 0;
     min-width: 0;
+    border-bottom: 1px solid rgba(54, 82, 102, 0.1);
+}
+
+.participant-row:last-child {
+    border-bottom: 0;
+}
+
+.participant-row:focus-within {
+    background: rgba(47, 122, 95, 0.07);
 }
 
 .checkbox-label {
     margin: 0;
+    width: 1.5rem;
+    min-height: 2rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -296,6 +318,9 @@ export default {
 
 .participant-name {
     min-width: 0;
+    padding: 0.2rem 0;
+    font-size: 0.9rem;
+    line-height: 1.2;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -305,15 +330,16 @@ export default {
     display: flex;
     align-items: center;
     flex-wrap: nowrap;
-    gap: 0.35rem;
+    gap: 0.12rem;
     min-width: max-content;
 }
 
 .member-group-select {
-    margin-left: 10px;
+    height: 1.8rem;
+    margin-left: 0;
     font-size: 10px;
     width: 5em;
-    padding: 2px 4px;
+    padding: 1px 2px;
     border: 1px solid var(--border-color);
     border-radius: 6px;
     background-color: var(--surface-color);
@@ -321,8 +347,10 @@ export default {
 }
 
 .participant-status-toggle {
-    margin-left: 10px;
-    padding: 0.28rem 0.5rem;
+    width: 1.9rem;
+    min-height: 1.9rem;
+    margin-left: 0;
+    padding: 0.15rem;
     border: 1px solid var(--border-color);
     border-radius: 999px;
     background: var(--surface-color);
@@ -344,6 +372,22 @@ export default {
     opacity: 0.72;
 }
 
+.participant-row .img-icon,
+.participant-row .pointer {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.65rem;
+    min-height: 1.9rem;
+    margin-left: 0;
+    line-height: 1;
+}
+
+.add-participant {
+    margin-top: 0.55rem;
+    padding-top: 0.55rem;
+}
+
 @media (max-width: 768px) {
     .participant-row {
         grid-template-columns: 1.75rem minmax(10rem, 1fr) auto;