fix(kslideout): long titles not truncating

Fix an issue with long, non-wrapping titles not truncating and triggering a horizontal scrollbar in the content area. Signed-off-by: Philipp Rudloff <[email protected]>
Kong · Dec 15, 2023 · af18029 · af18029
1 parent 32accc4
commit af18029
Showing 1 changed file with 3 additions and 0 deletions.
diff --git a/src/components/KSlideout/KSlideout.vue b/src/components/KSlideout/KSlideout.vue
@@ -167,6 +167,9 @@ const offsetTopValue = computed((): string => {
       margin-top: var(--kui-space-60, $kui-space-60);
     }
     .k-slideout-main-title {
+      // Prevents long, non-wrapping titles from triggering a horizontal scrollbar in the content area. This also allows `.k-slideout-title` to actually truncate its text content.
+      min-width: 0;
+
       .k-slideout-title {
         color: var(--kui-color-text-neutral, $kui-color-text-neutral);
         flex:1;