refactor: major cleanup + simplification of tabs and panel UI styles based on testing

Author: bolt-bot

packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss

@@ -8,42 +8,31 @@
  *    code, annotations, and more.
  */
 .pl-c-pattern-info {
-  @media all and (min-width: $pl-bp-large) {
-    display: flex;
-  }
+  flex-grow: 1; // fills space available when placed in the parent flex container
+  display: flex;
+  flex-direction: row;
+  flex-flow: row wrap;
+  width: 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
 
   /**
      *  Pattern info inside the "view all" template
      */
   .pl-c-pattern & {
     max-height: 20rem;
+    min-height: 18rem;
     overflow: scroll;
     @include hideScrollBar();
+    display: flex;
+    -webkit-overflow-scrolling: touch;
 
     @media all and (min-width: $pl-bp-large) {
       max-height: none;
       height: 18rem;
       overflow: visible;
     }
   }
-
-  /**
-     *  Pattern info inside modal
-     */
-  .pl-c-modal & {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    overflow: scroll;
-    @include hideScrollBar();
-
-    @media all and (min-width: $pl-bp-large) {
-      position: static;
-      overflow: visible;
-    }
-  }
 }
 
 /**
@@ -52,68 +41,19 @@
  *    Right side contains pattern code
  */
 .pl-c-pattern-info__panel {
-  padding: 1rem;
-
-  @media all and (min-width: $pl-bp-med) {
-    padding-right: 2.3rem;
-  }
-
-  @media all and (min-width: $pl-bp-large) {
-    flex: auto;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 1.3rem;
-    padding-right: 0;
-  }
-
-  .pl-c-modal & {
-    @media all and (min-width: $pl-bp-xl) {
-      right: 0;
-      padding-left: 2rem;
-      padding-right: 2.5rem;
-    }
-  }
-}
-
-/**
- * Pattern Info Panel
- * 1) Left panel that contains pattern title, lineage, description, annotations
- */
-.pl-c-pattern-info__panel--info {
-  padding-top: 2rem;
-
-  @media all and (min-width: $pl-bp-large) {
-    left: 0;
-    right: 50%;
-    overflow: scroll;
-    @include hideScrollBar();
-  }
-
-  @media all and (min-width: $pl-bp-xl) {
-    right: 55%;
-  }
-}
-
-/**
- * Pattern Code Panel
- * 1) Right panel that displays the pattern's code (found in _tabs.scss)
- * 2) Using a sibling selector because the pattern info isn't always present.
- *    The sibling selector allows the code panel to occupy the full width of
- *    the modal
- * 1) Cap the height of the code panel in the modal
- */
-.pl-c-pattern-info__panel--info + .pl-c-pattern-info__panel--code {
-  @media all and (min-width: $pl-bp-large) {
-    right: 0;
-    left: 50%;
-    top: 1.2rem;
-  }
-
-  @media all and (min-width: $pl-bp-xl) {
-    left: 45%;
-  }
+  flex-basis: 40%; // fills up 100% if only one panel exists. using 40% vs 50% due to quirky behavior in IE 11
+  padding-top: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 0;
+  padding-left: 1rem;
+  margin-bottom: 1rem;
+  flex-grow: 1;
+  max-width: 100%;
+  min-width: 300px; // so panels stack automatically
+  display: inline-flex;
+  flex-direction: column;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 /**

packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss

@@ -17,26 +17,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-
-  /**
-     * Tabs inside a code panel
-     */
-  .pl-c-pattern-info__panel--code & {
-    @media all and (min-width: $pl-bp-large) {
-      position: absolute;
-      top: 1rem;
-      bottom: 1rem;
-      left: 1rem;
-      right: 1rem;
-    }
-  }
-
-  .pl-c-modal & {
-    @media all and (min-width: $pl-bp-xl) {
-      right: 2.5rem;
-      left: 2rem;
-    }
-  }
+  flex-grow: 1;
 }
 
 /**
@@ -89,18 +70,9 @@
  * 1) Tab content contains the tab panels
  */
 .pl-c-tabs__content {
-  flex: 1 0 auto;
-  overflow: scroll;
-  @include hideScrollBar();
-  height: 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
   padding-top: 0.5rem;
-
-  /**
-     *  Tab content inside modal
-     */
-  .pl-c-modal & {
-    border: 0;
-  }
 }
 
 /**
@@ -110,7 +82,7 @@
  */
 .pl-c-tabs__panel {
   display: none;
-  min-height: 12rem;
+  // min-height: 12rem;
 
   &.pl-is-active-tab {
     display: block;