fix DetailRow styling for form controls

This commit is contained in:
Justin Edmund 2026-01-05 02:26:36 -08:00
parent f56272c51c
commit 505f209fae

View file

@ -16,7 +16,7 @@
let { label, value, children, noHover = false, noPadding = false, compact = false }: Props = $props() let { label, value, children, noHover = false, noPadding = false, compact = false }: Props = $props()
</script> </script>
<div class="detail-row" class:no-hover={noHover} class:no-padding={noPadding} class:compact> <div class="detail-row" class:no-hover={noHover} class:no-padding={noPadding} class:compact class:has-control={children}>
<span class="label">{label}</span> <span class="label">{label}</span>
<span class="value"> <span class="value">
{#if children} {#if children}
@ -60,13 +60,22 @@
.value { .value {
font-size: typography.$font-regular; font-size: typography.$font-regular;
color: var(--text-primary, colors.$grey-10); color: var(--text-primary, colors.$grey-10);
min-width: 180px;
}
// Static value display (no children snippet)
&:not(.has-control) .value {
font-weight: typography.$medium; font-weight: typography.$medium;
text-align: right; text-align: right;
min-width: 180px;
} }
&.compact .value { &.compact .value {
min-width: unset; min-width: unset;
} }
// Select controls inside DetailRow should have consistent width
.value :global([data-select-trigger]) {
min-width: 192px;
}
} }
</style> </style>