From 18cf79bdaccbb84b8ad2d008c042822582b279f0 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 20 Jun 2026 20:23:33 +0800
Subject: [PATCH] refactor(ui): reduce the size of the 'close' and 'copy'
 buttons

- The close button in the TOC popup
- The copy button in the code block
---
 _javascript/modules/components/toc/toc-mobile.js | 1 +
 _layouts/post.html                               | 4 +---
 _sass/base/_syntax.scss                          | 6 ++++--
 _sass/components/_popups.scss                    | 5 +----
 4 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/_javascript/modules/components/toc/toc-mobile.js b/_javascript/modules/components/toc/toc-mobile.js
index 20e24a73c..0df7c80d6 100644
--- a/_javascript/modules/components/toc/toc-mobile.js
+++ b/_javascript/modules/components/toc/toc-mobile.js
@@ -62,6 +62,7 @@ export class TocMobile {
   static showPopup() {
     this.lockScroll(true);
     $popup.showModal();
+    $btnClose.blur();
     const activeItem = $popup.querySelector('li.is-active-li');
     activeItem.scrollIntoView({ block: 'center' });
   }
diff --git a/_layouts/post.html b/_layouts/post.html
index 3f26c724c..9e277f42f 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -113,9 +113,7 @@ script_includes:
     <dialog id="toc-popup" class="p-0">
       <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 mx-1 my-1 opacity-75">
-          <i class="fas fa-close"></i>
-        </button>
+        <button id="toc-popup-close" type="button" class="btn-close btn-sm mx-3" aria-label="Close"></button>
       </div>
       <div id="toc-popup-content" class="px-4 py-3 pb-4"></div>
     </dialog>
diff --git a/_sass/base/_syntax.scss b/_sass/base/_syntax.scss
index b91f2c43d..a7a5cba95 100644
--- a/_sass/base/_syntax.scss
+++ b/_sass/base/_syntax.scss
@@ -219,8 +219,9 @@ div {
     @extend %rounded;
 
     border: 1px solid transparent;
-    height: v.$code-header-height;
-    width: v.$code-header-height;
+    height: 2rem;
+    width: 2rem;
+    margin-right: 0.125rem;
     padding: 0;
     background-color: inherit;
 
@@ -234,6 +235,7 @@ div {
       }
 
       i {
+        font-size: 90%;
         color: var(--clipboard-checked-color);
       }
     }
diff --git a/_sass/components/_popups.scss b/_sass/components/_popups.scss
index 283223acd..2511b4860 100644
--- a/_sass/components/_popups.scss
+++ b/_sass/components/_popups.scss
@@ -93,10 +93,7 @@
   }
 
   button {
-    > i {
-      font-size: 1.25rem;
-      vertical-align: middle;
-    }
+    font-size: 0.75rem;
 
     &:focus-visible {
       box-shadow: none;