From 544b60f88104233496e7ffcee01c0cbf7a313449 Mon Sep 17 00:00:00 2001
From: Arunavo Ray <rayanup3@gmail.com>
Date: Thu, 12 Jun 2025 15:29:47 +0530
Subject: [PATCH] refactor: update Card components to use self-start class for
 consistent alignment

---
 src/components/config/AdvancedOptionsForm.tsx |   2 +-
 src/components/config/ConfigTabs.tsx          | 246 +++++++++---------
 .../config/DatabaseCleanupConfigForm.tsx      |   2 +-
 src/components/config/GitHubConfigForm.tsx    |   2 +-
 src/components/config/GiteaConfigForm.tsx     |   2 +-
 src/components/config/MirrorOptionsForm.tsx   |   2 +-
 src/components/config/ScheduleConfigForm.tsx  |   2 +-
 7 files changed, 131 insertions(+), 127 deletions(-)

diff --git a/src/components/config/AdvancedOptionsForm.tsx b/src/components/config/AdvancedOptionsForm.tsx
index 76abfc8..0d63eba 100644
--- a/src/components/config/AdvancedOptionsForm.tsx
+++ b/src/components/config/AdvancedOptionsForm.tsx
@@ -32,7 +32,7 @@ export function AdvancedOptionsForm({
   };
 
   return (
-    <Card>
+    <Card className="self-start">
       <CardHeader>
         <CardTitle className="text-lg font-semibold flex items-center justify-between">
           Advanced Options
diff --git a/src/components/config/ConfigTabs.tsx b/src/components/config/ConfigTabs.tsx
index 5929c60..251dce5 100644
--- a/src/components/config/ConfigTabs.tsx
+++ b/src/components/config/ConfigTabs.tsx
@@ -5,7 +5,7 @@ import { ScheduleConfigForm } from './ScheduleConfigForm';
 import { DatabaseCleanupConfigForm } from './DatabaseCleanupConfigForm';
 import { MirrorOptionsForm } from './MirrorOptionsForm';
 import { AdvancedOptionsForm } from './AdvancedOptionsForm';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
+// Removed Tabs import as we're switching to grid layout
 import type {
   ConfigApiResponse,
   GiteaConfig,
@@ -537,51 +537,66 @@ export function ConfigTabs() {
           </div>
           <div className="flex gap-x-4">
             <Skeleton className="h-10 w-36" />
-            <Skeleton className="h-10 w-36" />
           </div>
         </div>
 
-        {/* Content section */}
-        <div className="flex flex-col gap-y-4">
-          <div className="flex gap-x-4">
-            <div className="w-1/2 border rounded-lg p-4">
-              <div className="flex justify-between items-center mb-4">
-                <Skeleton className="h-6 w-40" />
-                <Skeleton className="h-9 w-32" />
-              </div>
-              <div className="space-y-4">
-                <Skeleton className="h-20 w-full" />
-                <Skeleton className="h-20 w-full" />
-                <Skeleton className="h-32 w-full" />
-              </div>
+        {/* Content section - Grid layout */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {/* GitHub & Gitea connections */}
+          <div className="border rounded-lg p-4">
+            <div className="flex justify-between items-center mb-4">
+              <Skeleton className="h-6 w-40" />
+              <Skeleton className="h-9 w-32" />
             </div>
-            <div className="w-1/2 border rounded-lg p-4">
-              <div className="flex justify-between items-center mb-4">
-                <Skeleton className="h-6 w-40" />
-                <Skeleton className="h-9 w-32" />
-              </div>
-              <div className="space-y-4">
-                <Skeleton className="h-20 w-full" />
-                <Skeleton className="h-20 w-full" />
-                <Skeleton className="h-20 w-full" />
-                <Skeleton className="h-20 w-full" />
-              </div>
+            <div className="space-y-4">
+              <Skeleton className="h-20 w-full" />
+              <Skeleton className="h-20 w-full" />
+              <Skeleton className="h-32 w-full" />
             </div>
           </div>
-          <div className="flex gap-x-4">
-            <div className="w-1/2 border rounded-lg p-4">
-              <div className="space-y-4">
-                <Skeleton className="h-8 w-48" />
-                <Skeleton className="h-16 w-full" />
-                <Skeleton className="h-8 w-32" />
-              </div>
+          <div className="border rounded-lg p-4">
+            <div className="flex justify-between items-center mb-4">
+              <Skeleton className="h-6 w-40" />
+              <Skeleton className="h-9 w-32" />
             </div>
-            <div className="w-1/2 border rounded-lg p-4">
-              <div className="space-y-4">
-                <Skeleton className="h-8 w-48" />
-                <Skeleton className="h-16 w-full" />
-                <Skeleton className="h-8 w-32" />
-              </div>
+            <div className="space-y-4">
+              <Skeleton className="h-20 w-full" />
+              <Skeleton className="h-20 w-full" />
+              <Skeleton className="h-20 w-full" />
+              <Skeleton className="h-20 w-full" />
+            </div>
+          </div>
+
+          {/* Schedule & Database Cleanup */}
+          <div className="border rounded-lg p-4">
+            <div className="space-y-4">
+              <Skeleton className="h-8 w-48" />
+              <Skeleton className="h-16 w-full" />
+              <Skeleton className="h-8 w-32" />
+            </div>
+          </div>
+          <div className="border rounded-lg p-4">
+            <div className="space-y-4">
+              <Skeleton className="h-8 w-48" />
+              <Skeleton className="h-16 w-full" />
+              <Skeleton className="h-8 w-32" />
+            </div>
+          </div>
+        </div>
+
+        {/* Mirror Options & Advanced - Full width sections */}
+        <div className="space-y-4">
+          <div className="border rounded-lg p-4">
+            <Skeleton className="h-8 w-48 mb-4" />
+            <div className="space-y-4">
+              <Skeleton className="h-16 w-full" />
+              <Skeleton className="h-24 w-full" />
+            </div>
+          </div>
+          <div className="border rounded-lg p-4">
+            <Skeleton className="h-8 w-48 mb-4" />
+            <div className="space-y-4">
+              <Skeleton className="h-16 w-full" />
             </div>
           </div>
         </div>
@@ -633,49 +648,42 @@ export function ConfigTabs() {
         </div>
       </div>
 
-      {/* Content section */}
-      <Tabs defaultValue="connections" className="w-full">
-        <TabsList className="grid w-full grid-cols-4">
-          <TabsTrigger value="connections">Connections</TabsTrigger>
-          <TabsTrigger value="mirror">Mirror Options</TabsTrigger>
-          <TabsTrigger value="schedule">Schedule & Cleanup</TabsTrigger>
-          <TabsTrigger value="advanced">Advanced</TabsTrigger>
-        </TabsList>
+      {/* Content section - Grid layout */}
+      <div className="space-y-6">
+        {/* GitHub & Gitea connections - Side by side */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <GitHubConfigForm
+            config={config.githubConfig}
+            setConfig={update =>
+              setConfig(prev => ({
+                ...prev,
+                githubConfig:
+                  typeof update === 'function'
+                    ? update(prev.githubConfig)
+                    : update,
+              }))
+            }
+            onAutoSave={autoSaveGitHubConfig}
+            isAutoSaving={isAutoSavingGitHub}
+          />
+          <GiteaConfigForm
+            config={config.giteaConfig}
+            setConfig={update =>
+              setConfig(prev => ({
+                ...prev,
+                giteaConfig:
+                  typeof update === 'function'
+                    ? update(prev.giteaConfig)
+                    : update,
+              }))
+            }
+            onAutoSave={autoSaveGiteaConfig}
+            isAutoSaving={isAutoSavingGitea}
+          />
+        </div>
 
-        <TabsContent value="connections" className="mt-6">
-          <div className="flex gap-x-4">
-            <GitHubConfigForm
-              config={config.githubConfig}
-              setConfig={update =>
-                setConfig(prev => ({
-                  ...prev,
-                  githubConfig:
-                    typeof update === 'function'
-                      ? update(prev.githubConfig)
-                      : update,
-                }))
-              }
-              onAutoSave={autoSaveGitHubConfig}
-              isAutoSaving={isAutoSavingGitHub}
-            />
-            <GiteaConfigForm
-              config={config.giteaConfig}
-              setConfig={update =>
-                setConfig(prev => ({
-                  ...prev,
-                  giteaConfig:
-                    typeof update === 'function'
-                      ? update(prev.giteaConfig)
-                      : update,
-                }))
-              }
-              onAutoSave={autoSaveGiteaConfig}
-              isAutoSaving={isAutoSavingGitea}
-            />
-          </div>
-        </TabsContent>
-
-        <TabsContent value="mirror" className="mt-6">
+        {/* Mirror Options - Full width */}
+        <div>
           <MirrorOptionsForm
             config={config.mirrorOptions}
             setConfig={update =>
@@ -690,46 +698,42 @@ export function ConfigTabs() {
             onAutoSave={autoSaveMirrorOptions}
             isAutoSaving={isAutoSavingMirrorOptions}
           />
-        </TabsContent>
+        </div>
 
-        <TabsContent value="schedule" className="mt-6">
-          <div className="flex gap-x-4">
-            <div className="w-1/2">
-              <ScheduleConfigForm
-                config={config.scheduleConfig}
-                setConfig={update =>
-                  setConfig(prev => ({
-                    ...prev,
-                    scheduleConfig:
-                      typeof update === 'function'
-                        ? update(prev.scheduleConfig)
-                        : update,
-                  }))
-                }
-                onAutoSave={autoSaveScheduleConfig}
-                isAutoSaving={isAutoSavingSchedule}
-              />
-            </div>
-            <div className="w-1/2">
-              <DatabaseCleanupConfigForm
-                config={config.cleanupConfig}
-                setConfig={update =>
-                  setConfig(prev => ({
-                    ...prev,
-                    cleanupConfig:
-                      typeof update === 'function'
-                        ? update(prev.cleanupConfig)
-                        : update,
-                  }))
-                }
-                onAutoSave={autoSaveCleanupConfig}
-                isAutoSaving={isAutoSavingCleanup}
-              />
-            </div>
-          </div>
-        </TabsContent>
+        {/* Schedule & Database Cleanup - Side by side */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <ScheduleConfigForm
+            config={config.scheduleConfig}
+            setConfig={update =>
+              setConfig(prev => ({
+                ...prev,
+                scheduleConfig:
+                  typeof update === 'function'
+                    ? update(prev.scheduleConfig)
+                    : update,
+              }))
+            }
+            onAutoSave={autoSaveScheduleConfig}
+            isAutoSaving={isAutoSavingSchedule}
+          />
+          <DatabaseCleanupConfigForm
+            config={config.cleanupConfig}
+            setConfig={update =>
+              setConfig(prev => ({
+                ...prev,
+                cleanupConfig:
+                  typeof update === 'function'
+                    ? update(prev.cleanupConfig)
+                    : update,
+              }))
+            }
+            onAutoSave={autoSaveCleanupConfig}
+            isAutoSaving={isAutoSavingCleanup}
+          />
+        </div>
 
-        <TabsContent value="advanced" className="mt-6">
+        {/* Advanced options - Full width */}
+        <div>
           <AdvancedOptionsForm
             config={config.advancedOptions}
             setConfig={update =>
@@ -744,8 +748,8 @@ export function ConfigTabs() {
             onAutoSave={autoSaveAdvancedOptions}
             isAutoSaving={isAutoSavingAdvancedOptions}
           />
-        </TabsContent>
-      </Tabs>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/components/config/DatabaseCleanupConfigForm.tsx b/src/components/config/DatabaseCleanupConfigForm.tsx
index c77382f..ab2d113 100644
--- a/src/components/config/DatabaseCleanupConfigForm.tsx
+++ b/src/components/config/DatabaseCleanupConfigForm.tsx
@@ -94,7 +94,7 @@ export function DatabaseCleanupConfigForm({
   ];
 
   return (
-    <Card>
+    <Card className="self-start">
       <CardContent className="pt-6 relative">
         {isAutoSaving && (
           <div className="absolute top-4 right-4 flex items-center text-sm text-muted-foreground">
diff --git a/src/components/config/GitHubConfigForm.tsx b/src/components/config/GitHubConfigForm.tsx
index 7c820a4..3671d74 100644
--- a/src/components/config/GitHubConfigForm.tsx
+++ b/src/components/config/GitHubConfigForm.tsx
@@ -68,7 +68,7 @@ export function GitHubConfigForm({ config, setConfig, onAutoSave, isAutoSaving }
   };
 
   return (
-    <Card className="w-full">
+    <Card className="w-full self-start">
       <CardHeader className="flex flex-row items-center justify-between gap-4">
         <CardTitle className="text-lg font-semibold">
           GitHub Configuration
diff --git a/src/components/config/GiteaConfigForm.tsx b/src/components/config/GiteaConfigForm.tsx
index 0f85fa7..a5b0be5 100644
--- a/src/components/config/GiteaConfigForm.tsx
+++ b/src/components/config/GiteaConfigForm.tsx
@@ -91,7 +91,7 @@ export function GiteaConfigForm({ config, setConfig, onAutoSave, isAutoSaving }:
   };
 
   return (
-    <Card className="w-full">
+    <Card className="w-full self-start">
       <CardHeader className="flex flex-row items-center justify-between gap-4">
         <CardTitle className="text-lg font-semibold">
           Gitea Configuration
diff --git a/src/components/config/MirrorOptionsForm.tsx b/src/components/config/MirrorOptionsForm.tsx
index ed0cd8c..8fb01b2 100644
--- a/src/components/config/MirrorOptionsForm.tsx
+++ b/src/components/config/MirrorOptionsForm.tsx
@@ -55,7 +55,7 @@ export function MirrorOptionsForm({
   };
 
   return (
-    <Card>
+    <Card className="self-start">
       <CardHeader>
         <CardTitle className="text-lg font-semibold flex items-center justify-between">
           Mirror Options
diff --git a/src/components/config/ScheduleConfigForm.tsx b/src/components/config/ScheduleConfigForm.tsx
index dd8da0e..862c18e 100644
--- a/src/components/config/ScheduleConfigForm.tsx
+++ b/src/components/config/ScheduleConfigForm.tsx
@@ -54,7 +54,7 @@ export function ScheduleConfigForm({
   ];
 
   return (
-    <Card>
+    <Card className="self-start">
       <CardContent className="pt-6 relative">
         {isAutoSaving && (
           <div className="absolute top-4 right-4 flex items-center text-sm text-muted-foreground">