From 9840bb7595909ac3f8561b5b2e1500076158a51c Mon Sep 17 00:00:00 2001
From: CD Cabrera <ccabrera@redhat.com>
Date: Thu, 15 Apr 2021 01:13:59 -0400
Subject: [PATCH] fix(pageColumns): smaller screen size column widths (#617)

---
 .../__snapshots__/pageColumns.test.js.snap    | 20 -----------------
 src/components/pageLayout/pageColumns.js      |  1 -
 src/styles/_inventory-list.scss               |  7 +++++-
 src/styles/_page-layout.scss                  | 22 ++++++++++++-------
 4 files changed, 20 insertions(+), 30 deletions(-)

diff --git a/src/components/pageLayout/__tests__/__snapshots__/pageColumns.test.js.snap b/src/components/pageLayout/__tests__/__snapshots__/pageColumns.test.js.snap
index 6438d91e3..804dfa9d1 100644
--- 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
index 5e86d819b..5c26bb89b 100644
--- 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
index 268326d1c..55cdc88e5 100644
--- 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
index 1975b413f..305aa90d3 100644
--- 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;
+    }
   }
 }