fix: Responsiveness for action-bar

components/editor/action-bar/components/action-bar-buttons.tsx

@@ -43,8 +43,10 @@ export function ActionBarButtons({
       <Separator orientation="vertical" className="mx-1 h-8" />
       <UndoRedoButtons />
       <Separator orientation="vertical" className="mx-1 h-8" />
-      <ResetButton onReset={resetToCurrentPreset} isDisabled={!hasUnsavedChanges()} />
-      <ImportButton onImportClick={onImportClick} />
+      <div className="hidden items-center gap-1 md:flex">
+        <ResetButton onReset={resetToCurrentPreset} isDisabled={!hasUnsavedChanges()} />
+        <ImportButton onImportClick={onImportClick} />
+      </div>
       <AIGenerateButton onClick={onAiGenerateClick} />
       <Separator orientation="vertical" className="mx-1 h-8" />
       {isSavedPreset && <EditButton themeId={themeState.preset as string} />}

components/editor/action-bar/components/code-button.tsx

@@ -1,10 +1,6 @@
 import { Braces } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 
 interface CodeButtonProps {
   onCodeClick: () => void;
@@ -17,11 +13,11 @@ export function CodeButton({ onCodeClick }: CodeButtonProps) {
         <Button
           variant="ghost"
           size="sm"
-          className="h-8 px-2 gap-1.5 text-muted-foreground hover:text-foreground hover:bg-accent/50"
+          className="text-muted-foreground hover:text-foreground hover:bg-accent/50 h-8 gap-1.5 px-2"
           onClick={onCodeClick}
         >
           <Braces className="size-3.5" />
-          <span className="text-sm">Code</span>
+          <span className="hidden text-sm md:block">Code</span>
         </Button>
       </TooltipTrigger>
       <TooltipContent>View theme code</TooltipContent>

components/editor/action-bar/components/save-button.tsx

@@ -1,10 +1,6 @@
 import { Heart, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 
 interface SaveButtonProps {
   onSaveClick: () => void;
@@ -18,7 +14,7 @@ export function SaveButton({ onSaveClick, isSaving }: SaveButtonProps) {
         <Button
           variant="ghost"
           size="sm"
-          className="h-8 px-2 gap-1.5 text-muted-foreground hover:text-foreground hover:bg-accent/50"
+          className="text-muted-foreground hover:text-foreground hover:bg-accent/50 h-8 gap-1.5 px-2"
           onClick={onSaveClick}
           disabled={isSaving}
         >
@@ -27,7 +23,7 @@ export function SaveButton({ onSaveClick, isSaving }: SaveButtonProps) {
           ) : (
             <Heart className="size-3.5" />
           )}
-          <span className="text-sm">Save</span>
+          <span className="hidden text-sm md:block">Save</span>
         </Button>
       </TooltipTrigger>
       <TooltipContent>Save theme</TooltipContent>

components/editor/action-bar/components/undo-redo-buttons.tsx

@@ -8,7 +8,7 @@ export function UndoRedoButtons() {
 
   return (
     <TooltipProvider>
-      <div className="flex items-center">
+      <div className="flex items-center gap-1">
         <Tooltip>
           <TooltipTrigger asChild>
             <Button variant="ghost" size="icon" onClick={handleUndo} disabled={!canUndo}>