| author |  Exotic <118054752+extoci@users.noreply.github.com> 2026-09-06 20:19:01+03:00 |
| committer |  GitHub <noreply@github.com> 2026-09-06 22:49:01+05:30 |
| log | 29d03ec556e94d5f847644730daf75ba4aa20678 |
| tree | 14b1b6e0fecf1bb67fc1cdbaad6e29b0b8d4094b |
| parent | 64fafbdfcf91d3c44b533f5b8febbe8d6b19d482 |
| 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
apps/web/src/components/settings/ConnectionsSettings.tsx+5-2
| ... | @@ -395,7 +395,7 @@ function formatDesktopSshConnectionError(error: unknown): string { | ... | @@ -395,7 +395,7 @@ function formatDesktopSshConnectionError(error: unknown): string { |
| 395 | return withoutTaggedErrorPrefix.trim() || fallback; | 395 | return withoutTaggedErrorPrefix.trim() || fallback; |
| 396 | } | 396 | } |
| 397 | 397 | ||
| 398 | const ENDPOINT_ROW_CLASSNAME = "rounded-xl px-3 py-2.5 sm:px-4"; | 398 | const ENDPOINT_ROW_CLASSNAME = "first:rounded-t-xl last:rounded-b-xl px-3 py-2.5 sm:px-4"; |
| 399 | 399 | ||
| 400 | type AccessSectionPresentation = "current" | "endpoint-rail"; | 400 | type AccessSectionPresentation = "current" | "endpoint-rail"; |
| 401 | 401 | ||
| ... | @@ -405,7 +405,10 @@ function accessRowClassName(_presentation: AccessSectionPresentation) { | ... | @@ -405,7 +405,10 @@ function accessRowClassName(_presentation: AccessSectionPresentation) { |
| 405 | 405 | ||
| 406 | function endpointRowClassName(presentation: AccessSectionPresentation, isAvailable: boolean) { | 406 | function endpointRowClassName(presentation: AccessSectionPresentation, isAvailable: boolean) { |
| 407 | if (presentation === "endpoint-rail") { | 407 | 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 | ); | ||
| 409 | } | 412 | } |
| 410 | 413 | ||
| 411 | return cn(ENDPOINT_ROW_CLASSNAME, !isAvailable && "bg-muted/24"); | 414 | return cn(ENDPOINT_ROW_CLASSNAME, !isAvailable && "bg-muted/24"); |
apps/web/src/components/settings/SourceControlSettings.tsx+2-2
| ... | @@ -282,7 +282,7 @@ function DiscoveryItemRow({ | ... | @@ -282,7 +282,7 @@ function DiscoveryItemRow({ |
| 282 | return ( | 282 | return ( |
| 283 | <div | 283 | <div |
| 284 | className={cn( | 284 | 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", |
| 286 | isVcsNotReady(item) && "opacity-80", | 286 | isVcsNotReady(item) && "opacity-80", |
| 287 | )} | 287 | )} |
| 288 | > | 288 | > |
| ... | @@ -432,7 +432,7 @@ function SourceControlSectionSkeleton({ | ... | @@ -432,7 +432,7 @@ function SourceControlSectionSkeleton({ |
| 432 | return ( | 432 | return ( |
| 433 | <SettingsSection title={title} headerAction={headerAction}> | 433 | <SettingsSection title={title} headerAction={headerAction}> |
| 434 | {SOURCE_CONTROL_SKELETON_ROWS.map((row) => ( | 434 | {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"> |
| 436 | <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"> | 436 | <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"> |
| 437 | <div className="min-w-0 flex-1 space-y-2"> | 437 | <div className="min-w-0 flex-1 space-y-2"> |
| 438 | <div className="flex items-center gap-2"> | 438 | <div className="flex items-center gap-2"> |
apps/web/src/components/settings/itemRows.ts+2-2
| ... | @@ -1,5 +1,5 @@ | ... | @@ -1,5 +1,5 @@ |
| 1 | /** Direct row in a settings section. Whitespace, rather than rules, separates peers. */ | 1 | /** Direct row in a grouped settings section. Round only outer corners; the parent owns borders and separators. */ |
| 2 | export const ITEM_ROW_CLASSNAME = "rounded-xl px-3 py-3 sm:px-4"; | 2 | export const ITEM_ROW_CLASSNAME = "first:rounded-t-xl last:rounded-b-xl px-3 py-3 sm:px-4"; |
| 3 | 3 | ||
| 4 | export const ITEM_ROW_INNER_CLASSNAME = | 4 | export const ITEM_ROW_INNER_CLASSNAME = |
| 5 | "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"; | 5 | "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"; |