Refactor the settings layout to use an absolute positioned sidebar and responsive content padding

Author: robertpiosik

packages/ui/src/components/editor/settings/Layout/Layout.module.scss

@@ -1,21 +1,29 @@
 .container {
   display: flex;
-  gap: var(--padding-60px);
   width: 100%;
   height: 100%;
-  padding-left: var(--padding-60px);
   overflow: hidden;
-  @media (min-width: 920px) {
-    padding-left: calc((100vw - 800px) / 2);
+  --sidebar-width: 150px;
+  @media (min-width: 770px) {
+    --sidebar-width: 180px;
   }
 }
 
 .sidebar {
-  width: 180px;
-  padding-top: var(--padding-60px);
+  position: absolute;
+  z-index: 1;
   display: flex;
   flex-direction: column;
   gap: 30px;
+  width: var(--sidebar-width);
+  top: var(--padding-60px);
+  left: var(--padding-30px);
+  @media (min-width: 770px) {
+    left: var(--padding-60px);
+  }
+  @media (min-width: 920px) {
+    left: calc(calc((100vw - 800px) / 2));
+  }
 
   &__title {
     font-size: 22px;
@@ -38,10 +46,17 @@
   &__inner {
     display: flex;
     flex-direction: column;
-    gap: var(--padding-60px);
-    padding: var(--padding-60px) var(--padding-60px) 0 0;
+    padding: 0 var(--padding-30px) 0
+      calc(var(--sidebar-width) + var(--padding-30px) + var(--padding-30px));
+    @media (min-width: 770px) {
+      padding: 0 var(--padding-60px) 0
+        calc(var(--sidebar-width) + var(--padding-60px) + var(--padding-60px));
+    }
     @media (min-width: 920px) {
-      padding-right: calc((100vw - 800px) / 2);
+      padding: 0 calc((100vw - 800px) / 2) 0
+        calc(
+          calc((100vw - 800px) / 2) + var(--sidebar-width) + var(--padding-60px)
+        );
     }
   }
 }

packages/ui/src/components/editor/settings/Section/Section.module.scss

@@ -1,17 +1,26 @@
 .container {
-  scroll-margin-top: var(--padding-60px);
   display: flex;
   flex-direction: column;
   gap: var(--padding-24px);
-  padding-top: var(--padding-2px); // to align with the sidebar title
+
+  &--stuck {
+    box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px;
+  }
 }
 
 .header {
+  position: sticky;
+  z-index: 1;
+  top: 0;
   display: flex;
   flex-direction: column;
   gap: var(--padding-4px);
+  padding-top: calc(
+    var(--padding-60px) + var(--padding-2px)
+  ); // to align with the sidebar title
   border-bottom: 2px solid var(--vscode-editorWidget-border);
   padding-bottom: var(--padding-10px);
+  background-color: var(--vscode-editor-background);
 }
 
 .title {

packages/ui/src/styles/foundation/_variables.scss

@@ -15,6 +15,7 @@
   --padding-18px: 18px;
   --padding-20px: 20px;
   --padding-24px: 24px;
+  --padding-30px: 30px;
   --padding-60px: 60px;
 
   --font-size-11px: 11px;