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

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

[Luis Felipe via Guix-patches via]

[-- Attachment #1: Type: text/plain, Size: 473 bytes --]

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/

[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #2: 0001-website-header-Make-dropdowns-width-vary-according-t.patch --]
[-- Type: text/x-patch; name=0001-website-header-Make-dropdowns-width-vary-according-t.patch, Size: 1979 bytes --]

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

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

[Mathieu Othacehe]

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