UI Fixes: Button Styling and Tab Navigation Improvements

src/app/_components/InstalledScriptsTab.tsx

@@ -816,9 +816,9 @@ export function InstalledScriptsTab() {
                           )
                         )}
                       </td>
-                      <td className="px-6 py-4 whitespace-nowrap">
+                      <td className="px-6 py-4 whitespace-nowrap text-left">
                         <span 
-                          className="text-sm px-3 py-1 rounded"
+                          className="text-sm px-3 py-1 rounded inline-block"
                           style={{
                             backgroundColor: script.server_color ?? 'transparent',
                             color: script.server_color ? getContrastColor(script.server_color) : 'inherit'
@@ -842,14 +842,14 @@ export function InstalledScriptsTab() {
                               <Button
                                 onClick={handleSaveEdit}
                                 disabled={updateScriptMutation.isPending}
-                                variant="default"
+                                variant="save"
                                 size="sm"
                               >
                                 {updateScriptMutation.isPending ? 'Saving...' : 'Save'}
                               </Button>
                               <Button
                                 onClick={handleCancelEdit}
-                                variant="outline"
+                                variant="cancel"
                                 size="sm"
                               >
                                 Cancel
@@ -859,23 +859,23 @@ export function InstalledScriptsTab() {
                             <>
                               <Button
                                 onClick={() => handleEditScript(script)}
-                                variant="default"
+                                variant="edit"
                                 size="sm"
                               >
                                 Edit
                               </Button>
                               {script.container_id && (
                                 <Button
                                   onClick={() => handleUpdateScript(script)}
-                                  variant="link"
+                                  variant="update"
                                   size="sm"
                                 >
                                   Update
                                 </Button>
                               )}
                               <Button
                                 onClick={() => handleDeleteScript(Number(script.id))}
-                                variant="destructive"
+                                variant="delete"
                                 size="sm"
                                 disabled={deleteScriptMutation.isPending}
                               >

src/app/_components/ScriptCard.tsx

@@ -49,7 +49,7 @@ export function ScriptCard({ script, onClick }: ScriptCardProps) {
             </h3>
             <div className="mt-2 space-y-2">
               {/* Type and Updateable status on first row */}
-              <div className="flex items-center space-x-2">
+              <div className="flex items-center space-x-2 flex-wrap gap-1">
                 <TypeBadge type={script.type ?? 'unknown'} />
                 {script.updateable && <UpdateableBadge />}
               </div>

src/app/_components/ScriptCardList.tsx

@@ -70,7 +70,7 @@ export function ScriptCardList({ script, onClick }: ScriptCardListProps) {
                 <h3 className="text-xl font-semibold text-foreground truncate mb-2">
                   {script.name || 'Unnamed Script'}
                 </h3>
-                <div className="flex items-center space-x-3">
+                <div className="flex items-center space-x-3 flex-wrap gap-2">
                   <TypeBadge type={script.type ?? 'unknown'} />
                   {script.updateable && <UpdateableBadge />}
                   <div className="flex items-center space-x-1">

src/app/_components/ScriptInstallationCard.tsx

@@ -134,15 +134,15 @@ export function ScriptInstallationCard({
             <Button
               onClick={onSave}
               disabled={isUpdating}
-              variant="default"
+              variant="save"
               size="sm"
               className="flex-1 min-w-0"
             >
               {isUpdating ? 'Saving...' : 'Save'}
             </Button>
             <Button
               onClick={onCancel}
-              variant="outline"
+              variant="cancel"
               size="sm"
               className="flex-1 min-w-0"
             >
@@ -153,7 +153,7 @@ export function ScriptInstallationCard({
           <>
             <Button
               onClick={onEdit}
-              variant="default"
+              variant="edit"
               size="sm"
               className="flex-1 min-w-0"
             >
@@ -162,7 +162,7 @@ export function ScriptInstallationCard({
             {script.container_id && (
               <Button
                 onClick={onUpdate}
-                variant="link"
+                variant="update"
                 size="sm"
                 className="flex-1 min-w-0"
               >
@@ -171,7 +171,7 @@ export function ScriptInstallationCard({
             )}
             <Button
               onClick={onDelete}
-              variant="destructive"
+              variant="delete"
               size="sm"
               disabled={isDeleting}
               className="flex-1 min-w-0"

src/app/_components/ui/button.tsx

@@ -34,6 +34,12 @@ const buttonVariants = cva(
           "relative after:absolute after:bg-primary after:bottom-2 after:h-[1px] after:w-2/3 after:origin-bottom-left after:scale-x-100 hover:after:origin-bottom-right hover:after:scale-x-0 after:transition-transform after:ease-in-out after:duration-300",
         linkHover2:
           "relative after:absolute after:bg-primary after:bottom-2 after:h-[1px] after:w-2/3 after:origin-bottom-right after:scale-x-0 hover:after:origin-bottom-left hover:after:scale-x-100 after:transition-transform after:ease-in-out after:duration-300",
+        // Dark theme action button variants
+        edit: "bg-blue-900/20 hover:bg-blue-900/30 border border-blue-700/50 text-blue-300 hover:text-blue-200 hover:border-blue-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md",
+        update: "bg-cyan-900/20 hover:bg-cyan-900/30 border border-cyan-700/50 text-cyan-300 hover:text-cyan-200 hover:border-cyan-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md",
+        delete: "bg-red-900/20 hover:bg-red-900/30 border border-red-700/50 text-red-300 hover:text-red-200 hover:border-red-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md disabled:hover:scale-100",
+        save: "bg-green-900/20 hover:bg-green-900/30 border border-green-700/50 text-green-300 hover:text-green-200 hover:border-green-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md disabled:hover:scale-100",
+        cancel: "bg-gray-800/20 hover:bg-gray-800/30 border border-gray-600/50 text-gray-300 hover:text-gray-200 hover:border-gray-500/60 transition-all duration-200 hover:scale-105 hover:shadow-md",
       },
       size: {
         default: "h-10 px-4 py-2",

src/app/page.tsx

@@ -106,8 +106,8 @@ export default function Home() {
                 onClick={() => setActiveTab('scripts')}
                 className={`px-3 py-2 text-sm flex items-center justify-center sm:justify-start gap-2 w-full sm:w-auto ${
                   activeTab === 'scripts'
-                    ? 'bg-accent text-accent-foreground'
-                    : 'hover:bg-accent hover:text-accent-foreground'
+                    ? 'bg-accent text-accent-foreground rounded-t-md rounded-b-none'
+                    : 'hover:bg-accent hover:text-accent-foreground hover:rounded-t-md hover:rounded-b-none'
                 }`}> 
                 <Package className="h-4 w-4" />
                 <span className="hidden sm:inline">Available Scripts</span>
@@ -122,8 +122,8 @@ export default function Home() {
                 onClick={() => setActiveTab('downloaded')}
                 className={`px-3 py-2 text-sm flex items-center justify-center sm:justify-start gap-2 w-full sm:w-auto ${
                   activeTab === 'downloaded'
-                    ? 'bg-accent text-accent-foreground'
-                    : 'hover:bg-accent hover:text-accent-foreground'
+                    ? 'bg-accent text-accent-foreground rounded-t-md rounded-b-none'
+                    : 'hover:bg-accent hover:text-accent-foreground hover:rounded-t-md hover:rounded-b-none'
                 }`}>
                 <HardDrive className="h-4 w-4" />
                 <span className="hidden sm:inline">Downloaded Scripts</span>
@@ -138,8 +138,8 @@ export default function Home() {
                 onClick={() => setActiveTab('installed')}
                 className={`px-3 py-2 text-sm flex items-center justify-center sm:justify-start gap-2 w-full sm:w-auto ${
                   activeTab === 'installed'
-                    ? 'bg-accent text-accent-foreground'
-                    : 'hover:bg-accent hover:text-accent-foreground'
+                    ? 'bg-accent text-accent-foreground rounded-t-md rounded-b-none'
+                    : 'hover:bg-accent hover:text-accent-foreground hover:rounded-t-md hover:rounded-b-none'
                 }`}>
                 <FolderOpen className="h-4 w-4" />
                 <span className="hidden sm:inline">Installed Scripts</span>