From 2c5a98e9dadb9d584961e70d90d9b6d2b2fc0161 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Thu, 13 Aug 2026 12:55:31 +0200
Subject: [PATCH] handling improvements

---
 .../components/diary/DiaryOverviewPanels.vue  |  38 +--
 .../members/MembersOverviewSection.vue        | 216 ++++++++++--------
 frontend/src/views/DiaryView.vue              |  10 +-
 3 files changed, 145 insertions(+), 119 deletions(-)

diff --git a/frontend/src/components/diary/DiaryOverviewPanels.vue b/frontend/src/components/diary/DiaryOverviewPanels.vue
index 74b9841a..540c2be6 100755
--- a/frontend/src/components/diary/DiaryOverviewPanels.vue
+++ b/frontend/src/components/diary/DiaryOverviewPanels.vue
@@ -193,24 +193,24 @@ export default {
 }
 
 .diary-toggle-body {
-  padding: 0 0.9rem 0.9rem;
+  padding: 0 0.75rem 0.75rem;
 }
 
 .diary-toggle-body-open {
-  padding-top: 0.9rem;
+  padding-top: 0.7rem;
 }
 
 .diary-workspace-header {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
-  gap: 1rem;
-  margin-bottom: 1rem;
+  align-items: center;
+  gap: 1.25rem;
+  margin-bottom: 0;
 }
 
 .diary-workspace-copy h3 {
-  margin: 0.1rem 0 0.25rem;
-  font-size: 1.15rem;
+  margin: 0.05rem 0 0.15rem;
+  font-size: 1.05rem;
 }
 
 .diary-workspace-label {
@@ -223,28 +223,32 @@ export default {
 
 .diary-workspace-status {
   margin: 0;
-  font-size: 0.92rem;
+  font-size: 0.86rem;
   color: #45606f;
 }
 
 .diary-workspace-stats {
   display: grid;
-  grid-template-columns: repeat(6, minmax(110px, 1fr));
-  gap: 0.75rem;
-  width: min(840px, 100%);
+  grid-template-columns: repeat(4, max-content);
+  justify-content: end;
+  gap: 0.4rem;
+  width: auto;
+  max-width: 100%;
+  flex: 0 1 auto;
 }
 
 .diary-stat-card {
-  padding: 0.8rem 0.9rem;
-  border-radius: 8px;
+  padding: 0.4rem 0.55rem 0.45rem;
+  border-radius: 6px;
   background: #fff;
   border: 1px solid #d9e4ec;
+  white-space: nowrap;
 }
 
 .diary-stat-label {
   display: block;
-  margin-bottom: 0.25rem;
-  font-size: 0.76rem;
+  margin-bottom: 0.1rem;
+  font-size: 0.64rem;
   font-weight: 700;
   letter-spacing: 0.03em;
   text-transform: uppercase;
@@ -253,7 +257,7 @@ export default {
 
 .diary-stat-value {
   display: block;
-  font-size: 1rem;
+  font-size: 0.9rem;
   color: #173042;
 }
 
@@ -312,6 +316,7 @@ export default {
   .diary-workspace-header {
     gap: 0.75rem;
     margin-bottom: 0;
+    align-items: flex-start;
   }
 
   .diary-workspace-copy h3 {
@@ -344,6 +349,7 @@ export default {
 @media (max-width: 768px) {
   .diary-workspace-header {
     flex-direction: column;
+    align-items: stretch;
   }
 
   .diary-workspace-stats {
diff --git a/frontend/src/components/members/MembersOverviewSection.vue b/frontend/src/components/members/MembersOverviewSection.vue
index f2c4c4ff..9988bf47 100755
--- a/frontend/src/components/members/MembersOverviewSection.vue
+++ b/frontend/src/components/members/MembersOverviewSection.vue
@@ -19,20 +19,19 @@
             </div>
         </div>
 
-        <div class="filters-section">
-            <div class="members-filter-topline members-filter-topline-compact">
-                <div class="members-scope-buttons" role="tablist" :aria-label="$t('members.memberScope')">
-                    <button
-                        v-for="scope in memberScopeOptions"
-                        :key="scope.value"
-                        type="button"
-                        class="scope-chip"
-                        :class="{ 'scope-chip-active': selectedMemberScope === scope.value }"
-                        @click="$emit('update:selected-member-scope', scope.value)"
+        <details class="members-filters">
+            <summary>{{ $t('common.filter') }}</summary>
+            <div class="members-filter-workbench">
+                <div class="member-search-group member-search-group-primary">
+                    <label for="member-search-input">{{ $t('members.search') }}</label>
+                    <input
+                        id="member-search-input"
+                        :value="searchQuery"
+                        type="search"
+                        class="member-search-input"
+                        :placeholder="$t('members.searchPlaceholder')"
+                        @input="$emit('update:search-query', $event.target.value.trim())"
                     >
-                        <span class="scope-chip-label">{{ scope.label }}</span>
-                        <span class="scope-chip-count">{{ scope.count }}</span>
-                    </button>
                 </div>
                 <div class="members-quick-filter-group">
                     <label for="members-quick-training-group">{{ $t('members.trainingGroups') }}</label>
@@ -48,23 +47,23 @@
                         </option>
                     </select>
                 </div>
+                <div class="members-scope-buttons" role="group" :aria-label="$t('members.memberScope')">
+                    <button
+                        v-for="scope in memberScopeOptions"
+                        :key="scope.value"
+                        type="button"
+                        class="scope-chip"
+                        :class="{ 'scope-chip-active': selectedMemberScope === scope.value }"
+                        @click="$emit('update:selected-member-scope', scope.value)"
+                    >
+                        <span class="scope-chip-label">{{ scope.label }}</span>
+                        <span class="scope-chip-count">{{ scope.count }}</span>
+                    </button>
+                </div>
             </div>
 
-            <details class="members-advanced-filters">
-                <summary>{{ $t('members.searchAndFilter') }}</summary>
-                <div class="filter-controls">
-                    <div class="member-search-group">
-                        <label for="member-search-input">{{ $t('members.search') }}</label>
-                        <input
-                            id="member-search-input"
-                            :value="searchQuery"
-                            type="search"
-                            class="member-search-input"
-                            :placeholder="$t('members.searchPlaceholder')"
-                            @input="$emit('update:search-query', $event.target.value.trim())"
-                        >
-                    </div>
-                    <div class="checkbox-group">
+            <div class="filter-controls">
+                <div class="checkbox-group">
                         <label class="checkbox-item">
                             <input
                                 type="checkbox"
@@ -81,8 +80,8 @@
                             >
                             <span>{{ $t('members.showTrainingParticipationsColumn') }}</span>
                         </label>
-                    </div>
-                    <div class="filter-group">
+                </div>
+                <div class="filter-group">
                         <label>{{ $t('members.ttSeasonFilter') }}</label>
                         <select
                             :value="selectedSeasonStartYear"
@@ -94,8 +93,8 @@
                             </option>
                         </select>
                         <p class="filter-hint filter-hint-tt">{{ $t('members.ttStichtagHint') }}</p>
-                    </div>
-                    <div class="filter-group">
+                </div>
+                <div class="filter-group">
                         <label>{{ $t('members.ageGroup') }}:</label>
                         <select :value="selectedAgeGroup" class="filter-select" @change="$emit('update:selected-age-group', $event.target.value)">
                             <option value="">{{ $t('common.all') }}</option>
@@ -116,8 +115,8 @@
                             </optgroup>
                             <option value="range">{{ $t('members.ageRange') }}</option>
                         </select>
-                    </div>
-                    <div v-if="selectedAgeGroup === 'range'" class="filter-group age-range-group">
+                </div>
+                <div v-if="selectedAgeGroup === 'range'" class="filter-group age-range-group">
                         <label>{{ $t('members.ageRange') }}:</label>
                         <div class="age-range-inputs">
                             <input
@@ -140,8 +139,8 @@
                                 @input="$emit('update:selected-age-to', $event.target.value)"
                             >
                         </div>
-                    </div>
-                    <div class="filter-group">
+                </div>
+                <div class="filter-group">
                         <label>{{ $t('members.gender') }}:</label>
                         <select :value="selectedGender" class="filter-select" @change="$emit('update:selected-gender', $event.target.value)">
                             <option value="">{{ $t('common.all') }}</option>
@@ -150,8 +149,8 @@
                             <option value="diverse">{{ $t('members.genderDiverse') }}</option>
                             <option value="unknown">{{ $t('members.genderUnknown') }}</option>
                         </select>
-                    </div>
-                    <div class="filter-group">
+                </div>
+                <div class="filter-group">
                         <label>{{ $t('members.lastTrainingFilter') }}</label>
                         <select
                             :value="selectedLastTrainingFilter"
@@ -164,11 +163,10 @@
                             <option value="notInTraining">{{ $t('members.lastTrainingFilterNotInTraining') }}</option>
                         </select>
                         <p class="filter-hint filter-hint-tt">{{ $t('members.lastTrainingFilterHint') }}</p>
-                    </div>
-                    <button @click="$emit('clear-filters')" class="btn-clear-filters">{{ $t('members.clearFilters') }}</button>
                 </div>
-            </details>
-        </div>
+                <button @click="$emit('clear-filters')" class="btn-clear-filters">{{ $t('members.clearFilters') }}</button>
+            </div>
+        </details>
 
         <div class="members-results-bar">
             <div class="members-results-summary">
@@ -203,33 +201,14 @@
         <details class="members-bulk-actions">
             <summary>{{ $t('members.bulkActions') }}</summary>
             <div class="members-bulk-actions-grid">
-                <button type="button" @click="$emit('create-phone-list-for-filtered')" :disabled="visibleMembersCount === 0">
-                    {{ $t('members.phoneListForSelection') }}
-                </button>
-                <button type="button" @click="$emit('mark-filtered-forms-handed-over')" :disabled="filteredMembersWithoutFormCount === 0">
-                    {{ $t('members.markFormsForSelection') }}
-                </button>
-                <button type="button" @click="$emit('mark-filtered-as-regular')" :disabled="filteredTestMembersCount === 0">
-                    {{ $t('members.markRegularForSelection') }}
-                </button>
-                <button type="button" @click="$emit('export-filtered-members-csv')" :disabled="visibleMembersCount === 0">
-                    {{ $t('members.exportCsv') }}
-                </button>
-                <button type="button" @click="$emit('copy-filtered-phones')" :disabled="filteredMembersWithPhonesCount === 0">
-                    {{ $t('members.copyPhones') }}
-                </button>
-                <button type="button" @click="$emit('copy-filtered-emails')" :disabled="filteredMembersWithEmailsCount === 0">
-                    {{ $t('members.copyEmails') }}
-                </button>
-                <button type="button" @click="$emit('compose-email-to-filtered')" :disabled="filteredMembersWithEmailsCount === 0">
-                    {{ $t('members.composeEmail') }}
-                </button>
-                <button type="button" @click="$emit('copy-filtered-contact-summary')" :disabled="visibleMembersCount === 0">
-                    {{ $t('members.copyContactSummary') }}
-                </button>
-            </div>
-            <div class="members-bulk-preview">
-                {{ exportPreviewNames.length ? exportPreviewNames.join(', ') : $t('members.exportPreviewEmpty') }}
+                <button type="button" @click="$emit('create-phone-list-for-filtered')" :disabled="visibleMembersCount === 0">{{ $t('members.phoneListForSelection') }}</button>
+                <button type="button" @click="$emit('mark-filtered-forms-handed-over')" :disabled="filteredMembersWithoutFormCount === 0">{{ $t('members.markFormsForSelection') }}</button>
+                <button type="button" @click="$emit('mark-filtered-as-regular')" :disabled="filteredTestMembersCount === 0">{{ $t('members.markRegularForSelection') }}</button>
+                <button type="button" @click="$emit('export-filtered-members-csv')" :disabled="visibleMembersCount === 0">{{ $t('members.exportCsv') }}</button>
+                <button type="button" @click="$emit('copy-filtered-phones')" :disabled="filteredMembersWithPhonesCount === 0">{{ $t('members.copyPhones') }}</button>
+                <button type="button" @click="$emit('copy-filtered-emails')" :disabled="filteredMembersWithEmailsCount === 0">{{ $t('members.copyEmails') }}</button>
+                <button type="button" @click="$emit('compose-email-to-filtered')" :disabled="filteredMembersWithEmailsCount === 0">{{ $t('members.composeEmail') }}</button>
+                <button type="button" @click="$emit('copy-filtered-contact-summary')" :disabled="visibleMembersCount === 0">{{ $t('members.copyContactSummary') }}</button>
             </div>
         </details>
     </div>
@@ -307,7 +286,7 @@ export default {
 }
 
 .members-header,
-.members-filter-topline,
+.members-filter-workbench,
 .members-results-bar {
     display: flex;
     justify-content: space-between;
@@ -327,19 +306,17 @@ export default {
     align-items: center;
 }
 
-.filters-section,
 .members-results-bar,
-.members-bulk-actions {
+.members-bulk-actions,
+.members-filters {
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
     background: var(--background-light);
     padding: 0.85rem;
 }
 
-.filters-section,
 .members-results-bar {
-    padding-top: 0.7rem;
-    padding-bottom: 0.7rem;
+    padding: 0.6rem 0.75rem;
 }
 
 .members-results-hint {
@@ -365,12 +342,17 @@ export default {
 }
 
 .member-search-group {
-    flex: 1 1 18rem;
+    flex: 1 1 20rem;
 }
 
 .member-search-input,
 .filter-select {
     min-width: 11rem;
+    min-height: 2.25rem;
+}
+
+.member-search-input {
+    width: 100%;
 }
 
 .age-range-group {
@@ -433,38 +415,54 @@ export default {
     color: var(--primary-strong);
 }
 
-.members-filter-topline-compact {
-    align-items: center;
+.members-filter-workbench {
+    display: grid;
+    grid-template-columns: minmax(20rem, 1fr) minmax(12rem, 15rem);
+    align-items: flex-end;
+    gap: 0.45rem 0.8rem;
 }
 
 .members-quick-filter-group {
     display: flex;
     flex-direction: column;
     gap: 0.35rem;
-    min-width: 16rem;
+    flex: 0 1 15rem;
+    min-width: 12rem;
 }
 
-.members-advanced-filters {
-    margin-top: 0.75rem;
-    border-top: 1px solid var(--border-color);
-    padding-top: 0.75rem;
+.members-scope-buttons {
+    grid-column: 1 / -1;
+    gap: 0.4rem;
+    padding-bottom: 0.05rem;
 }
 
-.members-advanced-filters summary {
+.members-filters {
+    padding: 0.55rem 0.75rem;
+}
+
+.members-filters summary {
     cursor: pointer;
     font-weight: 600;
     color: var(--text-primary);
     user-select: none;
+    font-size: 0.82rem;
 }
 
-.members-advanced-filters .filter-controls {
-    margin-top: 0.85rem;
+.members-filters[open] .members-filter-workbench {
+    margin-top: 0.6rem;
+}
+
+.members-filters[open] .filter-controls {
+    margin-top: 0.55rem;
+    padding-top: 0.55rem;
+    border-top: 1px solid var(--border-color);
 }
 
 .members-results-summary {
     display: flex;
-    flex-direction: column;
-    gap: 0.45rem;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.35rem 0.6rem;
 }
 
 .members-results-stats {
@@ -489,19 +487,18 @@ export default {
     font-weight: 600;
     color: var(--text-primary);
     user-select: none;
+    font-size: 0.82rem;
 }
 
 .members-bulk-actions-grid {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.6rem;
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 0.55rem;
     margin-top: 0.85rem;
 }
 
-.members-bulk-preview {
-    margin-top: 0.75rem;
-    color: var(--text-muted);
-    font-size: 0.82rem;
+.members-bulk-actions-grid > button {
+    width: 100%;
 }
 
 @media (max-width: 900px) {
@@ -510,17 +507,33 @@ export default {
         align-items: stretch;
     }
 
+    .members-filter-workbench {
+        display: flex;
+        align-items: stretch;
+    }
+
+    .member-search-group-primary {
+        flex-basis: 100%;
+    }
+
+    .members-scope-buttons {
+        flex: 1 1 100%;
+    }
+
     .action-buttons,
     .filter-controls,
     .members-results-actions {
         width: 100%;
     }
 
-    .action-buttons > button,
-    .members-bulk-actions-grid > button {
+    .action-buttons > button {
         flex: 1 1 14rem;
     }
 
+    .members-bulk-actions-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
     .members-results-actions {
         justify-content: flex-start;
     }
@@ -536,9 +549,9 @@ export default {
         gap: 0.85rem;
     }
 
-    .filters-section,
     .members-results-bar,
-    .members-bulk-actions {
+    .members-bulk-actions,
+    .members-filters {
         padding: 0.75rem;
     }
 
@@ -547,6 +560,10 @@ export default {
         justify-content: space-between;
     }
 
+    .members-bulk-actions-grid {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
     .member-search-group,
     .members-sort-group,
     .filter-group,
@@ -594,7 +611,6 @@ export default {
     }
 
     .action-buttons > button,
-    .members-bulk-actions-grid > button,
     .btn-clear-filters {
         width: 100%;
         flex: 1 1 100%;
diff --git a/frontend/src/views/DiaryView.vue b/frontend/src/views/DiaryView.vue
index 677f66de..5f808a87 100755
--- a/frontend/src/views/DiaryView.vue
+++ b/frontend/src/views/DiaryView.vue
@@ -4667,8 +4667,9 @@ h3 {
 
 .columns {
     display: flex;
-    justify-content: space-between;
-    width: calc(100% - 1em);
+    align-items: flex-start;
+    gap: clamp(1rem, 1.5vw, 1.5rem);
+    width: 100%;
     overflow: visible;
     height: 100%;
 }
@@ -4711,7 +4712,8 @@ h3 {
 }
 
 .column:first-child {
-    flex: 1;
+    flex: 1 1 0;
+    min-width: 0;
     overflow: visible;
     height: 100%;
     justify-self: start;
@@ -4720,6 +4722,8 @@ h3 {
 }
 
 .column:last-child {
+    flex: 0 1 clamp(19rem, 25vw, 25rem);
+    min-width: 0;
     overflow: auto;
 }