fix(repl): mobile panel selection

QwikDev · Jan 16, 2024 · 1f6aba3 · 1f6aba3
1 parent 729aa72
commit 1f6aba3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/packages/docs/src/routes/examples/[...id]/examples.css b/packages/docs/src/routes/examples/[...id]/examples.css
@@ -11,10 +11,10 @@
   grid-template-rows: 100%;
   grid-template-columns: 100vw 100vw;
   grid-template-areas: 'example-content-panel example-repl-panel';
-  height: calc(100% - var(--header-height));
+  height: 100%;
+  height: calc(100% - var(--header-height) - var(--panel-toggle-height));
   transform: translate3d(0, 0, 0);
   transition: transform 500ms;
-  height: 100%;
 }
 
 .examples-panel-input {
@@ -35,15 +35,14 @@
   border-width: 1px;
   border-top-style: solid;
   border-top-left-radius: 5px;
-  overflow: hidden;
 }
 
 .examples .repl {
   display: grid;
   grid-template-rows: auto;
   grid-template-columns: 100vw 100vw 100vw;
   grid-template-areas: 'repl-input-panel repl-output-panel repl-detail-panel';
-  height: calc(100vh - var(--header-height));
+  height: 100%;
 }
 
 @media (min-width: 768px) {

diff --git a/packages/docs/src/routes/playground/playground.css b/packages/docs/src/routes/playground/playground.css
@@ -1,6 +1,7 @@
 .playground {
   width: 100%;
   height: cal(100vh - var(--header-height));
+  height: cal(100dvh - var(--header-height));
 
   --playground-header-height: 0px;
 }
@@ -14,6 +15,7 @@
     'repl-input-panel repl-detail-panel';
   top: calc(var(--header-height) + var(--playground-header-height));
   height: calc(100vh - var(--header-height) - var(--panel-toggle-height));
+  height: calc(100dvh - var(--header-height) - var(--panel-toggle-height));
 }
 
 .playground .repl-col-resize-bar {
@@ -56,6 +58,9 @@
 }
 
 @media (max-width: 768px) {
+  body {
+    overflow-x: hidden;
+  }
   .playground .repl {
     width: 300vw;
     grid-template-rows: 100%;