<script setup lang="ts">
import {Link} from "@inertiajs/vue3";
import MainHeader from "@/Components/FlightsGoneBy/MainHeader.vue";
import MainFooter from "@/Components/FlightsGoneBy/MainFooter.vue";
import Radar from "@/Components/FlightsGoneBy/Radar.vue";
</script>

<template>
    <Radar>
        <div class="layoutContainer">
            <MainHeader />
            <main id="pageContainer">
                <slot />
            </main>
            <MainFooter />
        </div>
    </Radar>
</template>

<style scoped>
.layoutContainer {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--text);
}

main {
    flex: 1 0 90dvh;   /* THIS is the key */
    min-height: 0;
    padding: 1rem;
    background: var(--surface-alt);
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


</style>
