Fixed overflow for alternate style when more than 10 tabs are present

Author: squidfunk

material/assets/javascripts/bundle.526051bc.min.js renamed to material/assets/javascripts/bundle.f89c2efe.min.js

@@ -39,7 +39,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.c856cb08.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.c46c0193.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.3f5d1f46.min.css' | url }}">
@@ -225,7 +225,7 @@ <h1>{{ page.title | d(config.site_name, true)}}</h1>
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.526051bc.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.f89c2efe.min.js' | url }}"></script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

material/assets/javascripts/bundle.526051bc.min.js.map renamed to material/assets/javascripts/bundle.f89c2efe.min.js.map

@@ -80,7 +80,7 @@ export function mountContentTabs(
     // TODO: Hack, scrollIntoView is too buggy
     const container = active.parentElement!
     if (
-      active.offsetLeft + active.offsetWidth > container.offsetWidth ||
+      active.offsetLeft + active.offsetWidth > container.scrollLeft + container.offsetWidth ||
       active.offsetLeft                      < container.scrollLeft
     )
       container.scrollTo({

material/assets/stylesheets/main.c856cb08.min.css renamed to material/assets/stylesheets/main.c46c0193.min.css

@@ -156,7 +156,7 @@
   // Tabbed labels
   .tabbed-labels {
     display: flex;
-    max-width: 100vw;
+    max-width: 100%;
     overflow: auto;
     box-shadow: 0 px2rem(-1px) var(--md-default-fg-color--lightest) inset;
     scroll-snap-type: x proximity;
@@ -196,7 +196,7 @@
       @media print {
 
         // Ensure correct order of labels
-        @for $i from 1 through 10 {
+        @for $i from 1 through 20 {
           &:nth-child(#{$i}) {
             order: $i;
           }
@@ -215,6 +215,7 @@
 
     // Top-level tabbed labels
     > .tabbed-alternate .tabbed-labels {
+      max-width: 100vw;
       margin: 0 px2rem(-16px);
       padding: 0 px2rem(16px);
       scroll-padding: 0 px2rem(16px);
@@ -247,7 +248,7 @@
         display: block;
 
         // Ensure correct order of containers
-        @for $i from 1 through 10 {
+        @for $i from 1 through 20 {
           &:nth-child(#{$i}) {
             order: $i;
           }
@@ -275,7 +276,7 @@
     }
 
     // Tab label states
-    @for $i from 10 through 1 {
+    @for $i from 20 through 1 {
       input:nth-child(#{$i}) {
 
         // Tab is active