chore: minor CSS cleanup

Author: bolt-bot

packages/uikit-workshop/src/scripts/components/pl-drawer/pl-drawer.scss

@@ -9,8 +9,11 @@ pl-drawer {
   flex-direction: column;
   position: relative;
   position: sticky;
+  top: auto;
+  bottom: 0;
+  left: 0;
+  right: 0;
   z-index: 20;
-  box-shadow: 0 0 2px 0 $pl-color-gray-70;
   overflow: visible;
 }
 
@@ -20,23 +23,14 @@ pl-drawer {
  */
 .pl-c-drawer {
   display: flex;
-  height: 100%;
   flex-direction: column;
   font-family: $pl-font;
   background-color: $pl-color-gray-87;
   color: $pl-color-gray-20;
-  position: sticky;
-  top: auto;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 5;
   width: 100%;
   height: 100%;
-  transition: transform 0.3s ease;
-  transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, 0, 0);
   pointer-events: none;
-  will-change: height, transform;
   overflow: hidden;
   max-width: 100vw;
 
@@ -50,7 +44,6 @@ pl-drawer {
      * Active drawer
      */
   &.pl-is-active {
-    transform: translate3d(0, 0, 0);
     pointer-events: auto;
   }
 }
@@ -81,6 +74,10 @@ pl-drawer {
   flex-direction: column;
   flex-grow: 1;
   overflow: hidden; // needed for IE 11 so scrollbars show up
+
+  @supports (padding: env(safe-area-inset-top)){
+    padding-right: calc(env(safe-area-inset-right) - 0.9rem);
+  }
 }
 
 .pl-c-drawer__toolbar-controls {
@@ -89,7 +86,7 @@ pl-drawer {
   align-self: flex-end;
   position: relative;
   z-index: 10;
-  flex-shrink: 0;
+  flex-shrink: 0; // fix for IE 11 squishing UI controls
 }
 
 /**
@@ -143,7 +140,6 @@ pl-drawer {
   right: 0;
   align-items: center;
   justify-content: center;
-  left: 0;
   height: $pl-drawer-resizer-height;
   width: 100%;
   background-color: inherit;
@@ -160,7 +156,7 @@ pl-drawer {
     opacity: 0.5;
     background-color: currentColor;
     border-radius: 3px;
-    display: block;
+    display: block; // IE 11 bug fix
   }
 
   &:hover:after {