Fix: Implement settings cleanup plan

src/components/settings/SecurityTab.tsx

@@ -237,6 +237,7 @@ export function SecurityTab() {
       icon: <DiscordIcon className="w-5 h-5" />
     }
   ];
+
   return (
     <>
       <PasswordUpdateDialog
@@ -247,16 +248,16 @@ export function SecurityTab() {
         }}
       />
 
-      <div className="space-y-8">
-        {/* Password Section - Conditional based on auth method */}
-        <div className="space-y-4">
-          <div className="flex items-center gap-2">
-            <Key className="w-5 h-5" />
-            <h3 className="text-lg font-medium">{hasPassword ? 'Change Password' : 'Add Password'}</h3>
-          </div>
-          
+      <div className="space-y-6">
+        {/* Password + Connected Accounts Grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Password Section */}
           <Card>
             <CardHeader>
+              <div className="flex items-center gap-2">
+                <Key className="w-5 h-5" />
+                <CardTitle>{hasPassword ? 'Change Password' : 'Add Password'}</CardTitle>
+              </div>
               <CardDescription>
                 {hasPassword ? (
                   <>Update your password to keep your account secure.</>
@@ -265,7 +266,7 @@ export function SecurityTab() {
                 )}
               </CardDescription>
             </CardHeader>
-            <CardContent className="space-y-3">
+            <CardContent>
               {hasPassword ? (
                 <Button onClick={() => setPasswordDialogOpen(true)}>
                   Change Password
@@ -284,25 +285,19 @@ export function SecurityTab() {
               )}
             </CardContent>
           </Card>
-        </div>
 
-      <Separator />
-
-      {/* Social Login Connections */}
-      <div className="space-y-4">
-        <div className="flex items-center gap-2">
-          <Globe className="w-5 h-5" />
-          <h3 className="text-lg font-medium">Connected Accounts</h3>
-        </div>
-        
-        <Card>
-          <CardHeader>
-            <CardDescription>
-              Manage your social login connections for easier access to your account.
-              To enable social providers, configure them in your Supabase Auth settings.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
+          {/* Connected Accounts */}
+          <Card>
+            <CardHeader>
+              <div className="flex items-center gap-2">
+                <Globe className="w-5 h-5" />
+                <CardTitle>Connected Accounts</CardTitle>
+              </div>
+              <CardDescription>
+                Manage your social login connections for easier access to your account.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
             {loadingIdentities ? (
               <div className="flex items-center justify-center p-8">
                 <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
@@ -360,35 +355,33 @@ export function SecurityTab() {
                 );
               })
             )}
-          </CardContent>
-        </Card>
-      </div>
-
-      <Separator />
-
-      {/* Two-Factor Authentication */}
-      <div className="space-y-4">
-        <div className="flex items-center gap-2">
-          <Smartphone className="w-5 h-5" />
-          <h3 className="text-lg font-medium">Two-Factor Authentication</h3>
+            </CardContent>
+          </Card>
         </div>
-        
-        <TOTPSetup />
-      </div>
 
-      <Separator />
-
-      {/* Active Sessions & Login History */}
-      <div className="space-y-4">
-        <div className="flex items-center gap-2">
-          <Shield className="w-5 h-5" />
-          <h3 className="text-lg font-medium">
-            Active Sessions {sessions.length > 0 && `(${sessions.length})`}
-          </h3>
-        </div>
-        
+        {/* Two-Factor Authentication - Full Width */}
         <Card>
           <CardHeader>
+            <div className="flex items-center gap-2">
+              <Smartphone className="w-5 h-5" />
+              <CardTitle>Two-Factor Authentication</CardTitle>
+            </div>
+            <CardDescription>
+              Add an extra layer of security to your account with TOTP authentication
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <TOTPSetup />
+          </CardContent>
+        </Card>
+
+        {/* Active Sessions - Full Width */}
+        <Card>
+          <CardHeader>
+            <div className="flex items-center gap-2">
+              <Shield className="w-5 h-5" />
+              <CardTitle>Active Sessions {sessions.length > 0 && `(${sessions.length})`}</CardTitle>
+            </div>
             <CardDescription>
               Review and manage your active login sessions across all devices
             </CardDescription>
@@ -453,15 +446,14 @@ export function SecurityTab() {
             )}
           </CardContent>
         </Card>
-      </div>
 
-      <SessionRevokeConfirmDialog
-        open={!!sessionToRevoke}
-        onOpenChange={(open) => !open && setSessionToRevoke(null)}
-        onConfirm={confirmRevokeSession}
-        isCurrentSession={sessionToRevoke?.isCurrent ?? false}
-      />
-    </div>
+        <SessionRevokeConfirmDialog
+          open={!!sessionToRevoke}
+          onOpenChange={(open) => !open && setSessionToRevoke(null)}
+          onConfirm={confirmRevokeSession}
+          isCurrentSession={sessionToRevoke?.isCurrent ?? false}
+        />
+      </div>
     </>
   );
 }