fix(core/presentation): protect against width overflow on Modal + Sta…

…ndardGridTableLayout (#8392) * fix(core/presentation): adjust Modal max width logic to avoid overflow * fix(core/presentation): stop expanded content overflow on StandardGridTableLayout * fix(core/managed): stop setting max-width on history modal Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
spinnaker · Jul 1, 2020 · 25adf5b · 25adf5b
1 parent 76a956d
commit 25adf5b
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 6 deletions.
diff --git a/app/scripts/modules/core/src/managed/ManagedResourceHistoryModal.tsx b/app/scripts/modules/core/src/managed/ManagedResourceHistoryModal.tsx
@@ -146,7 +146,7 @@ const renderExpandedRowContent = (
   dismissModal: () => any,
 ) => {
   return (
-    <div className="flex-container-v left" style={{ maxWidth: '90vw' }}>
+    <div className="flex-container-v left">
       {message && (
         <div
           className={classNames('sp-padding-xs-yaxis', {

diff --git a/app/scripts/modules/core/src/presentation/modal/Modal.module.css b/app/scripts/modules/core/src/presentation/modal/Modal.module.css
@@ -122,15 +122,18 @@
 
 .dialogSizer {
   display: grid;
+  grid-template-columns: 1fr;
   grid-template-rows: 1fr;
   max-height: calc(100vh - 64px);
   min-height: 320px;
+  width: calc(100vw - 128px);
   margin: 0 64px;
 }
 
 @media belowMobileSize {
   .dialogSizer {
     max-height: calc(100vh - 32px);
+    width: calc(100vw - 48px);
     margin: 0 24px;
   }
 }
@@ -145,8 +148,8 @@
 .dialog {
   display: flex;
   position: relative;
-  grid-column: 1;
-  grid-row: 1;
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
   flex-direction: column;
   overflow: hidden;
   border-radius: 8px;

diff --git a/app/scripts/modules/core/src/presentation/modal/Modal.tsx b/app/scripts/modules/core/src/presentation/modal/Modal.tsx
@@ -51,8 +51,7 @@ export const Modal = ({ isOpen, maxWidth, onRequestClose, onAfterClose, children
               <div
                 className={styles.dialogSizer}
                 style={{
-                  gridTemplateColumns: `minmax(min-content, ${(isNumber(maxWidth) ? `${maxWidth}px` : maxWidth) ??
-                    DEFAULT_MAX_WIDTH})`,
+                  maxWidth: (isNumber(maxWidth) ? `${maxWidth}px` : maxWidth) ?? DEFAULT_MAX_WIDTH,
                 }}
               >
                 <div className={styles.dialog}>{children}</div>

diff --git a/app/scripts/modules/core/src/presentation/tables/standardGridTableLayout.less b/app/scripts/modules/core/src/presentation/tables/standardGridTableLayout.less
@@ -84,6 +84,10 @@
     }
   }
 
+  .standard-grid-table-row-container {
+    display: grid;
+  }
+
   .standard-grid-table-row {
     display: grid;
     min-height: 40px;
@@ -92,6 +96,7 @@
     font-size: 13px;
     padding: 8px 0;
     grid-column: 1 / -1;
+    grid-row: 1;
 
     &.expandable {
       cursor: pointer;
@@ -127,6 +132,7 @@
   .expanded-row-content {
     /* stretch across entire table width */
     grid-column: 1 / -1;
+    grid-row: 2;
     background-color: var(--color-white);
     padding: 16px;
     overflow-x: scroll;

diff --git a/app/scripts/modules/core/src/presentation/tables/standardGridTableLayout.tsx b/app/scripts/modules/core/src/presentation/tables/standardGridTableLayout.tsx
@@ -104,7 +104,7 @@ const TableRowLayout = ({
 
   return (
     <div
-      className={classNames('flex-container-v standard-grid-table-row-container', {
+      className={classNames('standard-grid-table-row-container', {
         'sp-margin-l-bottom': rowExpandable && expanded,
       })}
     >