style(misc): improve responsive layouts and use semantic colors

Author: yzua

src/components/DatabaseURLLoader.tsx

@@ -163,14 +163,14 @@ function DatabaseURLLoader() {
         <div className="mt-4 space-y-4">
           <p className="text-sm">
             Would you like to try using a CORS proxy?{" "}
-            <span className="font-medium text-yellow-500 dark:text-yellow-400">
+            <span className="text-warning font-medium">
               Note that this will send your database request through a
               third-party service.
             </span>
           </p>
 
           {fetchError && (
-            <div className="bg-destructive/10 dark:bg-destructive/20 rounded-md p-3 text-red-400">
+            <div className="bg-destructive/10 text-destructive rounded-md p-3">
               <p className="text-xs">Error details: {fetchError}</p>
             </div>
           )}

src/components/FileDropHandler.tsx

@@ -12,8 +12,8 @@ function FileDropHandler({ children }: Readonly<FileDropHandlerProps>) {
     <>
       {children}
       {isDragging && (
-        <section className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm transition-all">
-          <div className="border-primary/60 bg-background/95 animate-in fade-in zoom-in-95 flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-8 shadow-lg transition-transform duration-200">
+        <section className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm transition-opacity">
+          <div className="border-primary/60 bg-background/95 animate-in fade-in zoom-in-95 flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-8 shadow-lg transition-opacity duration-200">
             <div className="bg-primary/10 mb-6 flex items-center justify-center rounded-full p-5">
               <DatabaseIcon className="text-primary h-12 w-12" />
             </div>

src/components/TopBar.tsx

@@ -9,9 +9,9 @@ function TopBar() {
   const { handleFileChange, handleDownload } = useDatabaseWorker();
 
   return (
-    <header className="flex items-center justify-between gap-2 border-b px-1 py-1.5">
+    <header className="flex flex-wrap items-center justify-between gap-2 border-b px-1 py-1.5 sm:flex-nowrap">
       <section
-        className="flex items-center gap-1"
+        className="flex min-w-0 flex-1 flex-wrap items-center gap-1"
         aria-label="Database file operations"
       >
         <label
@@ -32,7 +32,7 @@ function TopBar() {
           <Button
             size="sm"
             variant="outline"
-            className="border-foreground/25 pointer-events-none h-8 cursor-pointer px-3 text-xs font-medium sm:w-[200px]"
+            className="border-foreground/25 pointer-events-none w-full cursor-pointer text-xs font-medium sm:w-[200px]"
             aria-hidden="true"
             tabIndex={-1}
           >
@@ -43,7 +43,7 @@ function TopBar() {
         <Button
           size="sm"
           variant="outline"
-          className="border-foreground/25 h-8 px-3 text-xs font-medium"
+          className="border-foreground/25 text-xs font-medium"
           onClick={handleDownload}
           aria-label="Save current database to file"
         >
@@ -53,26 +53,24 @@ function TopBar() {
       </section>
 
       <section
-        className="flex items-center gap-1"
+        className="ml-auto flex items-center gap-1"
         aria-label="Application settings and links"
       >
-        <a
-          href="https://github.com/yzua/sqlite-online"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="focus:ring-ring rounded-md transition-opacity hover:opacity-80 focus:ring-2 focus:ring-offset-2 focus:outline-none"
-          aria-label="View source code on GitHub (opens in new tab)"
+        <Button
+          asChild
+          size="icon"
+          variant="ghost"
+          className="hidden sm:inline-flex"
         >
-          <Button
-            size="icon"
-            variant="ghost"
-            className="hidden h-8 w-8 sm:flex"
-            tabIndex={-1}
-            aria-hidden="true"
+          <a
+            href="https://github.com/yzua/sqlite-online"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="View source code on GitHub (opens in new tab)"
           >
             <GitForkIcon className="h-4 w-4" />
-          </Button>
-        </a>
+          </a>
+        </Button>
 
         <HighContrastToggle />
         <ModeToggle />

src/components/accessibility/HighContrastToggle.tsx

@@ -25,7 +25,6 @@ function HighContrastToggle() {
     <Button
       size="icon"
       variant="ghost"
-      className="h-8 w-8"
       onClick={toggleHighContrast}
       aria-label={`${isHighContrast ? "Disable" : "Enable"} high contrast mode`}
       aria-pressed={isHighContrast}

src/components/accessibility/SkipLinks.tsx

@@ -14,7 +14,7 @@ function SkipLink({ href, children, className }: SkipLinkProps) {
         "sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50",
         "bg-primary text-primary-foreground rounded-md px-4 py-2 font-medium",
         "focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-none",
-        "transition-all duration-200",
+        "transition-[color,box-shadow] duration-200",
         className
       )}
     >