From fce465a40ffb9f513f7f146cce4b0f1cdd4d0735 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 13 Apr 2026 21:06:16 +0530
Subject: [PATCH] refactor: simplify layout structure in user settings
 components

---
 .../components/ProfileContent.tsx             |  2 +-
 .../settings/general-settings-manager.tsx     | 99 +++++++------------
 2 files changed, 39 insertions(+), 62 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/ProfileContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/ProfileContent.tsx
index c1e81283b..32377194a 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/ProfileContent.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/ProfileContent.tsx
@@ -78,7 +78,7 @@ export function ProfileContent() {
 				</div>
 			) : (
 				<form onSubmit={handleSubmit} className="space-y-6">
-					<div className="rounded-lg border bg-card p-6">
+					<div className="rounded-lg bg-card">
 						<div className="flex flex-col gap-6">
 							<div className="space-y-2">
 								<Label>{t("profile_avatar")}</Label>
diff --git a/surfsense_web/components/settings/general-settings-manager.tsx b/surfsense_web/components/settings/general-settings-manager.tsx
index e83525982..b8db34c38 100644
--- a/surfsense_web/components/settings/general-settings-manager.tsx
+++ b/surfsense_web/components/settings/general-settings-manager.tsx
@@ -9,7 +9,6 @@ import { toast } from "sonner";
 import { updateSearchSpaceMutationAtom } from "@/atoms/search-spaces/search-space-mutation.atoms";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -83,16 +82,10 @@ export function GeneralSettingsManager({ searchSpaceId }: GeneralSettingsManager
 	if (loading) {
 		return (
 			<div className="space-y-4 md:space-y-6">
-				<Card>
-					<CardHeader className="px-3 md:px-6 pt-3 md:pt-6 pb-2 md:pb-3">
-						<Skeleton className="h-5 md:h-6 w-36 md:w-48" />
-						<Skeleton className="h-3 md:h-4 w-full max-w-md mt-2" />
-					</CardHeader>
-					<CardContent className="space-y-3 md:space-y-4 px-3 md:px-6 pb-3 md:pb-6">
-						<Skeleton className="h-10 md:h-12 w-full" />
-						<Skeleton className="h-10 md:h-12 w-full" />
-					</CardContent>
-				</Card>
+				<div className="flex flex-col gap-6">
+					<Skeleton className="h-10 md:h-12 w-full" />
+					<Skeleton className="h-10 md:h-12 w-full" />
+				</div>
 			</div>
 		);
 	}
@@ -113,61 +106,45 @@ export function GeneralSettingsManager({ searchSpaceId }: GeneralSettingsManager
 			<Alert className="bg-muted/50 py-3 md:py-4">
 				<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
 				<AlertDescription className="text-xs md:text-sm">
-					Update your search space name and description. These details help identify and organize
-					your workspace.
+					Update your search space name and description.
 				</AlertDescription>
 			</Alert>
 
-			{/* Search Space Details Card */}
-			<form onSubmit={onSubmit} className="space-y-4 md:space-y-6">
-				<Card>
-					<CardHeader className="px-3 md:px-6 pt-3 md:pt-6 pb-2 md:pb-3">
-						<CardTitle className="text-base md:text-lg">Search Space Details</CardTitle>
-						<CardDescription className="text-xs md:text-sm">
-							Manage the basic information for this search space.
-						</CardDescription>
-					</CardHeader>
-					<CardContent className="space-y-4 md:space-y-5 px-3 md:px-6 pb-3 md:pb-6">
-						<div className="space-y-1.5 md:space-y-2">
-							<Label htmlFor="search-space-name" className="text-sm md:text-base font-medium">
-								{t("general_name_label")}
-							</Label>
-							<Input
-								id="search-space-name"
-								placeholder={t("general_name_placeholder")}
-								value={name}
-								onChange={(e) => setName(e.target.value)}
-								className="text-sm md:text-base h-9 md:h-10"
-							/>
-							<p className="text-[10px] md:text-xs text-muted-foreground">
-								{t("general_name_description")}
-							</p>
-						</div>
+			<form onSubmit={onSubmit} className="space-y-6">
+				<div className="flex flex-col gap-6">
+					<div className="space-y-2">
+						<Label htmlFor="search-space-name">
+							{t("general_name_label")}
+						</Label>
+						<Input
+							id="search-space-name"
+							placeholder={t("general_name_placeholder")}
+							value={name}
+							onChange={(e) => setName(e.target.value)}
+						/>
+						<p className="text-xs text-muted-foreground">
+							{t("general_name_description")}
+						</p>
+					</div>
 
-						<div className="space-y-1.5 md:space-y-2">
-							<Label
-								htmlFor="search-space-description"
-								className="text-sm md:text-base font-medium"
-							>
-								{t("general_description_label")}{" "}
-								<span className="text-muted-foreground font-normal">({tCommon("optional")})</span>
-							</Label>
-							<Input
-								id="search-space-description"
-								placeholder={t("general_description_placeholder")}
-								value={description}
-								onChange={(e) => setDescription(e.target.value)}
-								className="text-sm md:text-base h-9 md:h-10"
-							/>
-							<p className="text-[10px] md:text-xs text-muted-foreground">
-								{t("general_description_description")}
-							</p>
-						</div>
-					</CardContent>
-				</Card>
+					<div className="space-y-2">
+						<Label htmlFor="search-space-description">
+							{t("general_description_label")}{" "}
+							<span className="text-muted-foreground font-normal">({tCommon("optional")})</span>
+						</Label>
+						<Input
+							id="search-space-description"
+							placeholder={t("general_description_placeholder")}
+							value={description}
+							onChange={(e) => setDescription(e.target.value)}
+						/>
+						<p className="text-xs text-muted-foreground">
+							{t("general_description_description")}
+						</p>
+					</div>
+				</div>
 
-				{/* Action Buttons */}
-				<div className="flex justify-end pt-3 md:pt-4">
+				<div className="flex justify-end">
 					<Button
 						type="submit"
 						variant="outline"