From 9bd8148e5b540bb7f0f59701e3986853b01624ab Mon Sep 17 00:00:00 2001
From: Sahaj Jain <sahajjain13@gmail.com>
Date: Thu, 15 May 2025 05:09:42 +0530
Subject: [PATCH] fix: Responsiveness for action-bar

---
 .../action-bar/components/action-bar-buttons.tsx       |  6 ++++--
 .../editor/action-bar/components/code-button.tsx       | 10 +++-------
 .../editor/action-bar/components/save-button.tsx       | 10 +++-------
 .../editor/action-bar/components/undo-redo-buttons.tsx |  2 +-
 4 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/components/editor/action-bar/components/action-bar-buttons.tsx b/components/editor/action-bar/components/action-bar-buttons.tsx
index 7d7db87a..63324a81 100644
--- a/components/editor/action-bar/components/action-bar-buttons.tsx
+++ b/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} />}
diff --git a/components/editor/action-bar/components/code-button.tsx b/components/editor/action-bar/components/code-button.tsx
index 4930c4c3..083e644f 100644
--- a/components/editor/action-bar/components/code-button.tsx
+++ b/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>
diff --git a/components/editor/action-bar/components/save-button.tsx b/components/editor/action-bar/components/save-button.tsx
index d68490f8..dfc50036 100644
--- a/components/editor/action-bar/components/save-button.tsx
+++ b/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>
diff --git a/components/editor/action-bar/components/undo-redo-buttons.tsx b/components/editor/action-bar/components/undo-redo-buttons.tsx
index 89e0fa81..e3a6a35b 100644
--- a/components/editor/action-bar/components/undo-redo-buttons.tsx
+++ b/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}>