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

@@ -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' });
   }

_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>

_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);
       }
     }

_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;