authorgravatar for 118054752+extoci@users.noreply.github.comExotic <118054752+extoci@users.noreply.github.com> 2026-09-06 20:19:01+03:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-06 22:49:01+05:30
log29d03ec556e94d5f847644730daf75ba4aa20678
tree14b1b6e0fecf1bb67fc1cdbaad6e29b0b8d4094b
parent64fafbdfcf91d3c44b533f5b8febbe8d6b19d482
signature Signed by PGP key B5690EEEBB952194

style(web): fix inconsistencies in new settings layouts (#10177)

Co-authored-by: shivam <91240327+shivamhwp@users.noreply.github.com>

3 files changed, 9 insertions(+), 6 deletions(-)

apps/web/src/components/settings/ConnectionsSettings.tsx+5-2
......@@ -395,7 +395,7 @@ function formatDesktopSshConnectionError(error: unknown): string {
395395 return withoutTaggedErrorPrefix.trim() || fallback;
396396}
397397
398const ENDPOINT_ROW_CLASSNAME = "rounded-xl px-3 py-2.5 sm:px-4";
398const ENDPOINT_ROW_CLASSNAME = "first:rounded-t-xl last:rounded-b-xl px-3 py-2.5 sm:px-4";
399399
400400type AccessSectionPresentation = "current" | "endpoint-rail";
401401
......@@ -405,7 +405,10 @@ function accessRowClassName(_presentation: AccessSectionPresentation) {
405405
406406function endpointRowClassName(presentation: AccessSectionPresentation, isAvailable: boolean) {
407407 if (presentation === "endpoint-rail") {
408 return cn("relative rounded-xl px-3 py-3 sm:px-4", !isAvailable && "bg-muted/15");
408 return cn(
409 "relative first:rounded-t-xl last:rounded-b-xl px-3 py-3 sm:px-4",
410 !isAvailable && "bg-muted/15",
411 );
409412 }
410413
411414 return cn(ENDPOINT_ROW_CLASSNAME, !isAvailable && "bg-muted/24");
apps/web/src/components/settings/SourceControlSettings.tsx+2-2
......@@ -282,7 +282,7 @@ function DiscoveryItemRow({
282282 return (
283283 <div
284284 className={cn(
285 "rounded-xl transition-colors hover:bg-muted/20",
285 "first:rounded-t-xl last:rounded-b-xl transition-colors hover:bg-muted/20",
286286 isVcsNotReady(item) && "opacity-80",
287287 )}
288288 >
......@@ -432,7 +432,7 @@ function SourceControlSectionSkeleton({
432432 return (
433433 <SettingsSection title={title} headerAction={headerAction}>
434434 {SOURCE_CONTROL_SKELETON_ROWS.map((row) => (
435 <div key={row} className="rounded-xl px-3 py-3 sm:px-4">
435 <div key={row} className="first:rounded-t-xl last:rounded-b-xl px-3 py-3 sm:px-4">
436436 <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
437437 <div className="min-w-0 flex-1 space-y-2">
438438 <div className="flex items-center gap-2">
apps/web/src/components/settings/itemRows.ts+2-2
......@@ -1,5 +1,5 @@
1/** Direct row in a settings section. Whitespace, rather than rules, separates peers. */
2export const ITEM_ROW_CLASSNAME = "rounded-xl px-3 py-3 sm:px-4";
1/** Direct row in a grouped settings section. Round only outer corners; the parent owns borders and separators. */
2export const ITEM_ROW_CLASSNAME = "first:rounded-t-xl last:rounded-b-xl px-3 py-3 sm:px-4";
33
44export const ITEM_ROW_INNER_CLASSNAME =
55 "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between";