Merge pull request #57 from Specy/copilot/create-screen-height-variable

Use --screen-height (100dvh with 100vh fallback) instead of vh units

Author: Specy

src/components/shared/InteractiveInstructionEditor.svelte

@@ -127,7 +127,7 @@
                     height: 100%;
                     justify-content: space-evenly;
                 "
-                style={`flex: unset; max-height: ${embedded ? `calc(100vh - ${sizes})` : '16.3rem'}; min-height: 16.3rem;`}
+                style={`flex: unset; max-height: ${embedded ? `calc(var(--screen-height) - ${sizes})` : '16.3rem'}; min-height: 16.3rem;`}
                 registers={emulator.registers}
                 on:registerClick={async (e) => {
                     const value = e.detail.value

src/components/shared/layout/FloatingContainer.svelte

@@ -57,7 +57,7 @@
         width: 30rem;
         overflow: hidden;
         max-width: calc(100vw - 2rem);
-        top: 50vh;
+        top: calc(var(--screen-height) * 0.5);
         left: 50vw;
         transform: translate(-50%, -50%);
         border-radius: 0.8rem;

src/components/shared/layout/Sidebar.svelte

@@ -50,7 +50,7 @@
         gap: 1rem;
         top: 3.2rem;
         padding-top: 1rem;
-        height: calc(100vh - 3.2rem);
+        height: calc(var(--screen-height) - 3.2rem);
         overflow-y: auto;
         position: sticky;
     }

src/components/specific/project/FloatingLanguageDocumentation.svelte

@@ -57,7 +57,7 @@
         max-width: 15rem;
     }
     .scroll {
-        height: 80vh;
+        height: calc(var(--screen-height) * 0.8);
         overflow-y: auto;
     }
 </style>

src/components/specific/project/cpu/RegistersRenderer.svelte

@@ -117,7 +117,7 @@
         min-width: 8.6rem;
         position: relative;
         flex: 1;
-        max-height: calc(100vh - 14.5rem); //HOTFIX
+        max-height: calc(var(--screen-height) - 14.5rem); //HOTFIX
         overflow-y: auto;
         overflow-x: hidden;
         @media screen and (max-width: 1000px) {

src/components/specific/project/settings/ShortcutEditor.svelte

@@ -104,7 +104,7 @@
         display: flex;
         padding: 0.8rem;
         flex-direction: column;
-        height: 80vh;
+        height: calc(var(--screen-height) * 0.8);
         padding-top: 0;
         gap: 0.4rem;
         overflow-y: auto;

src/components/specific/project/testcases/TestcasesEditor.svelte

@@ -58,7 +58,7 @@
 </script>
 
 <FloatingContainer bind:visible title="Testcases" style="width: 45rem;">
-    <Column style="height: 80vh; overflow-y: auto;">
+    <Column style="height: calc(var(--screen-height) * 0.8); overflow-y: auto;">
         {#if testcasesResult.length > 0}
             <Column
                 padding="1rem"

src/global.css

@@ -25,6 +25,7 @@
 
 body,
 html {
+    --screen-height: 100vh;
     min-height: 100%;
     height: 100%;
     width: 100%;
@@ -36,6 +37,13 @@ html {
     overflow-x: hidden;
 }
 
+@supports (height: 100dvh) {
+    body,
+    html {
+        --screen-height: 100dvh;
+    }
+}
+
 @media print {
     body, html {
         height: auto;

src/routes/chat/+page.svelte

@@ -70,7 +70,7 @@
 
     .agent-wrapper {
         padding: 0.5rem;
-        min-height: 65vh;
+        min-height: calc(var(--screen-height) * 0.65);
         min-width: min(55ch, calc(100vw - 1rem));
         flex: 1;
         height: 100%;

src/routes/exam/session/+page.svelte

@@ -797,7 +797,7 @@
         grid-template-columns: minmax(14rem, 0.95fr) minmax(0, 1.35fr);
         gap: 0.8rem;
         height: 100%;
-        min-height: 50vh;
+        min-height: calc(var(--screen-height) * 0.5);
     }
 
     .prompt-pane {
@@ -836,7 +836,7 @@
         }
 
         .c-editor-wrap {
-            min-height: 40vh;
+            min-height: calc(var(--screen-height) * 0.4);
         }
     }
 </style>