fix(learn-pfd): use h-screen and min-h for proper grid layout height

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>
This commit is contained in:
itsrubberduck
2026-02-20 23:18:32 +01:00
parent c7a64521f6
commit 4404bd168a

View File

@@ -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