Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 3x | <template>
<FlowsHeader />
<FlowsSidebar />
<main class="main-content">
<slot />
</main>
</template>
<script setup lang="ts">
import FlowsHeader from './FlowsHeader.vue'
import FlowsSidebar from './FlowsSidebar.vue'
// Disable automatic attribute inheritance since we have multiple root elements
defineOptions({
inheritAttrs: false
})
</script>
<style scoped>
.main-content {
margin-left: 125px;
margin-top: 74px;
padding: 0;
height: calc(100vh - 74px);
display: flex;
flex-direction: column;
width: calc(100% - 125px);
max-width: calc(100% - 125px);
box-sizing: border-box;
background: white;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Mobile layout */
@media (max-width: 767px) {
.main-content {
margin-left: 0;
margin-top: 62px;
padding-bottom: 48px; /* Space for bottom nav */
width: 100%;
max-width: 100%;
min-height: auto; /* Allow natural content height */
overflow-x: hidden;
}
}
</style>
|