From a2307c4548a444095238112db0043eadd4b41c3d Mon Sep 17 00:00:00 2001 From: Aline Date: Tue, 30 Apr 2024 17:39:32 +0200 Subject: [PATCH 1/2] Give item preview full height space Using flexbox to let the item preview take all window height, event when with small components. This allows overflowing elements, such as dropdown, to be visible. --- reader/views/Single/Single.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/reader/views/Single/Single.scss b/reader/views/Single/Single.scss index 7a8e9b6a..5dabd6d1 100644 --- a/reader/views/Single/Single.scss +++ b/reader/views/Single/Single.scss @@ -6,9 +6,12 @@ } .tlbx-single-full { + display: flex; + flex-direction: column; min-height: 100vh; .tlbx-item-preview { + flex-grow: 1; border: 0; } From c83debbdfc1076bc84dbe7125f3669045099f4ea Mon Sep 17 00:00:00 2001 From: Aline Date: Fri, 17 May 2024 13:51:45 +0200 Subject: [PATCH 2/2] Use overflow:visible for components with dropdown rather than flexbox --- reader/reader.scss | 6 ++++-- reader/views/Single/Single.scss | 3 --- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/reader/reader.scss b/reader/reader.scss index 2f80dc91..12f75c7f 100644 --- a/reader/reader.scss +++ b/reader/reader.scss @@ -41,9 +41,11 @@ overflow: hidden; } -/* Dropdown needs `overflow: visible` to allow it to +/* Dropdown and multi select needs `overflow: visible` to allow it to escape its container. */ -.tlbx-item-preview.tlbx-component-dropdown { +.tlbx-item-preview.tlbx-element-dropdown, +.tlbx-item-preview.tlbx-element-select-multiple, +.tlbx-item-preview.tlbx-element-breadcrumb-dropdown { overflow: visible; } diff --git a/reader/views/Single/Single.scss b/reader/views/Single/Single.scss index 5dabd6d1..7a8e9b6a 100644 --- a/reader/views/Single/Single.scss +++ b/reader/views/Single/Single.scss @@ -6,12 +6,9 @@ } .tlbx-single-full { - display: flex; - flex-direction: column; min-height: 100vh; .tlbx-item-preview { - flex-grow: 1; border: 0; }