Add overflow: hidden to .euiModal__flex (elastic#2164)

thompsongl · Sep 10, 2019 · 5ee3dd5 · 5ee3dd5
1 parent 42057b3
commit 5ee3dd5
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@
 - Fixed `.eui-textBreakWord` utility class to be cross-browser compatible ([#2157](https://github.com/elastic/eui/pull/2157))
 - Fixed truncation and z-index of `EuiFilePicker` ([#2145](https://github.com/elastic/eui/pull/2145))
 - Fixed `EuiNavDrawer`'s support for flyout groups in production/minified builds ([#2178](https://github.com/elastic/eui/pull/2178))
+- Fixed width overflow of `EuiModal` ([#2164](https://github.com/elastic/eui/pull/2164))
 
 ## [`13.0.0`](https://github.com/elastic/eui/tree/v13.0.0)
 

diff --git a/src-docs/src/views/modal/modal.js b/src-docs/src/views/modal/modal.js
@@ -14,6 +14,7 @@ import {
   EuiOverlayMask,
   EuiRange,
   EuiSwitch,
+  EuiCodeBlock,
 } from '../../../../src/components';
 
 import SuperSelectComplexExample from '../super_select/super_select_complex';
@@ -71,6 +72,12 @@ export class Modal extends Component {
         <EuiFormRow label="A SuperSelect field">
           <SuperSelectComplexExample />
         </EuiFormRow>
+
+        <EuiCodeBlock language="html" paddingSize="s" isCopyable>
+          {
+            '<h1>Titleisonelonglinejfdklsjaflkdsajfkldsajfklsdajfkldsjafkldsjalfkjdsklafjdsklafjkldsajfkldsajfkldsjfkdsjaflsdjaf;djsakfjdskafjdsklafjdksljfkdlsa;jfldksjfkldsajfkldsjflkdsjaklfadjs;</h1>'
+          }
+        </EuiCodeBlock>
       </EuiForm>
     );
 
@@ -81,7 +88,9 @@ export class Modal extends Component {
         <EuiOverlayMask>
           <EuiModal onClose={this.closeModal} initialFocus="[name=popswitch]">
             <EuiModalHeader>
-              <EuiModalHeaderTitle>Form in a modal</EuiModalHeaderTitle>
+              <EuiModalHeaderTitle>
+                Titleisonelonglinejfdklsjaflkdsajfkldsajfklsdajfkldsjafkldsjalfkjdsklafjdsklafjkldsajfkldsajfkldsjfkdsjaflsdjaf
+              </EuiModalHeaderTitle>
             </EuiModalHeader>
 
             <EuiModalBody>{formSample}</EuiModalBody>

diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
@@ -19,10 +19,11 @@
   animation: euiModal $euiAnimSpeedSlow $euiAnimSlightBounce;
 
   .euiModal__flex { /* 1 */
-    flex: 1;
+    flex: 1 1 auto;
     display: flex;
     flex-direction: column;
     max-height: 75vh; // We overflow the modal body based off this
+    overflow: hidden; // Ensure long, non-breaking text doesn't expand beyond the modal bounds
   }
 }