use CSS resize for sizing playground panels

sass · Oct 3, 2024 · dcf8b4f · dcf8b4f
1 parent 9e5382d
commit dcf8b4f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/source/assets/sass/components/_playground.scss b/source/assets/sass/components/_playground.scss
@@ -131,8 +131,8 @@ $playground-base-colors: (
   @include config.sl-breakpoint--large {
     // magic numbers, the layout is well balanced with these proportions
     grid-template:
-      'sass css' minmax(20ex, 1fr)
-      'sass debug' minmax(0, 40%) / 1fr 1fr;
+      'sass css' auto
+      'sass debug' 1fr / auto 1fr;
     height: 100%;
     overflow: inherit;
   }
@@ -160,12 +160,23 @@ $playground-base-colors: (
 
 [data-code='source'] {
   --sl-background--editor: var(--sl-color--white);
-
   grid-area: sass;
+  min-inline-size: 100%;
+
+  @include config.sl-breakpoint--large {
+    min-inline-size: var(--sl-min-inline-size--playground-panel);
+    max-inline-size: calc(100vw - var(--sl-min-inline-size--playground-panel));
+    resize: inline;
+  }
 }
 
 [data-code='compiled'] {
   --sl-background--editor: var(--sl-color--code-background);
+
+  @include config.sl-breakpoint--large {
+    resize: block;
+    min-block-size: 2.5lh;
+  }
 }
 
 // Codemirror overrides
@@ -396,7 +407,11 @@ $playground-base-colors: (
 
 // Make sure all tab bar buttons and text get the same padding
 [data-tabbar~='item'] {
-  padding: var(--sl-gutter--half) var(--sl-gutter);
+  padding: var(--sl-gutter--half) var(--sl-padding-inline--tabbar-item, var(--sl-gutter));
+}
+
+.tabbar-title {
+  --sl-padding-inline--tabbar-item: var(--sl-gutter--half);
 }
 
 .sl-c-playground__tabbar-title {

diff --git a/source/assets/sass/config/_scale.scss b/source/assets/sass/config/_scale.scss
@@ -60,3 +60,4 @@ $sl-playground-heading: 2.75rem;
 $sl-line-height--console: 0.95;
 $sl-width--mac-stadium-icon: 7rem;
 $sl-width--twitter-link: 8rem;
+$sl-min-inline-size--playground-panel: 50ch;