From 0bb636b91d889063ca985ecec0b5a0187e3e58b8 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Wed, 18 Mar 2026 18:09:59 +0100
Subject: [PATCH] style(DiaryParticipantsPanel, DiaryView): enhance responsive
 design and layout

- Updated styles in DiaryParticipantsPanel to improve participant row layout and ensure proper word breaking for names.
- Adjusted styles in DiaryView for better mobile responsiveness, including changes to column display and sidebar padding.
- Ensured consistent minimum width settings across components to enhance overall UI coherence.
---
 .../src/components/DiaryParticipantsPanel.vue | 53 +++++++++++++++++++
 frontend/src/views/DiaryView.vue              | 18 ++++++-
 2 files changed, 69 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/DiaryParticipantsPanel.vue b/frontend/src/components/DiaryParticipantsPanel.vue
index 5f76a154..520aa8d7 100644
--- a/frontend/src/components/DiaryParticipantsPanel.vue
+++ b/frontend/src/components/DiaryParticipantsPanel.vue
@@ -146,6 +146,7 @@ export default {
 <style scoped>
 .diary-sidebar-section {
     margin-top: 1rem;
+    min-width: 0;
 }
 
 .participant-toolbar {
@@ -214,6 +215,27 @@ export default {
     font-weight: 600;
 }
 
+.participant-row {
+    padding: 0.55rem 0;
+}
+
+.checkbox-label {
+    margin: 0;
+}
+
+.participant-name {
+    min-width: 0;
+    word-break: break-word;
+}
+
+.participant-actions {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    min-width: 0;
+}
+
 .member-group-select {
     margin-left: 10px;
     font-size: 10px;
@@ -249,4 +271,35 @@ export default {
     opacity: 0.72;
 }
 
+@media (max-width: 768px) {
+    .participant-row {
+        align-items: flex-start;
+        flex-wrap: wrap;
+    }
+
+    .participant-name {
+        flex: 1 1 calc(100% - 2rem);
+    }
+
+    .participant-actions {
+        width: 100%;
+        margin-left: 1.9rem;
+        justify-content: flex-start;
+    }
+
+    .member-group-select,
+    .participant-status-toggle {
+        margin-left: 0;
+    }
+
+    .participant-gallery-button,
+    .participant-search-input {
+        width: 100%;
+    }
+
+    .participant-toolbar-actions {
+        justify-content: stretch;
+    }
+}
+
 </style>
diff --git a/frontend/src/views/DiaryView.vue b/frontend/src/views/DiaryView.vue
index df0f0252..07c01e96 100644
--- a/frontend/src/views/DiaryView.vue
+++ b/frontend/src/views/DiaryView.vue
@@ -5300,15 +5300,19 @@ img {
     }
     
     .columns {
+        display: block;
         flex-direction: column;
         width: 100%;
         overflow: visible;
+        height: auto;
     }
     
     .column {
+        display: block;
         width: 100%;
         max-width: 100%;
         overflow: visible;
+        height: auto;
     }
     
     .column.mobile-tab-content {
@@ -5330,9 +5334,10 @@ img {
     /* Besseres Scrollen - nur eine Haupt-Scrollbar */
     .diary {
         overflow-x: hidden;
-        overflow-y: auto;
+        overflow-y: visible;
         -webkit-overflow-scrolling: touch;
-        height: 100vh;
+        height: auto;
+        min-height: 100dvh;
     }
     
     .columns {
@@ -5348,6 +5353,15 @@ img {
     .column:last-child {
         overflow: visible;
     }
+
+    .mobile-sidebar {
+        padding-bottom: 6rem !important;
+    }
+
+    .mobile-sidebar .diary-sidebar-section {
+        margin-top: 0;
+        min-width: 0;
+    }
     
     /* Tabelle horizontal scrollbar nur wenn nötig */
     table {