chore: polish up modal / tabs UI on small to medium screens; update ish control buttons to overflow-scroll so they can remain accessible on larger screen sizes / when the sidebar layout is toggled

Author: sghoweri

packages/uikit-workshop/src/sass/scss/04-components/_ish-sizing.scss

@@ -71,10 +71,21 @@
   margin: 0;
   padding: 0;
 
+  @media all and (min-width: $pl-bp-med) {
+    align-items: center;
+    justify-content: center;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+
+    .pl-c-body--theme-sidebar & {
+      display: block;
+      display: flex;
+    }
+  }
+
   @media all and (min-width: $pl-bp-large) {
     display: block;
     display: flex;
-    align-items: center;
   }
 }
 

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

@@ -55,21 +55,22 @@
   padding: 1rem;
 
   @media all and (min-width: $pl-bp-med) {
-    padding-right: 3rem;
+    padding-right: 2.3rem;
   }
 
   @media all and (min-width: $pl-bp-large) {
-    padding-right: 1rem;
     flex: auto;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
-    right: 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;
     }

packages/uikit-workshop/src/sass/scss/05-themes/_sidebar-theme.scss

@@ -159,10 +159,6 @@
       flex-direction: column;
     }
 
-    .pl-c-size-list {
-      display: none;
-    }
-
     .pl-c-viewport-size {
       display: none;
     }