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,