From 8b128f4b59cd579c8fe70f02558b5a5ce756cf4e Mon Sep 17 00:00:00 2001 From: Sayam Samal Date: Thu, 7 Dec 2023 08:10:27 +0530 Subject: [PATCH] topics_popover: Set popover width equal to width of longest menu item. We set the topics popover width to be equal to the width of the longest menu item, via the min-content intrinsic sizing. We also set all the menu items to `white-space: nowrap` to prevent them wrapping. These two changes allow the menu items to dictate the width of the popover instead of a static max-width property, and thus helps with languages where the length of the translated item may be long enough to wrap. --- web/styles/popovers.css | 7 +++++++ web/templates/topic_sidebar_actions.hbs | 18 +++++++++--------- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/web/styles/popovers.css b/web/styles/popovers.css index eb3cbcd26b..4c5176d875 100644 --- a/web/styles/popovers.css +++ b/web/styles/popovers.css @@ -312,6 +312,13 @@ ul { } &.topics_popover { + min-width: var(--popover-menu-min-width); + width: min-content; + + .topic-menu-item { + white-space: nowrap; + } + .topic-name { text-align: center; margin-top: 5px; diff --git a/web/templates/topic_sidebar_actions.hbs b/web/templates/topic_sidebar_actions.hbs index 1af827545c..9a75641541 100644 --- a/web/templates/topic_sidebar_actions.hbs +++ b/web/templates/topic_sidebar_actions.hbs @@ -1,5 +1,5 @@