diff --git a/frontend/src/components/DiaryParticipantsPanel.vue b/frontend/src/components/DiaryParticipantsPanel.vue index 520aa8d7..6d5335da 100644 --- a/frontend/src/components/DiaryParticipantsPanel.vue +++ b/frontend/src/components/DiaryParticipantsPanel.vue @@ -147,6 +147,7 @@ export default { .diary-sidebar-section { margin-top: 1rem; min-width: 0; + overflow-x: auto; } .participant-toolbar { @@ -216,24 +217,34 @@ export default { } .participant-row { + display: grid; + grid-template-columns: 1.75rem minmax(0, 1fr) auto; + align-items: center; + gap: 0.55rem; padding: 0.55rem 0; + min-width: 0; } .checkbox-label { margin: 0; + display: inline-flex; + align-items: center; + justify-content: center; } .participant-name { min-width: 0; - word-break: break-word; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .participant-actions { display: flex; align-items: center; - flex-wrap: wrap; + flex-wrap: nowrap; gap: 0.35rem; - min-width: 0; + min-width: max-content; } .member-group-select { @@ -273,18 +284,17 @@ export default { @media (max-width: 768px) { .participant-row { - align-items: flex-start; - flex-wrap: wrap; + grid-template-columns: 1.75rem minmax(10rem, 1fr) auto; + align-items: center; } .participant-name { - flex: 1 1 calc(100% - 2rem); + min-width: 10rem; } .participant-actions { - width: 100%; - margin-left: 1.9rem; - justify-content: flex-start; + margin-left: 0; + justify-content: flex-end; } .member-group-select, diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue index d907e951..9458213c 100644 --- a/frontend/src/views/Home.vue +++ b/frontend/src/views/Home.vue @@ -7,6 +7,16 @@
@@ -546,6 +556,10 @@ export default { justify-content: center; } +.auth-actions-top { + justify-content: flex-end; +} + .user-avatar { width: 64px; height: 64px; @@ -749,6 +763,10 @@ export default { width: 100%; max-width: none; } + + .auth-actions-top { + justify-content: stretch; + } .btn-primary, .btn-secondary { width: 100%;