refactor: update Card components to use self-start class for consistent alignment

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

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,14 +537,13 @@ 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">
+        {/* 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" />
@@ -555,7 +554,7 @@ export function ConfigTabs() {
               <Skeleton className="h-32 w-full" />
             </div>
           </div>
-            <div className="w-1/2 border rounded-lg p-4">
+          <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" />
@@ -567,16 +566,16 @@ export function ConfigTabs() {
               <Skeleton className="h-20 w-full" />
             </div>
           </div>
-          </div>
-          <div className="flex gap-x-4">
-            <div className="w-1/2 border rounded-lg p-4">
+
+          {/* 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="w-1/2 border rounded-lg p-4">
+          <div className="border rounded-lg p-4">
             <div className="space-y-4">
               <Skeleton className="h-8 w-48" />
               <Skeleton className="h-16 w-full" />
@@ -584,6 +583,22 @@ export function ConfigTabs() {
             </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>
       </div>
     );
@@ -633,17 +648,10 @@ 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>
-
-        <TabsContent value="connections" className="mt-6">
-          <div className="flex gap-x-4">
+      {/* 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 =>
@@ -673,9 +681,9 @@ export function ConfigTabs() {
             isAutoSaving={isAutoSavingGitea}
           />
         </div>
-        </TabsContent>
 
-        <TabsContent value="mirror" className="mt-6">
+        {/* Mirror Options - Full width */}
+        <div>
           <MirrorOptionsForm
             config={config.mirrorOptions}
             setConfig={update =>
@@ -690,11 +698,10 @@ 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">
+        {/* Schedule & Database Cleanup - Side by side */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <ScheduleConfigForm
             config={config.scheduleConfig}
             setConfig={update =>
@@ -709,8 +716,6 @@ export function ConfigTabs() {
             onAutoSave={autoSaveScheduleConfig}
             isAutoSaving={isAutoSavingSchedule}
           />
-            </div>
-            <div className="w-1/2">
           <DatabaseCleanupConfigForm
             config={config.cleanupConfig}
             setConfig={update =>
@@ -726,10 +731,9 @@ export function ConfigTabs() {
             isAutoSaving={isAutoSavingCleanup}
           />
         </div>
-          </div>
-        </TabsContent>
 
-        <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>
   );
 }

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">

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

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

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

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">