From 4bf4c2359197151e1e42ee47204ee5365dd06b88 Mon Sep 17 00:00:00 2001
From: Wendy Yuchen Sun <wendyyuchensun@gmail.com>
Date: Tue, 28 Jul 2026 13:36:57 +0800
Subject: [PATCH] refactor: use tailwind spacing scale utilities instead of
 arbitrary px values

---
 src/components/core/toast/toast.js     |  2 +-
 src/components/core/tooltip.js         |  8 ++++----
 src/components/header/index.js         | 10 +++-------
 src/components/header/language-menu.js |  2 +-
 src/components/header/menu.js          |  2 +-
 src/pages/home/home.js                 |  2 +-
 6 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/components/core/toast/toast.js b/src/components/core/toast/toast.js
index c515d72..caf4a75 100644
--- a/src/components/core/toast/toast.js
+++ b/src/components/core/toast/toast.js
@@ -100,7 +100,7 @@ const Toast = ({ toast, onRemove, onRemoveStart }) => {
         key={id}
         role="status"
         aria-live="polite"
-        className={`min-h-8 w-80 pl-4 pr-2 py-[6px] flex items-center gap-1 text-sm mb-2 rounded-lg ${toastTypeClasses[type]}`}
+        className={`min-h-8 w-80 pl-4 pr-2 py-1.5 flex items-center gap-1 text-sm mb-2 rounded-lg ${toastTypeClasses[type]}`}
         onMouseEnter={handlePause}
         onMouseLeave={handleResume}
       >
diff --git a/src/components/core/tooltip.js b/src/components/core/tooltip.js
index 3a004b4..0adf6a3 100644
--- a/src/components/core/tooltip.js
+++ b/src/components/core/tooltip.js
@@ -90,12 +90,12 @@ const Tooltip = ({ children, label, position = 'top' }) => {
   });
 
   const arrowClass = {
-    top: 'absolute left-1/2 -translate-x-1/2 -bottom-[14px] border-[7px] border-transparent border-t-[#1A1A1A99]',
+    top: 'absolute left-1/2 -translate-x-1/2 -bottom-3.5 border-[7px] border-transparent border-t-[#1A1A1A99]',
     bottom:
-      'absolute left-1/2 -translate-x-1/2 -top-[14px] border-[7px] border-transparent border-b-[#1A1A1A99]',
-    left: 'absolute top-1/2 -translate-y-1/2 -right-[14px] border-[7px] border-transparent border-l-[#1A1A1A99]',
+      'absolute left-1/2 -translate-x-1/2 -top-3.5 border-[7px] border-transparent border-b-[#1A1A1A99]',
+    left: 'absolute top-1/2 -translate-y-1/2 -right-3.5 border-[7px] border-transparent border-l-[#1A1A1A99]',
     right:
-      'absolute top-1/2 -translate-y-1/2 -left-[14px] border-[7px] border-transparent border-r-[#1A1A1A99]',
+      'absolute top-1/2 -translate-y-1/2 -left-3.5 border-[7px] border-transparent border-r-[#1A1A1A99]',
   };
 
   return (
diff --git a/src/components/header/index.js b/src/components/header/index.js
index b76cb01..86b4be8 100644
--- a/src/components/header/index.js
+++ b/src/components/header/index.js
@@ -31,7 +31,7 @@ const Header = ({ onImportClick, onExportClick, title, onTitleChange }) => {
       <div className="flex items-center gap-3">
         <Button
           variant="tertiary"
-          className="min-w-[64px] lg:min-w-[88px] flex items-center gap-1"
+          className="min-w-16 lg:min-w-[88px] flex items-center gap-1"
           onClick={() => setShowTipModal(true)}
         >
           <IconBulb size={16} aria-hidden="true" />
@@ -39,14 +39,10 @@ const Header = ({ onImportClick, onExportClick, title, onTitleChange }) => {
         </Button>
         <Menu />
         <LanguageMenu />
-        <Button
-          variant="secondary"
-          className="min-w-[64px] lg:min-w-[88px]"
-          onClick={onImportClick}
-        >
+        <Button variant="secondary" className="min-w-16 lg:min-w-[88px]" onClick={onImportClick}>
           {t('import')}
         </Button>
-        <Button variant="primary" className="min-w-[64px] lg:min-w-[88px]" onClick={onExportClick}>
+        <Button variant="primary" className="min-w-16 lg:min-w-[88px]" onClick={onExportClick}>
           {t('export')}
         </Button>
       </div>
diff --git a/src/components/header/language-menu.js b/src/components/header/language-menu.js
index 2d547bc..5e29a95 100644
--- a/src/components/header/language-menu.js
+++ b/src/components/header/language-menu.js
@@ -27,7 +27,7 @@ const LanguageMenu = () => {
       triggerButton={
         <Button
           variant="tertiary"
-          className="min-w-[64px] lg:min-w-[88px]"
+          className="min-w-16 lg:min-w-[88px]"
           aria-label={t('changeLocale')}
         >
           <IconLanguage size={16} className="flex-none mr-1" aria-hidden="true" />
diff --git a/src/components/header/menu.js b/src/components/header/menu.js
index 94b8c3a..d463a1f 100644
--- a/src/components/header/menu.js
+++ b/src/components/header/menu.js
@@ -64,7 +64,7 @@ const NativeMenu = () => {
   return (
     <DropdownMenu
       triggerButton={
-        <Button variant="tertiary" className="min-w-[64px] lg:min-w-[88px]" aria-label={t('more')}>
+        <Button variant="tertiary" className="min-w-16 lg:min-w-[88px]" aria-label={t('more')}>
           <IconDots size={16} className="flex-none mr-1" aria-hidden="true" />
           <span>{t('more')}</span>
         </Button>
diff --git a/src/pages/home/home.js b/src/pages/home/home.js
index 5f25e52..cab0201 100644
--- a/src/pages/home/home.js
+++ b/src/pages/home/home.js
@@ -340,7 +340,7 @@ export default function Home() {
                   items={latexDelimiterOptions}
                   value={displayConfig.latexDelimiter}
                   onChange={(option) => setDisplayConfig({ latexDelimiter: option })}
-                  buttonClassName="w-[64px] h-7"
+                  buttonClassName="w-16 h-7"
                 />
               </div>
               <Button variant="secondary" onClick={insertMark}>