refactor: Replace custom size classes with Tailwind CSS 4 standard classes

- Update all custom size classes to use standard Tailwind CSS 4 classes

Author: PresentKim

src/components/ImageViewer.tsx

@@ -629,7 +629,7 @@ export function ImageViewer({
             )}
 
             <div className="absolute bottom-4 left-0 right-0 flex flex-col items-center gap-2 z-50 px-4">
-              <div className="hidden sm:flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm min-h-[1.5rem]">
+              <div className="hidden sm:flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm min-h-6">
                 {imageMetadata ? (
                   <>
                     <span className="opacity-80">
@@ -705,7 +705,7 @@ export function ImageViewer({
                 </Button>
               </div>
               <div className="flex flex-col items-center gap-2 sm:hidden w-full">
-                <div className="flex items-center justify-center gap-2 rounded-md px-3 py-1.5 text-md min-h-[1.75rem] w-full">
+                <div className="flex items-center justify-center gap-2 rounded-md px-3 py-1.5 text-base min-h-7 w-full">
                   {imageMetadata ? (
                     <>
                       <span className="opacity-80">

src/components/SettingButton.tsx

@@ -139,7 +139,7 @@ export function SettingButton() {
                   </a>
                 </Label>
                 {rateLimit.limit ? (
-                  <div className="text-[0.65rem] text-accent">
+                  <div className="text-xs text-accent">
                     rate limit:&nbsp;
                     <span className="font-mono">
                       {rateLimit.remaining || '-'} / {rateLimit.limit || '-'}
@@ -154,7 +154,7 @@ export function SettingButton() {
                 placeholder="github_pat_1234567890"
                 className="h-9 text-xs"
               />
-              <p className="text-[0.7rem] text-muted-foreground">
+              <p className="text-xs text-muted-foreground">
                 Used to increase GitHub API rate limits and access private
                 repositories.
               </p>
@@ -167,7 +167,7 @@ export function SettingButton() {
                 <Label className="text-xs font-medium uppercase tracking-[0.14em] text-foreground">
                   Columns in grid
                 </Label>
-                <span className="text-[0.7rem] text-accent">
+                <span className="text-xs text-accent">
                   {columnCount ? `${columnCount} columns` : 'auto'}
                 </span>
               </div>
@@ -179,7 +179,7 @@ export function SettingButton() {
                 value={[columnCount]}
                 onValueChange={value => setColumnCount(value[0])}
               />
-              <p className="text-[0.7rem] text-muted-foreground">
+              <p className="text-xs text-muted-foreground">
                 Set to <span className="font-mono text-accent">0</span> to
                 automatically fit the screen width.
               </p>
@@ -209,7 +209,7 @@ export function SettingButton() {
                   <span className="text-xs whitespace-nowrap">Dark</span>
                 </Button>
               </div>
-              <p className="text-[0.7rem] text-muted-foreground">
+              <p className="text-xs text-muted-foreground">
                 Choose your preferred color theme.
               </p>
             </div>
@@ -225,7 +225,7 @@ export function SettingButton() {
                   size="sm"
                   className="gap-1.5 justify-start"
                   onClick={() => setGridBackground('auto')}>
-                  <div className="h-4 w-4 rounded border border-border shrink-0 flex items-center justify-center text-[0.65rem] font-semibold">
+                  <div className="h-4 w-4 rounded border border-border shrink-0 flex items-center justify-center text-xs font-semibold">
                     A
                   </div>
                   <span className="text-xs">Auto</span>
@@ -260,7 +260,7 @@ export function SettingButton() {
                   <span className="text-xs">Black</span>
                 </Button>
               </div>
-              <p className="text-[0.7rem] text-muted-foreground">
+              <p className="text-xs text-muted-foreground">
                 Background color for the image grid.
               </p>
             </div>
@@ -278,7 +278,7 @@ export function SettingButton() {
                   onCheckedChange={setPixelated}
                 />
               </div>
-              <p className="text-[0.7rem] text-muted-foreground">
+              <p className="text-xs text-muted-foreground">
                 Render images with crisp pixels, ideal for pixel-art textures.
               </p>
             </div>
@@ -298,14 +298,14 @@ export function SettingButton() {
                   onCheckedChange={setAnimationEnabled}
                 />
               </div>
-              <p className="text-[0.7rem] text-muted-foreground">
+              <p className="text-xs text-muted-foreground">
                 Play Minecraft-style animations for textures that include a
                 corresponding{' '}
                 <span className="font-mono text-accent">.mcmeta</span> file.
               </p>
             </div>
 
-            <p className="pt-1 text-[0.65rem] text-muted-foreground/80">
+            <p className="pt-1 text-xs text-muted-foreground/80">
               Changes are applied per browser and do not affect the underlying
               repositories.
             </p>

src/components/ui/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground aria-invalid:outline-destructive/60 aria-invalid:ring-destructive/20 dark:aria-invalid:outline-destructive dark:aria-invalid:ring-destructive/50 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 aria-invalid:outline-destructive/60 dark:aria-invalid:outline-destructive dark:aria-invalid:ring-destructive/40 aria-invalid:ring-destructive/20 aria-invalid:border-destructive/60 dark:aria-invalid:border-destructive flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-4 focus-visible:outline-1 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:focus-visible:ring-[0.1875rem] aria-invalid:focus-visible:outline-none md:text-sm dark:aria-invalid:focus-visible:ring-4",
+        "border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground aria-invalid:outline-destructive/60 aria-invalid:ring-destructive/20 dark:aria-invalid:outline-destructive dark:aria-invalid:ring-destructive/50 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 aria-invalid:outline-destructive/60 dark:aria-invalid:outline-destructive dark:aria-invalid:ring-destructive/40 aria-invalid:ring-destructive/20 aria-invalid:border-destructive/60 dark:aria-invalid:border-destructive flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-4 focus-visible:outline-1 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:focus-visible:ring-1 aria-invalid:focus-visible:outline-none md:text-sm dark:aria-invalid:focus-visible:ring-4",
         className
       )}
       {...props}

src/components/ui/switch.tsx

@@ -11,7 +11,7 @@ function Switch({
     <SwitchPrimitive.Root
       data-slot="switch"
       className={cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[0.1875rem] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-5 w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}

src/components/ui/tooltip.tsx

@@ -50,7 +50,7 @@ function TooltipContent({
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_0.125rem)] rotate-45 rounded-[0.125rem]" />
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_0.125rem)] rotate-45 rounded-sm" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )

src/pages/Home.tsx

@@ -81,13 +81,13 @@ export default function Home() {
           </div>
           <p className="mt-2 text-xs text-muted-foreground sm:text-sm">
             Example:{' '}
-            <span className="font-mono text-[0.7rem] text-accent sm:text-xs">
+            <span className="font-mono text-xs text-accent">
               https://github.com/owner/repo
             </span>
           </p>
         </div>
 
-        <div className="flex items-center gap-3 text-[0.65rem] uppercase tracking-[0.2em] text-muted-foreground">
+        <div className="flex items-center gap-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
           <div className="h-px flex-1 bg-border/60" />
           <span>OR</span>
           <div className="h-px flex-1 bg-border/60" />
@@ -125,7 +125,7 @@ export default function Home() {
                 role="listitem"
                 variant="outline"
                 size="sm"
-                className="flex h-9 items-center justify-start overflow-hidden text-ellipsis whitespace-nowrap border-border/60 bg-background/40 text-[0.7rem] font-normal text-muted-foreground hover:bg-accent/20 hover:text-foreground sm:text-xs"
+                className="flex h-9 items-center justify-start overflow-hidden text-ellipsis whitespace-nowrap border-border/60 bg-background/40 text-xs font-normal text-muted-foreground hover:bg-accent/20 hover:text-foreground"
                 onClick={() => setTargetRepository(owner, name, ref)}
                 aria-label={`Open example repository ${owner}/${name}`}>
                 <span className="font-mono">

src/pages/RepoView.tsx

@@ -163,7 +163,7 @@ export default function RepoView() {
           <FilterInput />
         </div>
 
-        <div className="mt-1 flex items-center justify-between gap-2 text-[0.7rem] text-muted-foreground sm:order-1 sm:mt-0 sm:flex-1 sm:justify-start sm:text-xs">
+        <div className="mt-1 flex items-center justify-between gap-2 text-xs text-muted-foreground sm:order-1 sm:mt-0 sm:flex-1 sm:justify-start">
           <span className="rounded-full bg-background/70 px-2 py-1">
             Showing{' '}
             <span className="font-semibold text-accent">
@@ -178,7 +178,7 @@ export default function RepoView() {
             onClick={downloadAll}
             size="sm"
             variant="outline"
-            className="text-[0.7rem] font-semibold sm:text-xs">
+            className="text-xs font-semibold">
             {isDownloading ? (
               <>
                 <LoaderIcon className="size-4 animate-spin" />