fix: canvas is true 16:9 below bar; embed uses calc(56.25% + 62px) padding-top

Author: stephenliang

README.md

@@ -5,13 +5,15 @@ A self-contained, embeddable web app that sequences the five interactive modes o
 ## Embedding
 
 ```html
-<iframe
-  src="https://code-dot-org.github.io/ai-literacy-oceans/"
-  width="100%"
-  style="aspect-ratio: 16/9; border: none;"
-  allow="microphone"
-  title="AI for Oceans">
-</iframe>
+<!-- Responsive wrapper: 16:9 canvas + 62px progress bar -->
+<div style="position:relative; width:100%; padding-top:calc(56.25% + 62px);">
+  <iframe
+    src="https://code-dot-org.github.io/ai-literacy-oceans/"
+    style="position:absolute; top:0; left:0; width:100%; height:100%; border:none;"
+    allow="microphone"
+    title="AI for Oceans">
+  </iframe>
+</div>
 ```
 
 ### Contract

public/iframe-test.html

@@ -21,11 +21,12 @@
       margin: 0 auto;
     }
 
-    /* Responsive 16:9 wrapper — the standard host-page embed pattern. */
+    /* Responsive wrapper: 16:9 canvas + 62px progress bar above it.
+       padding-top = 56.25% (9/16 canvas) + 62px (fixed bar). */
     .aspect-box {
       position: relative;
       width: 100%;
-      padding-top: 56.25%; /* 9/16 */
+      padding-top: calc(56.25% + 62px);
       border-radius: 8px;
       overflow: hidden;
       box-shadow: 0 4px 24px rgba(0,0,0,0.15);
@@ -94,7 +95,8 @@ <h1>AI for Oceans — iframe embed test</h1>
     </div>
     <p class="caption">
       Embedded via <code>&lt;iframe src="/ai-literacy-oceans/"&gt;</code> in a
-      56.25 % padding-top aspect-ratio wrapper (standard 16:9 responsive embed).
+      <code>calc(56.25% + 62px)</code> padding-top wrapper
+      (16:9 canvas + 62px progress bar).
     </p>
   </div>
 

src/App.tsx

@@ -76,6 +76,7 @@ function setLangParam(lang: string) {
 // ── App ─────────────────────────────────────────────────────────────────────
 
 const DARK_BG = 'rgb(2, 0, 28)';
+const PROGRESS_BAR_HEIGHT = 62;
 
 export default function App() {
   const session = loadSession();
@@ -160,6 +161,8 @@ export default function App() {
     />
   );
 
+  const labHeight = `calc(100vh - ${PROGRESS_BAR_HEIGHT}px)`;
+
   if (done) {
     return (
       <>
@@ -168,11 +171,12 @@ export default function App() {
         <div
           data-testid="play-again-screen"
           style={{
+            marginTop: PROGRESS_BAR_HEIGHT,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             width: '100vw',
-            height: '100vh',
+            height: labHeight,
             background: DARK_BG,
           }}
         >
@@ -206,15 +210,16 @@ export default function App() {
         data-testid="lab-area"
         data-mode={MODES[modeIndex]}
         style={{
+          marginTop: PROGRESS_BAR_HEIGHT,
           width: '100vw',
-          height: '100vh',
+          height: labHeight,
           background: DARK_BG,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
         }}
       >
-        <div style={{width: '100%', maxWidth: 'calc(100vh * 16 / 9)'}}>
+        <div style={{width: '100%', maxWidth: `calc(${labHeight} * 16 / 9)`}}>
           <OceansLab
               appMode={MODES[modeIndex] as AppMode}
               guides="HoC"