From a6812bb74d06a9137998daba07707a9430bbfe64 Mon Sep 17 00:00:00 2001 From: bir Date: Tue, 5 Nov 2024 10:56:30 +0100 Subject: [PATCH] Label popup list overflow Issue: Scroll is missing in labelspopup. Resolved by setting maximum height to 6 labels button height and if more than that enabled scroll. close: #7865 --- src/mail-app/mail/view/LabelsPopup.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/mail-app/mail/view/LabelsPopup.ts b/src/mail-app/mail/view/LabelsPopup.ts index 417c3da75c0..574232fb7ad 100644 --- a/src/mail-app/mail/view/LabelsPopup.ts +++ b/src/mail-app/mail/view/LabelsPopup.ts @@ -53,7 +53,7 @@ export class LabelsPopup implements ModalComponent { view(): void | Children { return m(".flex.col.elevated-bg.abs.dropdown-shadow.pt-s.border-radius", { tabindex: TabIndex.Programmatic }, [ m( - ".pb-s", + ".pb-s.scroll", this.labels.map((labelState) => { const { label, state } = labelState const color = theme.content_button @@ -116,7 +116,11 @@ export class LabelsPopup implements ModalComponent { oncreate(vnode: VnodeDOM) { this.dom = vnode.dom as HTMLElement - showDropdown(this.origin, this.dom, (this.labels.length + 1) * size.button_height + size.vpad_small * 2, this.width).then(() => { + + // restrict label height to showing maximum 6 labels to avoid overflow + const displayedLabels = Math.min(this.labels.length, 6) + const height = (displayedLabels + 1) * size.button_height + size.vpad_small * 2 + showDropdown(this.origin, this.dom, height, this.width).then(() => { const firstLabel = vnode.dom.getElementsByTagName("label-item").item(0) if (firstLabel !== null) { ;(firstLabel as HTMLElement).focus()