Fixed overflowing navigation tabs not being scrollable

material/.overrides/main.html

@@ -16,5 +16,5 @@
 {% endblock %}
 {% block scripts %}
   {{ super() }}
-  <script src="{{ 'assets/javascripts/custom.794c1817.min.js' | url }}"></script>
+  <script src="{{ 'assets/javascripts/custom.019e56df.min.js' | url }}"></script>
 {% endblock %}

material/base.html

@@ -40,7 +40,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.91872f81.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.f79797b0.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.2505c338.min.css' | url }}">
@@ -246,7 +246,7 @@
       {% endfor %}
     {% endblock %}
     {% if page.meta and page.meta.ᴴₒᴴₒᴴₒ %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/extra.e437594a.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/extra.a2da3c40.min.css' | url }}">
       <script src="{{ 'assets/javascripts/extra/bundle.cfb3feee.min.js' | url }}" defer></script>
     {% endif %}
   </body>

src/assets/stylesheets/main/components/_tabs.scss

@@ -56,9 +56,20 @@
     margin: 0;
     margin-inline-start: px2rem(4px);
     padding: 0;
+    overflow: auto;
     white-space: nowrap;
     list-style: none;
     contain: content;
+    // Hack: don't show scrollbar when tabs overflow, which they should onyl do
+    // in rate occasions, as adding too many top level sections is discouraged,
+    // since hiding content on horitontal axis doesn't lead to a good user
+    // experience. It's just harder to discover.
+    scrollbar-width: none;
+
+    // Hack: see above
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   // Navigation tabs item