From fb5737cf1514b9bd3fd3d94af914b28288894bc3 Mon Sep 17 00:00:00 2001
From: johndoe6345789 <john.doe6345789@gmail.com>
Date: Fri, 16 Jan 2026 03:44:17 +0000
Subject: [PATCH] Generated by Spark: Save and load project need to be
 responsive or just plain icons

---
 src/components/ProjectManager.tsx | 50 +++++++++++++++++++++++--------
 1 file changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/components/ProjectManager.tsx b/src/components/ProjectManager.tsx
index d47a992..7788861 100644
--- a/src/components/ProjectManager.tsx
+++ b/src/components/ProjectManager.tsx
@@ -182,22 +182,46 @@ export function ProjectManager({ currentProject, onProjectLoad }: ProjectManager
 
   return (
     <>
-      <div className="flex gap-2">
-        <Button onClick={() => setSaveDialogOpen(true)} variant="outline">
-          <FloppyDisk size={16} className="mr-2" />
-          Save Project
+      <div className="flex gap-1 sm:gap-2">
+        <Button 
+          onClick={() => setSaveDialogOpen(true)} 
+          variant="outline"
+          size="icon"
+          className="sm:w-auto sm:px-4"
+          title="Save Project"
+        >
+          <FloppyDisk size={18} className="sm:mr-2" />
+          <span className="hidden sm:inline">Save Project</span>
         </Button>
-        <Button onClick={() => setLoadDialogOpen(true)} variant="outline">
-          <FolderOpen size={16} className="mr-2" />
-          Load Project
+        <Button 
+          onClick={() => setLoadDialogOpen(true)} 
+          variant="outline"
+          size="icon"
+          className="sm:w-auto sm:px-4"
+          title="Load Project"
+        >
+          <FolderOpen size={18} className="sm:mr-2" />
+          <span className="hidden sm:inline">Load Project</span>
         </Button>
-        <Button onClick={() => setNewProjectDialogOpen(true)} variant="outline">
-          <FolderPlus size={16} className="mr-2" />
-          New Project
+        <Button 
+          onClick={() => setNewProjectDialogOpen(true)} 
+          variant="outline"
+          size="icon"
+          className="sm:w-auto sm:px-4 hidden md:flex"
+          title="New Project"
+        >
+          <FolderPlus size={18} className="sm:mr-2" />
+          <span className="hidden sm:inline">New Project</span>
         </Button>
-        <Button onClick={() => setImportDialogOpen(true)} variant="outline">
-          <UploadSimple size={16} className="mr-2" />
-          Import
+        <Button 
+          onClick={() => setImportDialogOpen(true)} 
+          variant="outline"
+          size="icon"
+          className="sm:w-auto sm:px-4 hidden md:flex"
+          title="Import"
+        >
+          <UploadSimple size={18} className="sm:mr-2" />
+          <span className="hidden sm:inline">Import</span>
         </Button>
       </div>