Fixed footer direction label being cut off

material/base.html

@@ -40,7 +40,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.666dee5c.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.7a7fce14.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.a0c5b2b5.min.css' | url }}">

material/partials/footer.html

@@ -15,10 +15,10 @@
               {% include ".icons/material/arrow-left.svg" %}
             </div>
             <div class="md-footer__title">
+              <span class="md-footer__direction">
+                {{ direction }}
+              </span>
               <div class="md-ellipsis">
-                <span class="md-footer__direction">
-                  {{ direction }}
-                </span>
                 {{ page.previous_page.title }}
               </div>
             </div>
@@ -28,10 +28,10 @@
           {% set direction = lang.t("footer.next") %}
           <a href="{{ page.next_page.url | url }}" class="md-footer__link md-footer__link--next" aria-label="{{ direction }}: {{ page.next_page.title | e }}" rel="next">
             <div class="md-footer__title">
+              <span class="md-footer__direction">
+                {{ direction }}
+              </span>
               <div class="md-ellipsis">
-                <span class="md-footer__direction">
-                  {{ direction }}
-                </span>
                 {{ page.next_page.title }}
               </div>
             </div>

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

@@ -54,8 +54,9 @@
     // a tiny factor seems to get rid of the ellipsis and renders the text as
     // it should - see https://bit.ly/2ZUCXQ8
     flex-grow: 0.01;
-    padding-top: px2rem(28px);
+    align-items: end;
-    padding-bottom: px2rem(8px);
+    max-width: 100%;
+    margin-block: px2rem(20px) px2rem(8px);
     overflow: hidden;
     outline-color: var(--md-accent-fg-color);
     transition: opacity 250ms;
@@ -70,14 +71,15 @@
       transform: scaleX(-1);
     }
 
-    // Footer link to previous page
+    // [mobile -]: Adjust width to 25/75 and hide title
-    &--prev {
+    @include break-to-device(mobile) {
 
-      // [mobile -]: Adjust width to 25/75 and hide title
+      // Footer link to previous page
-      @include break-to-device(mobile) {
+      &--prev {
+        flex-shrink: 0;
 
         // Hide footer title
-        .md-footer__title {
+         .md-footer__title {
           display: none;
         }
       }
@@ -97,12 +99,11 @@
 
   // Footer title
   &__title {
-    position: relative;
     flex-grow: 1;
     max-width: calc(100% - #{px2rem(48px)});
     padding: 0 px2rem(20px);
+    margin-bottom: px2rem(14px);
     font-size: px2rem(18px);
-    line-height: px2rem(48px);
     white-space: nowrap;
   }
 
@@ -114,10 +115,6 @@
 
   // Footer link direction (i.e. prev and next)
   &__direction {
-    position: absolute;
-    inset-inline: 0;
-    padding: 0 px2rem(20px);
-    margin-top: px2rem(-20px);
     font-size: px2rem(12.8px);
     opacity: 0.7;
   }

src/partials/footer.html

@@ -48,10 +48,10 @@
               {% include ".icons/material/arrow-left.svg" %}
             </div>
             <div class="md-footer__title">
+              <span class="md-footer__direction">
+                {{ direction }}
+              </span>
               <div class="md-ellipsis">
-                <span class="md-footer__direction">
-                  {{ direction }}
-                </span>
                 {{ page.previous_page.title }}
               </div>
             </div>
@@ -68,10 +68,10 @@
             rel="next"
           >
             <div class="md-footer__title">
+              <span class="md-footer__direction">
+                {{ direction }}
+              </span>
               <div class="md-ellipsis">
-                <span class="md-footer__direction">
-                  {{ direction }}
-                </span>
                 {{ page.next_page.title }}
               </div>
             </div>