playground styling

Author: thomasp85

ggsql-wasm/demo/src/index.qmd

@@ -5,10 +5,20 @@ section-divs: false
 toc: false
 lightbox: false
 repo-actions: false
-include-in-header: 
+include-in-header:
   - text: |
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <link rel="stylesheet" href="bundle.css" />
+      <script>
+        // Set navbar height CSS variable for proper playground sizing
+        document.addEventListener('DOMContentLoaded', () => {
+          const header = document.getElementById('quarto-header');
+          if (header) {
+            const height = header.offsetHeight;
+            document.documentElement.style.setProperty('--quarto-navbar-height', height + 'px');
+          }
+        });
+      </script>
 include-after-body: 
   - text: |
       <script type="module" src="bundle.js"></script>

ggsql-wasm/demo/src/styles.css

@@ -7,7 +7,7 @@
 body {
   font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont,
     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  height: 100vh;
+  height: 100dvh;
   overflow: hidden;
   background: #F9F9F9;
   color: #001219;
@@ -17,7 +17,7 @@ body {
   display: grid;
   grid-template-columns: 200px 1fr 1fr;
   grid-template-rows: 1fr 150px;
-  height: 100vh;
+  height: calc(100dvh - var(--quarto-navbar-height, 0px));
   gap: 1px;
   background: #005F73;
   border-top: 2px solid #005F73;
@@ -31,7 +31,7 @@ body {
 #status {
   font-size: 12px;
   padding: 3px 10px;
-  border-radius: 3px;
+  border-radius: 0;
   background: #F9F9F9;
   color: #005F73;
 }
@@ -119,11 +119,11 @@ body {
 
 .file-input-label {
   display: block;
-  padding: 6px 8px;
+  padding: 6px 12px;
   background: #005F73;
   color: #F9F9F9;
   text-align: center;
-  border-radius: 3px;
+  border-radius: 50rem;
   cursor: pointer;
   font-size: 12px;
   margin-bottom: 6px;
@@ -150,12 +150,12 @@ body {
 .example-button {
   display: block;
   width: 100%;
-  padding: 5px 8px;
+  padding: 5px 12px;
   margin: 3px 0;
   background: #F9F9F9;
   border: 1px solid #94D2BD;
   color: #001219;
-  border-radius: 3px;
+  border-radius: 50rem;
   cursor: pointer;
   font-size: 12px;
   text-align: left;