@odx/ui 4.3.1 → 4.3.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @odx/ui
 
+## 4.3.2
+
+### Patch Changes
+
+- 2fa9021: Updated header component for title text truncation
+
 ## 4.3.1
 
 ### Patch Changes

package/core-theme.css

@@ -4409,20 +4409,27 @@ html body .odx-fs-italic {
   min-height: auto;
 }
 .odx-header__content {
+  display: none;
   margin-inline-end: auto;
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  overflow: clip;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 @media (min-width: 768px) {
   .odx-header__content {
     padding-right: calc(var(--odx-vertical-rythm-base-size) * 1);
     padding-left: calc(var(--odx-vertical-rythm-base-size) * 1);
+    display: block;
+    overflow: hidden;
   }
 }
 .odx-header__title {
   overflow: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
+  overflow: hidden;
 }
 .odx-header .odx-action-group:not(:last-child) {
   border-inline-end: 1px solid var(--odx-c-separator);
@@ -4996,6 +5003,7 @@ html body .odx-fs-italic {
   background-color: unset;
   margin: 0 0 0 calc(var(--odx-vertical-rythm-base-size) * -0.3333);
   outline: none;
+  z-index: 1;
 }
 .odx-mainfilter-group .odx-daterangepicker__trigger-wrapper .odx-button {
   margin-left: calc(var(--odx-vertical-rythm-base-size) * 0.5);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odx/ui",
-  "version": "4.3.1",
+  "version": "4.3.2",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {

package/scss/components/header.component.scss

@@ -24,12 +24,17 @@
   }
 
   &__content {
+    display: none;
     margin-inline-end: auto;
 
     @include dimensions.padding-x(0.5);
+    @include typography.prevent-text-overflow();
 
     @include breakpoints.up(tablet) {
       @include dimensions.padding-x(1);
+
+      display: block;
+      overflow: hidden;
     }
   }
 
@@ -37,6 +42,8 @@
     @extend .odx-title;
     @extend .odx-title-6;
     @include typography.prevent-text-overflow();
+
+    overflow: hidden;
   }
 
   .odx-action-group:not(:last-child) {

package/scss/components/mainfilter-group.component.scss

@@ -158,6 +158,7 @@
       background-color: unset;
       margin: 0 0 0 dimensions.get-size(math.div(-8, 24));
       outline: none;
+      z-index: 1;
     }
   }