diff --git a/src/lib/components/sidebar/details/DetailRow.svelte b/src/lib/components/sidebar/details/DetailRow.svelte index 5f153590..1c76a663 100644 --- a/src/lib/components/sidebar/details/DetailRow.svelte +++ b/src/lib/components/sidebar/details/DetailRow.svelte @@ -60,6 +60,7 @@ color: var(--text-primary, colors.$grey-10); font-weight: typography.$medium; text-align: right; + min-width: 180px; } } diff --git a/src/lib/components/ui/DisclosureRow.svelte b/src/lib/components/ui/DisclosureRow.svelte index 7fc961f9..4de4a092 100644 --- a/src/lib/components/ui/DisclosureRow.svelte +++ b/src/lib/components/ui/DisclosureRow.svelte @@ -59,9 +59,9 @@ display: flex; justify-content: space-between; align-items: center; - width: 100%; - padding: spacing.$unit spacing.$unit; + gap: spacing.$unit-2x; margin: 0 calc(spacing.$unit * -1); + padding: spacing.$unit; border-radius: layout.$item-corner; font-size: typography.$font-regular; min-height: calc(spacing.$unit * 5); @@ -87,14 +87,16 @@ .label-container { display: flex; flex-direction: column; - flex-shrink: 0; - margin-right: spacing.$unit-2x; + flex: 1; + min-width: 0; gap: spacing.$unit-fourth; } .label { font-weight: typography.$medium; color: colors.$grey-30; + word-wrap: break-word; + overflow-wrap: break-word; } .sublabel {