Fix PropertyName with OverflowText children (CMEM-7578)

CHANGELOG.md

@@ -10,11 +10,16 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 - `<CodeEditor />`:
     - `shouldHaveMinimalSetup`: Even if set to false, the edit history feature will still be explicitly enabled.
+- `<PropertyName />`:
+    - column display is only enabled if the container is large enough, this way property name containers do not get to small
 
 ### Fixed
 
 - `<Tooltip />`:
     - Code markup inside tooltips was hardly readable because of low contrast.
+- `<PropertyName />`:
+    - fix width if it contains a label with `OverflowText` children
+    - tooltip is displayed correctly inside the container
 
 ## [26.0.0] - 2026-07-08
 

src/components/PropertyValuePair/PropertyValue.tsx

@@ -7,7 +7,7 @@ export interface PropertyValueProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * 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;
 }

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,