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

@@ -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) {

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;

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">