From ed2842c5d1ab4a7e33a1911f5ec7751fcf9ec308 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Fri, 11 Oct 2024 21:39:11 +0800
Subject: [PATCH] chore: improve popup width

---
 _layouts/post.html     | 4 ++--
 _sass/layout/post.scss | 6 +++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/_layouts/post.html b/_layouts/post.html
index c34ba68815f..bcc133f8559 100644
--- 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
index 37bc2274f61..bb39fbe5134 100644
--- 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;
   }
 }