From cc00c3ec93d134c1772577cccb355fd69c9b0f43 Mon Sep 17 00:00:00 2001
From: Jimmy Ben Klieve <j.b.klieve@live.cn>
Date: Fri, 21 Nov 2025 09:58:55 +0800
Subject: [PATCH] <Input> component horizontal padding adjustment (#11418)

### What problem does this PR solve?

- Adjust <Input> component a suitable horizontal padding when have
prefix or suffix icon
- Slightly change visual effect of <ThemeSwitch> in admin UI

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
---
 web/src/components/ui/input.tsx                 |  6 +++---
 web/src/pages/admin/components/theme-switch.tsx | 13 ++++---------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/web/src/components/ui/input.tsx b/web/src/components/ui/input.tsx
index 20fe40460..7eb1c0fe4 100644
--- a/web/src/components/ui/input.tsx
+++ b/web/src/components/ui/input.tsx
@@ -45,9 +45,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-primary',
           'disabled:cursor-not-allowed disabled:opacity-50 transition-colors',
           {
-            'pl-12': !!prefix,
-            'pr-12': !!suffix || isPasswordInput,
-            'pr-24': !!suffix && isPasswordInput,
+            'pl-[calc(1em+1.25rem)]': !!prefix,
+            'pr-[calc(1em+1.25rem)]': !!suffix || isPasswordInput,
+            'pr-[calc(2em+2rem)]': !!suffix && isPasswordInput,
           },
           type === 'number' &&
             '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
diff --git a/web/src/pages/admin/components/theme-switch.tsx b/web/src/pages/admin/components/theme-switch.tsx
index bfcfb3212..1f4dde3e9 100644
--- a/web/src/pages/admin/components/theme-switch.tsx
+++ b/web/src/pages/admin/components/theme-switch.tsx
@@ -25,8 +25,8 @@ const ThemeSwitch = forwardRef<
         setTheme(value ? ThemeEnum.Dark : ThemeEnum.Light)
       }
     >
-      <div className="self-center p-3 py-2 rounded-full bg-bg-card transition-[background-color] duration-300">
-        <div className="h-full flex items-center justify-between gap-4 relative z-[1] text-text-disabled transition-[text-color] duration-300 delay-75">
+      <div className="self-center p-3 py-2 rounded-full bg-bg-card transition-[background-color]">
+        <div className="h-full flex items-center justify-between gap-4 relative z-[1] text-text-disabled transition-[text-color]">
           <LucideSun
             className={cn('size-[1em]', !isDark && 'text-text-primary')}
           />
@@ -39,7 +39,7 @@ const ThemeSwitch = forwardRef<
       <Thumb
         className={cn(
           'absolute top-0 left-0 w-[calc(50%+.25rem)] p-0.5 h-full rounded-full overflow-hidden',
-          'transition-all ease-out duration-300',
+          'transition-all ease-out',
           'group-hover/theme-switch:w-[calc(50%+.66rem)] group-focus-visible/theme-switch:w-[calc(50%+.66rem)]',
           {
             'left-[calc(50%-.25rem)] group-hover/theme-switch:left-[calc(50%-.66rem)] group-focus-visible/theme-switch:left-[calc(50%-.66rem)]':
@@ -47,12 +47,7 @@ const ThemeSwitch = forwardRef<
           },
         )}
       >
-        <div
-          className="
-            size-full rounded-full bg-bg-base shadow-md
-            transition-colors ease-out duration-300 delay-75
-          "
-        />
+        <div className="size-full rounded-full bg-bg-base shadow-md transition-colors ease-out" />
       </Thumb>
     </Root>
   );