fix(pageColumns): smaller screen size column widths (#617)

RedHatInsights · Apr 15, 2021 · 4a1f85b · 4a1f85b
1 parent fe46047
commit 4a1f85b
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 30 deletions.
diff --git a/src/components/pageLayout/__tests__/__snapshots__/pageColumns.test.js.snap b/src/components/pageLayout/__tests__/__snapshots__/pageColumns.test.js.snap
@@ -28,19 +28,9 @@ exports[`PageColumns Component should render a basic component: basic 1`] = `
           }
         }
         key="page-column-.0"
-        style={
-          Object {
-            "flexBasis": 0,
-          }
-        }
       >
         <div
           className="pf-m-grow-on-sm curiosity-page-columns-column"
-          style={
-            Object {
-              "flexBasis": 0,
-            }
-          }
         >
           <span
             className="dolor"
@@ -58,19 +48,9 @@ exports[`PageColumns Component should render a basic component: basic 1`] = `
           }
         }
         key="page-column-.$hello-world"
-        style={
-          Object {
-            "flexBasis": 0,
-          }
-        }
       >
         <div
           className="pf-m-grow-on-sm curiosity-page-columns-column"
-          style={
-            Object {
-              "flexBasis": 0,
-            }
-          }
         >
           <span
             className="sit"

diff --git a/src/components/pageLayout/pageColumns.js b/src/components/pageLayout/pageColumns.js
@@ -22,7 +22,6 @@ const PageColumns = ({ children, className }) => (
       .map(child => (
         <FlexItem
           key={(child.key && `page-column-${child.key}`) || helpers.generateId()}
-          style={{ flexBasis: 0 }}
           grow={{ sm: 'grow' }}
           className="curiosity-page-columns-column"
         >

diff --git a/src/styles/_inventory-list.scss b/src/styles/_inventory-list.scss
@@ -53,8 +53,13 @@
     }
   }
 
-  // ToDo: reevaluate this fix, originally for non-expandable table rows to aid in alignment with heading
+  // ToDo: reevaluate this fix periodically, originally for non-expandable table rows to aid in alignment with heading
   .curiosity-inventory-list {
+    // FixMe: an unknown border-top-width appears?
+    &.pf-c-table.pf-m-compact tbody {
+      border-top-width: 0;
+    }
+
     &.pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row) > :first-child {
       padding-left: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);
     }

diff --git a/src/styles/_page-layout.scss b/src/styles/_page-layout.scss
@@ -7,15 +7,21 @@
   position: relative;
 }
 
-.curiosity-page-columns-column {
-  margin-left: var(--pf-global--spacer--sm);
-  margin-right: var(--pf-global--spacer--sm);
+.curiosity-page-columns > .curiosity-page-columns-column {
+  margin-left: 0;
+  margin-right: 0;
 
-  &:first-child {
-    margin-left: 0;
-  }
+  @media (min-width: $pf-global--breakpoint--sm) {
+    flex-basis: 0;
+    margin-left: var(--pf-global--spacer--sm);
+    margin-right: var(--pf-global--spacer--sm);
+
+    &:first-child {
+      margin-left: 0;
+    }
 
-  &:last-child {
-    margin-right: 0;
+    &:last-child {
+      margin-right: 0;
+    }
   }
 }