better scroll + back-header on mobile

This commit is contained in:
Henry Jameson 2025-11-24 20:26:13 +02:00
commit b3bf4fca75
2 changed files with 17 additions and 5 deletions

View file

@ -161,9 +161,13 @@ export default {
return (
<div class={classes} >
{header}
<div class={ ['tab-content', props['full-width'] ? '-full-width' : null].join(' ') } >
{renderSlot}
<div class="tab-mobile-header">
{header}
</div>
<div class="tab-slot-wrapper">
<div class={ ['tab-content', props['full-width'] ? '-full-width' : null].join(' ') } >
{renderSlot}
</div>
</div>
</div>
)

View file

@ -30,6 +30,7 @@
.tab-content {
align-self: center;
height: 100%;
&:not(.-full-width) {
max-width: 40em;
@ -52,10 +53,16 @@
}
}
.tab-content-wrapper {
.tab-slot-wrapper {
flex: 1 1 auto;
height: 100%;
overflow-y: auto;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.tab-content-wrapper {
flex: 1 1 auto;
height: 100%;
&.-hidden {
@ -85,6 +92,7 @@
> .contents {
display: block;
flex-grow: 1;
flex-shrink: 1;
}
> .tabs {