chore: improve popup width

cotes2020 · Oct 11, 2024 · ed2842c · ed2842c
1 parent 9b33292
commit ed2842c
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -111,8 +111,8 @@ <h1 data-toc-skip>{{ page.title }}</h1>
     </button>
 
     <dialog id="toc-popup" class="p-0">
-      <div class="header d-flex flex-row align-items-center justify-content-between ps-4">
-        <div class="label text-truncate py-2">{{- page.title -}}</div>
+      <div class="header d-flex flex-row align-items-center justify-content-between">
+        <div class="label text-truncate py-2 ms-4">{{- page.title -}}</div>
         <button id="toc-popup-close" type="button" class="btn btn-link">
           <i class="fas fa-close fa-fw"></i>
         </button>

diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
@@ -389,6 +389,10 @@ header {
   min-width: 20rem;
   font-size: 1.05rem;
 
+  @media all and (min-width: 576px) {
+    max-width: 32rem;
+  }
+
   &[open] {
     -webkit-animation: $slide-in;
     animation: $slide-in;
@@ -414,7 +418,6 @@ header {
 
     .label {
       font-family: $font-family-heading;
-      max-width: 25rem;
     }
   }
 
@@ -469,6 +472,7 @@ header {
   #toc-popup-content {
     overflow: auto;
     max-height: calc(100vh - 4 * $topbar-height);
+    font-family: $font-family-heading;
   }
 }