From 4404bd168ac1fbc8498d30763cdcac3cf5115d8f Mon Sep 17 00:00:00 2001
From: itsrubberduck <frappes_remoter.2e@icloud.com>
Date: Fri, 20 Feb 2026 23:18:32 +0100
Subject: [PATCH] fix(learn-pfd): use h-screen and min-h for proper grid layout
 height
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root div min-h-screen → h-screen ensures flex-1 children get real
height. Grid children get min-h-[200px] so Three.js and PFD SVG
have measurable container dimensions to render into.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/pages/flightlab/medienstationen/learn-pfd.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/pages/flightlab/medienstationen/learn-pfd.vue b/app/pages/flightlab/medienstationen/learn-pfd.vue
index 9a4bbc9..0dde6d6 100644
--- a/app/pages/flightlab/medienstationen/learn-pfd.vue
+++ b/app/pages/flightlab/medienstationen/learn-pfd.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="pageRoot" class="min-h-screen bg-[#070d1a] text-white flex flex-col overflow-hidden">
+  <div ref="pageRoot" class="h-screen bg-[#070d1a] text-white flex flex-col overflow-hidden">
     <!-- Global Progress Bar -->
     <div class="fixed top-0 left-0 right-0 z-50 h-1 bg-white/5">
       <div
@@ -152,7 +152,7 @@
         :style="layoutGridStyle"
       >
         <!-- 3D Aircraft Model -->
-        <div class="relative rounded-2xl overflow-hidden border border-white/5 bg-[#050a15] min-h-0">
+        <div class="relative rounded-2xl overflow-hidden border border-white/5 bg-[#050a15] min-h-[200px]">
           <ClientOnly>
             <PfdAircraftModel
               :pitch="fbw.state.pitch"
@@ -171,7 +171,7 @@
         </div>
 
         <!-- PFD Instruments -->
-        <div class="relative flex items-center justify-center rounded-2xl overflow-hidden border border-white/5 bg-[#030712] min-h-0">
+        <div class="relative flex items-center justify-center rounded-2xl overflow-hidden border border-white/5 bg-[#030712] min-h-[200px]">
           <!-- Black screen when no elements visible -->
           <Transition name="fade-scale">
             <div