diff mbox series

[bug#47607] website: header: Make dropdowns width vary according to their content

Message ID 7E1A7pSfcK3gosLv0UQFNgWBopjNasBOopI0MdFD2tn2wxReZfapNjwsjRS44RJxdmiKnj3xakUKKTmfLKtOHOtJWZNlo3Hum8dA_jVk_ws=@protonmail.com
State Accepted
Headers show
Series [bug#47607] website: header: Make dropdowns width vary according to their content | expand

Checks

Context Check Description
cbaines/applying patch fail View Laminar job
cbaines/issue success View issue

Commit Message

Luis Felipe April 5, 2021, 10:31 p.m. UTC 
Hi,

Currently, a menu item that is longer than its container box is broken into lines and looks as separate items. For example:

https://luis-felipe.gitlab.io/media/2021/04/gnu-guix-website-dropdown-menu-odd-wrapping-2021-04-05.png

This change makes submenus as wide as their widest item:

https://luis-felipe.gitlab.io/media/2021/04/gnu-guix-website-dropdown-menu-fixed-wrapping-2021-04-05.png


---
Luis Felipe López Acevedo
https://luis-felipe.gitlab.io/

Comments

Mathieu Othacehe April 6, 2021, 7:10 a.m. UTC | #1 
Hello Luis,

> Currently, a menu item that is longer than its container box is broken into lines and looks as separate items. For example:

I noticed it several times, without doing anything. Pushed as
306049a93c3ede1808d02144977b932d34c59b75.

Thanks for fixing it,

Mathieu
diff mbox series

Patch

From 6195940fcf3cc532ab1d03f42b77a3b4c995f6b8 Mon Sep 17 00:00:00 2001
From: Luis Felipe <luis.felipe.la@protonmail.com>
Date: Mon, 5 Apr 2021 16:29:39 -0500
Subject: [PATCH] website: header: Make dropdowns width vary according to their
 content.

This change avoids breaking menu items in separate lines when they are
longer than their container box. When they are wrapped, they become
hard to read because they look like two separate items.

The "Medios" menu in the Spanish version of the website, equivalent to
the "Media" menu in the English version, illustrates this odd behavior.
It looks as if there were four menu items, when there's actually two.

* website/static/base/css/navbar.css (.dropdown:hover .submenu)
  (.submenu:focus-within): Make submenus adapt to their widest item.
  (.hline): Limit its width so that submenus are not as wide as the
  original separator image.
---
 website/static/base/css/navbar.css | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/website/static/base/css/navbar.css b/website/static/base/css/navbar.css
index 2274aa1..974516a 100644
--- a/website/static/base/css/navbar.css
+++ b/website/static/base/css/navbar.css
@@ -163,8 +163,7 @@  label.menu-item {
 
     .dropdown:hover .submenu {
         min-width: 150px;
-        /* reset to initial values: */
-        width: auto;
+        width: max-content;
         height: auto;
         overflow: visible;
     }
@@ -174,8 +173,7 @@  label.menu-item {
        the browser does not support :focus-within. */
     .submenu:focus-within {
         min-width: 150px;
-        /* reset to initial values: */
-        width: auto;
+        width: max-content;
         height: auto;
         overflow: visible;
     }
@@ -205,7 +203,8 @@  label.menu-item {
 
     .hline {
         display: block;
-        width: 100%;
+        margin: auto;
+        width: 150px;
         height: 1px;
     }
 

base-commit: 1f7cd6c323c928d6e852acf5d8c746fa0fba010a
-- 
2.31.0