diff --git a/CHANGELOG.md b/CHANGELOG.md index 24e5d3ec..c6424fba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,11 +10,16 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - ``: - `shouldHaveMinimalSetup`: Even if set to false, the edit history feature will still be explicitly enabled. +- ``: + - column display is only enabled if the container is large enough, this way property name containers do not get to small ### Fixed - ``: - Code markup inside tooltips was hardly readable because of low contrast. +- ``: + - fix width if it contains a label with `OverflowText` children + - tooltip is displayed correctly inside the container ## [26.0.0] - 2026-07-08 diff --git a/src/components/PropertyValuePair/PropertyValue.tsx b/src/components/PropertyValuePair/PropertyValue.tsx index 2157a23e..2dbfec2f 100644 --- a/src/components/PropertyValuePair/PropertyValue.tsx +++ b/src/components/PropertyValuePair/PropertyValue.tsx @@ -7,7 +7,7 @@ export interface PropertyValueProps extends React.HTMLAttributes { /** * Force value to get displayed without line breaks. * This works best if you use a string or inline element as content. - * Otherwise you may need to take care yourself about it. + * Otherwise, you may need to take care yourself about it. */ nowrap?: boolean; } diff --git a/src/components/PropertyValuePair/propertyvalue.scss b/src/components/PropertyValuePair/propertyvalue.scss index 1f1edc29..7031b8e6 100644 --- a/src/components/PropertyValuePair/propertyvalue.scss +++ b/src/components/PropertyValuePair/propertyvalue.scss @@ -1,5 +1,7 @@ @use "sass:math"; +$eccgui-pagination-size-column-breakpoint-small: 20rem; + .#{$eccgui}-propertyvalue__list { display: block; } @@ -8,6 +10,8 @@ clear: both; display: block; width: 100%; + container-name: eccgui-propertyvalue-pair; + container-type: inline-size; &.#{$eccgui}-propertyvalue__pair--hasdivider { &:not(:last-child) { @@ -34,54 +38,65 @@ display: flex; flex-direction: column; justify-content: center; + position: relative; :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & { - min-height: $eccgui-size-textfield-height-regular; + @container eccgui-propertyvalue-pair (width >= #{$eccgui-pagination-size-column-breakpoint-small}) { + min-height: $eccgui-size-textfield-height-regular; + } + + @container eccgui-propertyvalue-pair (width < #{$eccgui-pagination-size-column-breakpoint-small}) { + &.#{$eccgui}-propertyvalue__value { + margin-bottom: $eccgui-size-inline-whitespace * 0.5; + } + } } } .#{$eccgui}-propertyvalue__property { :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & { - float: left; - width: math.div(3, 16) * 100%; - overflow: hidden; - - & > div { - margin-right: $eccgui-size-block-whitespace; + @container eccgui-propertyvalue-pair (width >= #{$eccgui-pagination-size-column-breakpoint-small}) { + float: left; + width: math.div(3, 16) * 100%; + overflow: hidden; + bottom: -1px; + + & > div { + margin-right: $eccgui-size-block-whitespace; + } + + .#{$eccgui}-label { + line-height: normal; + } } } -} -.#{$eccgui}-propertyvalue__property--small { - :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & { - width: math.div(2, 16) * 100%; + .#{$eccgui}-label:has(.#{$eccgui}-typography__overflowtext) { + display: inline-flex; + align-items: baseline; + max-width: 100%; - & + .#{$eccgui}-propertyvalue__value { - margin-left: math.div(2, 16) * 100%; + span { + flex-grow: 0; + flex-shrink: 1; + min-width: 0; } - } -} -.#{$eccgui}-propertyvalue__property--large { - :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & { - width: math.div(5, 16) * 100%; - - & + .#{$eccgui}-propertyvalue__value { - margin-left: math.div(5, 16) * 100%; + .#{$eccgui}-label__tooltip, + .#{$eccgui}-label__other{ + position: relative; + bottom: -1px; } } } -.#{$eccgui}-propertyvalue__property--nowrap { - overflow: visible; - white-space: nowrap; -} - .#{$eccgui}-propertyvalue__value { box-sizing: content-box; :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & { - margin-left: math.div(3, 16) * 100%; + @container eccgui-propertyvalue-pair (width >= #{$eccgui-pagination-size-column-breakpoint-small}) { + margin-left: math.div(3, 16) * 100%; + } } &:not(:last-child) { @@ -95,6 +110,35 @@ } } +.#{$eccgui}-propertyvalue__property--small { + :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & { + @container eccgui-propertyvalue-pair (width >= #{$eccgui-pagination-size-column-breakpoint-small}) { + width: math.div(2, 16) * 100%; + + & + .#{$eccgui}-propertyvalue__value { + margin-left: math.div(2, 16) * 100%; + } + } + } +} + +.#{$eccgui}-propertyvalue__property--large { + :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & { + @container eccgui-propertyvalue-pair (width >= #{$eccgui-pagination-size-column-breakpoint-small}) { + width: math.div(5, 16) * 100%; + + & + .#{$eccgui}-propertyvalue__value { + margin-left: math.div(5, 16) * 100%; + } + } + } +} + +.#{$eccgui}-propertyvalue__property--nowrap { + overflow: visible; + white-space: nowrap; +} + @media print { .#{$eccgui}-propertyvalue__pair, .#{$eccgui}-propertyvalue__property,