fix: Break words in split panel header

cloudscape-design · Aug 11, 2023 · 0085847 · 0085847
1 parent e657a92
commit 0085847
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/pages/app-layout/with-split-panel.page.tsx b/pages/app-layout/with-split-panel.page.tsx
@@ -77,7 +77,7 @@ export default function () {
         splitPanel={
           splitPanelEnabled && (
             <SplitPanel
-              header="Split panel header"
+              header="Split panel header withlongwordthatshouldbesplitinsteadofmakingthepanelscroll"
               i18nStrings={{
                 preferencesTitle: 'Preferences',
                 preferencesPositionLabel: 'Split panel position',

diff --git a/src/split-panel/styles.scss b/src/split-panel/styles.scss
@@ -31,7 +31,7 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
 .drawer {
   flex-shrink: 0;
   position: relative;
-  word-wrap: break-word;
+  @include styles.text-wrapping;
   background-color: awsui.$color-background-layout-panel-content;
   // should be above tools and navigation panels to avoid their shadows
   z-index: 840;