From 045ac648d7ba491232192dbcbf2dc5562a1c8673 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 28 Jan 2023 02:10:32 +0100
Subject: [PATCH] Fix menu on "wide" small screens

The menu didn't look properly on these screens since commit dcec003d0.

On small screens with enough horizontal space to show the menu button,
the logo, and the contents of the menu, all three elements were shown on
the same row, which looked broken.

Now the contents of the menu are shown below the menu button.

Note that, to force this, we're making the contents of the menu 100%
wide. That means links would take the 100% of the space, which would
make it easy to click on a link while trying to scroll when using
touchscreens. So we're making the links as wide as their text, which
also has a disadvantage: it's harder to click on narrow links like
"SDG".
---
 app/assets/stylesheets/layout.scss               | 8 ++++++++
 app/assets/stylesheets/layout/subnavigation.scss | 2 --
 app/views/layouts/_header.html.erb               | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 2b040e4f5..f984b2626 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -574,6 +574,14 @@ body > header,
   @include breakpoint(small only) {
     flex-wrap: wrap;
     justify-content: space-between;
+
+    .responsive-menu {
+      width: 100%;
+
+      a {
+        display: inline-block;
+      }
+    }
   }
 
   @include breakpoint(medium) {
diff --git a/app/assets/stylesheets/layout/subnavigation.scss b/app/assets/stylesheets/layout/subnavigation.scss
index 217bb2632..e67a3b5a5 100644
--- a/app/assets/stylesheets/layout/subnavigation.scss
+++ b/app/assets/stylesheets/layout/subnavigation.scss
@@ -31,12 +31,10 @@
     padding-top: $line-height / 2;
     position: relative;
     text-align: left;
-    width: 100%;
 
     @include breakpoint(medium) {
       display: block;
       font-weight: bold;
-      width: auto;
 
       &:hover {
         @include anchor-color;
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index c07948801..1eec0d01d 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -24,7 +24,7 @@
       <% end %>
     </h1>
 
-    <div id="responsive-menu">
+    <div id="responsive-menu" class="responsive-menu">
       <%= render Layout::AccountMenuComponent.new(current_user) %>
 
       <div class="show-for-small-only">