From 4de846cdb473b580662a94020374d1bd3d805a83 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Wed, 5 Aug 2026 15:18:16 +0200 Subject: [PATCH 1/3] fix width if it contains a label with OverflowText children --- CHANGELOG.md | 3 +++ .../PropertyValuePair/propertyvalue.scss | 16 ++++++++++++++++ 2 files changed, 19 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 24e5d3ec..c9fe871c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - ``: - 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.scss b/src/components/PropertyValuePair/propertyvalue.scss index 1f1edc29..9b2083d9 100644 --- a/src/components/PropertyValuePair/propertyvalue.scss +++ b/src/components/PropertyValuePair/propertyvalue.scss @@ -49,6 +49,22 @@ & > div { margin-right: $eccgui-size-block-whitespace; } + + .#{$eccgui}-label { + line-height: normal; + } + } + + .#{$eccgui}-label:has(.#{$eccgui}-typography__overflowtext) { + display: inline-flex; + align-items: baseline; + max-width: 100%; + + span { + flex-grow: 0; + flex-shrink: 1; + min-width: 0; + } } } From 4b790ef611744e252c3036bd44584985fcdfb7a0 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Wed, 5 Aug 2026 18:20:24 +0200 Subject: [PATCH 2/3] use minimum breakpoint for column display --- CHANGELOG.md | 2 + .../PropertyValuePair/propertyvalue.scss | 90 +++++++++++-------- 2 files changed, 57 insertions(+), 35 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c9fe871c..c6424fba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,8 @@ 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 diff --git a/src/components/PropertyValuePair/propertyvalue.scss b/src/components/PropertyValuePair/propertyvalue.scss index 9b2083d9..0ca206f5 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) { @@ -36,22 +40,32 @@ justify-content: center; :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; - } - - .#{$eccgui}-label { - line-height: normal; + @container eccgui-propertyvalue-pair (width >= #{$eccgui-pagination-size-column-breakpoint-small}) { + float: left; + width: math.div(3, 16) * 100%; + overflow: hidden; + + & > div { + margin-right: $eccgui-size-block-whitespace; + } + + .#{$eccgui}-label { + line-height: normal; + } } } @@ -68,22 +82,46 @@ } } +.#{$eccgui}-propertyvalue__value { + box-sizing: content-box; + + :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & { + @container eccgui-propertyvalue-pair (width >= #{$eccgui-pagination-size-column-breakpoint-small}) { + margin-left: math.div(3, 16) * 100%; + } + } + + &:not(:last-child) { + .#{$eccgui}-propertyvalue__pair--hasdivider > & { + border-bottom: solid 1px $pt-divider-black; + } + .#{$eccgui}-propertyvalue__pair--hasspacing > & { + padding-bottom: $eccgui-size-block-whitespace * 0.5; + margin-bottom: $eccgui-size-block-whitespace * 0.5; + } + } +} + .#{$eccgui}-propertyvalue__property--small { :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & { - width: math.div(2, 16) * 100%; + @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__value { + margin-left: math.div(2, 16) * 100%; + } } } } .#{$eccgui}-propertyvalue__property--large { :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & { - width: math.div(5, 16) * 100%; + @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__value { + margin-left: math.div(5, 16) * 100%; + } } } } @@ -93,24 +131,6 @@ white-space: nowrap; } -.#{$eccgui}-propertyvalue__value { - box-sizing: content-box; - - :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & { - margin-left: math.div(3, 16) * 100%; - } - - &:not(:last-child) { - .#{$eccgui}-propertyvalue__pair--hasdivider > & { - border-bottom: solid 1px $pt-divider-black; - } - .#{$eccgui}-propertyvalue__pair--hasspacing > & { - padding-bottom: $eccgui-size-block-whitespace * 0.5; - margin-bottom: $eccgui-size-block-whitespace * 0.5; - } - } -} - @media print { .#{$eccgui}-propertyvalue__pair, .#{$eccgui}-propertyvalue__property, From 1d8cf1c4db3e6ae4853c1101658b8502a102e53d Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 6 Aug 2026 15:24:20 +0200 Subject: [PATCH 3/3] use workaround to improve alignment --- src/components/PropertyValuePair/PropertyValue.tsx | 2 +- src/components/PropertyValuePair/propertyvalue.scss | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) 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 0ca206f5..7031b8e6 100644 --- a/src/components/PropertyValuePair/propertyvalue.scss +++ b/src/components/PropertyValuePair/propertyvalue.scss @@ -38,6 +38,7 @@ $eccgui-pagination-size-column-breakpoint-small: 20rem; display: flex; flex-direction: column; justify-content: center; + position: relative; :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & { @container eccgui-propertyvalue-pair (width >= #{$eccgui-pagination-size-column-breakpoint-small}) { @@ -58,6 +59,7 @@ $eccgui-pagination-size-column-breakpoint-small: 20rem; float: left; width: math.div(3, 16) * 100%; overflow: hidden; + bottom: -1px; & > div { margin-right: $eccgui-size-block-whitespace; @@ -79,6 +81,12 @@ $eccgui-pagination-size-column-breakpoint-small: 20rem; flex-shrink: 1; min-width: 0; } + + .#{$eccgui}-label__tooltip, + .#{$eccgui}-label__other{ + position: relative; + bottom: -1px; + } } }