Change subapp style to keep its header fixed on the screen.
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
Madeorsk 2024-09-23 22:57:17 +02:00
parent 8b57732722
commit aef455c989
Signed by: Madeorsk
GPG key ID: 677E51CA765BB79F
2 changed files with 29 additions and 0 deletions

View file

@ -500,6 +500,28 @@ export function DemoApp()
<button onClick={easySubapp}> <button onClick={easySubapp}>
Easy with callable subapp Easy with callable subapp
</button> </button>
<button onClick={() => {
subapps.open(
<Subapp title={"Very long subapp"}>
<Card><p>A test content.</p></Card>
<Card><p>A test content.</p></Card>
<Card><p>A test content.</p></Card>
<Card><p>A test content.</p></Card>
<Card><p>A test content.</p></Card>
<Card><p>A test content.</p></Card>
<Card><p>A test content.</p></Card>
<Card><p>A test content.</p></Card>
<Card><p>A test content.</p></Card>
<Card><p>A test content.</p></Card>
<Card><p>A test content.</p></Card>
<Card><p>A test content.</p></Card>
<Card><p>A test content.</p></Card>
<Card><p>A test content.</p></Card>
</Subapp>
)
}}>A long subapp
</button>
</Card> </Card>
<h3>Modals</h3> <h3>Modals</h3>

View file

@ -7,6 +7,9 @@
top: @subapp-margin; top: @subapp-margin;
left: @subapp-margin; left: @subapp-margin;
display: flex;
flex-direction: column;
width: calc(100% - (2 * @subapp-margin)); width: calc(100% - (2 * @subapp-margin));
height: calc(100% - (2 * @subapp-margin)); height: calc(100% - (2 * @subapp-margin));
border-radius: 0.25em; border-radius: 0.25em;
@ -64,6 +67,10 @@
> main > main
{ {
flex: 1;
padding: 1em; padding: 1em;
overflow: auto;
} }
} }