From 93502d826f4f40e3e785cd2d48ef18d07b2d4eba Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Tue, 8 Sep 2026 12:11:07 +0200 Subject: [PATCH 1/3] fix(TalkDashboard): unify gaps and paddings Signed-off-by: Maksim Sukharev --- src/components/Dashboard/TalkDashboard.vue | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/src/components/Dashboard/TalkDashboard.vue b/src/components/Dashboard/TalkDashboard.vue index 9abad6285b7..4d4b9a1a247 100644 --- a/src/components/Dashboard/TalkDashboard.vue +++ b/src/components/Dashboard/TalkDashboard.vue @@ -425,11 +425,12 @@ function scrollEventCards({ direction }: { direction: 'backward' | 'forward' }) @use '../../assets/variables.scss' as *; .talk-dashboard-wrapper { - padding: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 3); + padding: calc(var(--default-grid-baseline) * 2); width: min(100%, calc(100vw - 300px - var(--body-container-margin) * 2)); // 300px for the left sidebar and body container margins margin: 0 auto; display: flex; flex-direction: column; + gap: calc(var(--default-grid-baseline) * 4); height: 100%; max-height: 800px; max-width: 900px; @@ -449,15 +450,10 @@ function scrollEventCards({ direction }: { direction: 'backward' | 'forward' }) .talk-dashboard__chats { grid-template-columns: 1fr; - gap: calc(var(--default-grid-baseline) * 5); } } } -.talk-dashboard__menu { - margin-bottom: calc(var(--default-grid-baseline) * 4); -} - .talk-dashboard__header { --app-navigation-toggle-space: calc(var(--default-clickable-area) + var(--default-grid-baseline)); font-size: 21px; // NcDialog header font size @@ -497,8 +493,6 @@ function scrollEventCards({ direction }: { direction: 'backward' | 'forward' }) } .event-section { - margin-block-end: calc(var(--default-grid-baseline) * 6); - :deep(.dashboard-section--list) { .dashboard-section__content { padding-inline: 0; @@ -579,6 +573,7 @@ function scrollEventCards({ direction }: { direction: 'backward' | 'forward' }) .talk-dashboard__items { display: flex; flex-direction: column; + gap: calc(var(--default-grid-baseline) * 4); justify-content: space-around; min-width: 0; flex-grow: 3; @@ -586,7 +581,7 @@ function scrollEventCards({ direction }: { direction: 'backward' | 'forward' }) .talk-dashboard__chats { display: grid; - gap: calc(var(--default-grid-baseline) * 8); + gap: calc(var(--default-grid-baseline) * 4); grid-template-columns: 1fr 1fr; flex-grow: 1; From 69f961883679867585072c2bed697771da244cc6 Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Tue, 8 Sep 2026 12:11:33 +0200 Subject: [PATCH 2/3] fix(TalkDashboard): do not cover header with nav toggle Signed-off-by: Maksim Sukharev --- src/components/Dashboard/TalkDashboard.vue | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/Dashboard/TalkDashboard.vue b/src/components/Dashboard/TalkDashboard.vue index 4d4b9a1a247..a999872d687 100644 --- a/src/components/Dashboard/TalkDashboard.vue +++ b/src/components/Dashboard/TalkDashboard.vue @@ -425,6 +425,8 @@ function scrollEventCards({ direction }: { direction: 'backward' | 'forward' }) @use '../../assets/variables.scss' as *; .talk-dashboard-wrapper { + --dashboard-max-height: 800px; + --dashboard-max-width: 900px; padding: calc(var(--default-grid-baseline) * 2); width: min(100%, calc(100vw - 300px - var(--body-container-margin) * 2)); // 300px for the left sidebar and body container margins margin: 0 auto; @@ -432,14 +434,15 @@ function scrollEventCards({ direction }: { direction: 'backward' | 'forward' }) flex-direction: column; gap: calc(var(--default-grid-baseline) * 4); height: 100%; - max-height: 800px; - max-width: 900px; + max-height: var(--dashboard-max-height); + max-width: var(--dashboard-max-width); &--mobile { width: 100%; .talk-dashboard__header { margin-block-start: 0; + padding-inline-start: clamp(0px, calc(var(--dashboard-max-width) / 2 + var(--app-navigation-toggle-space) - 50vw), var(--app-navigation-toggle-space)); } } @@ -459,9 +462,17 @@ function scrollEventCards({ direction }: { direction: 'backward' | 'forward' }) font-size: 21px; // NcDialog header font size font-weight: bold; margin-inline: auto; - margin-block-start: clamp(0px, calc(100vh - 800px), var(--app-navigation-toggle-space)); + margin-block-start: clamp(0px, calc(100vh - var(--dashboard-max-height)), var(--app-navigation-toggle-space)); margin-block-end: calc(var(--default-grid-baseline) * 2); - padding-inline-start: clamp(0px, calc(900px / 2 + var(--app-navigation-toggle-space) - 50vw), var(--app-navigation-toggle-space)) +} + +// var(--dashboard-max-height) + var(--header-height) + var(--body-container-margin) +@media (max-height: 852px) { + .talk-dashboard__header { + margin-block-start: 0; + --min-width-with-navigation: calc(var(--body-container-margin) * 2 + 300px + var(--dashboard-max-width)); + padding-inline-start: clamp(0px, calc(var(--min-width-with-navigation) / 2 + var(--app-navigation-toggle-space) - 50vw), var(--app-navigation-toggle-space)); + } } .talk-dashboard__actions { From bf4ad41b1929bd57e8e9677b22bcfaa9593bfb78 Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Tue, 8 Sep 2026 12:23:01 +0200 Subject: [PATCH 3/3] fix(TalkDashboard): better wrap actions Signed-off-by: Maksim Sukharev --- src/components/Dashboard/TalkDashboard.vue | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Dashboard/TalkDashboard.vue b/src/components/Dashboard/TalkDashboard.vue index a999872d687..e6b83b6a1b4 100644 --- a/src/components/Dashboard/TalkDashboard.vue +++ b/src/components/Dashboard/TalkDashboard.vue @@ -477,8 +477,7 @@ function scrollEventCards({ direction }: { direction: 'backward' | 'forward' }) .talk-dashboard__actions { display: flex; - gap: calc(var(--default-grid-baseline) * 3); - padding-block: var(--default-grid-baseline); + gap: calc(var(--default-grid-baseline) * 2); flex-wrap: wrap; flex-direction: row; @@ -495,7 +494,7 @@ function scrollEventCards({ direction }: { direction: 'backward' | 'forward' }) // Spread the actions across the full width of every row they wrap onto .talk-dashboard__action { - flex-grow: 1; + flex: 1 0 calc(50% - var(--default-grid-baseline)); // The popover only wraps its trigger, so the button inside has to stretch as well :deep(.button-vue) { @@ -655,6 +654,10 @@ function scrollEventCards({ direction }: { direction: 'backward' | 'forward' }) // Override NcButton styles for narrow screen size @media screen and (max-width: $breakpoint-mobile-small) { .talk-dashboard__actions { + .talk-dashboard__action { + flex: 1 1 100%; + } + :deep(.button-vue), & > div { width: 100%;