From 29d03ec556e94d5f847644730daf75ba4aa20678 Mon Sep 17 00:00:00 2001
From: Exotic <118054752+extoci@users.noreply.github.com>
Date: Sun, 6 Sep 2026 20:19:01 +0300
Subject: [PATCH] style(web): fix inconsistencies in new settings layouts
 (#10177)

Co-authored-by: shivam <91240327+shivamhwp@users.noreply.github.com>
---
 apps/web/src/components/settings/ConnectionsSettings.tsx   | 7 +++++--
 apps/web/src/components/settings/SourceControlSettings.tsx | 4 ++--
 apps/web/src/components/settings/itemRows.ts               | 4 ++--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/settings/ConnectionsSettings.tsx b/apps/web/src/components/settings/ConnectionsSettings.tsx
index b5de1e1248018e1b2590246e1d441bce3a8ed480..ad766565117184235b7911b95d68282d94db616b 100644
--- a/apps/web/src/components/settings/ConnectionsSettings.tsx
+++ b/apps/web/src/components/settings/ConnectionsSettings.tsx
@@ -395,7 +395,7 @@ function formatDesktopSshConnectionError(error: unknown): string {
   return withoutTaggedErrorPrefix.trim() || fallback;
 }
 
-const ENDPOINT_ROW_CLASSNAME = "rounded-xl px-3 py-2.5 sm:px-4";
+const ENDPOINT_ROW_CLASSNAME = "first:rounded-t-xl last:rounded-b-xl px-3 py-2.5 sm:px-4";
 
 type AccessSectionPresentation = "current" | "endpoint-rail";
 
@@ -405,7 +405,10 @@ function accessRowClassName(_presentation: AccessSectionPresentation) {
 
 function endpointRowClassName(presentation: AccessSectionPresentation, isAvailable: boolean) {
   if (presentation === "endpoint-rail") {
-    return cn("relative rounded-xl px-3 py-3 sm:px-4", !isAvailable && "bg-muted/15");
+    return cn(
+      "relative first:rounded-t-xl last:rounded-b-xl px-3 py-3 sm:px-4",
+      !isAvailable && "bg-muted/15",
+    );
   }
 
   return cn(ENDPOINT_ROW_CLASSNAME, !isAvailable && "bg-muted/24");
diff --git a/apps/web/src/components/settings/SourceControlSettings.tsx b/apps/web/src/components/settings/SourceControlSettings.tsx
index 736b7f1b4b99c9a2824e786aa42a551cf736235b..6d9d20105224f93abff945f13b6e65222494bfad 100644
--- a/apps/web/src/components/settings/SourceControlSettings.tsx
+++ b/apps/web/src/components/settings/SourceControlSettings.tsx
@@ -282,7 +282,7 @@ function DiscoveryItemRow({
   return (
     <div
       className={cn(
-        "rounded-xl transition-colors hover:bg-muted/20",
+        "first:rounded-t-xl last:rounded-b-xl transition-colors hover:bg-muted/20",
         isVcsNotReady(item) && "opacity-80",
       )}
     >
@@ -432,7 +432,7 @@ function SourceControlSectionSkeleton({
   return (
     <SettingsSection title={title} headerAction={headerAction}>
       {SOURCE_CONTROL_SKELETON_ROWS.map((row) => (
-        <div key={row} className="rounded-xl px-3 py-3 sm:px-4">
+        <div key={row} className="first:rounded-t-xl last:rounded-b-xl px-3 py-3 sm:px-4">
           <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <div className="min-w-0 flex-1 space-y-2">
               <div className="flex items-center gap-2">
diff --git a/apps/web/src/components/settings/itemRows.ts b/apps/web/src/components/settings/itemRows.ts
index e207c9ff7a783a17649821800d09ec7bd534609f..0bad52bcb0333df156384da9442421edd6a0cd16 100644
--- a/apps/web/src/components/settings/itemRows.ts
+++ b/apps/web/src/components/settings/itemRows.ts
@@ -1,5 +1,5 @@
-/** Direct row in a settings section. Whitespace, rather than rules, separates peers. */
-export const ITEM_ROW_CLASSNAME = "rounded-xl px-3 py-3 sm:px-4";
+/** Direct row in a grouped settings section. Round only outer corners; the parent owns borders and separators. */
+export const ITEM_ROW_CLASSNAME = "first:rounded-t-xl last:rounded-b-xl px-3 py-3 sm:px-4";
 
 export const ITEM_ROW_INNER_CLASSNAME =
   "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between";
-- 
2.54.0