Menu options break on mobile screens

[ereslibre]

Given a menu of options, on the config.toml configuration, like:

[menu]

  [[menu.main]]
    identifier = "hub"
    name = "Policy Hub"
    url = "https://hub.kubewarden.io/"
    weight = -130

  [[menu.main]]
    identifier = "charts"
    name = "Helm Charts"
    url = "https://charts.kubewarden.io/"
    weight = -120

  [[menu.main]]
    identifier = "docs"
    name = "Docs"
    url = "https://docs.kubewarden.io/"
    weight = -110

On a regular screen, the contents look fine:

However, on a smaller screen, we see that the menu items: Policy Hub and Helm Charts seem to overflow on top of themselves:

On very small displays (on the sample, iPhone 5), the main content is also not filling the whole content viewport:

The way we have fixed the top menu mobile appearance, at least until we have a good solution is by using this patch in our website:

commit 5197242aeef1641be9ec5f80045ae672a0ba4e28
Author: Rafael Fernández López <ereslibre@ereslibre.es>
Date:   Wed Apr 21 10:45:29 2021 +0200

    Make menu look fine on narrow displays

diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 46a1cfe..b955448 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -7,6 +7,20 @@
     --light           : #F3F3F3;
   }

+  .sub-header {
+    white-space: nowrap;
+    flex-flow: wrap;
+  }
+
+  .sub-header ul {
+    display: flex;
+    flex-flow: wrap;
+  }
+
+  .sub-header ul li {
+    display: block;
+  }
+
   .navbar-brand {
     flex: 1;
   }

This solution is very probably suboptimal, given we are not designers, but it does the job until we have a proper fix.

Thank you.

[ereslibre]

The website project lives at https://github.com/kubewarden/kubewarden.io

[kkaempf]

ping @lvuch - this is affecting all project sites.