From 7386c55952ff641fae8fa33c4c8fd595fdd9ba7e Mon Sep 17 00:00:00 2001
From: Madeorsk <madeorsk@protonmail.com>
Date: Mon, 23 Sep 2024 22:57:17 +0200
Subject: [PATCH] Change subapp style to keep its header fixed on the screen.

---
 demo/DemoApp.tsx                   | 22 ++++++++++++++++++++++
 package.json                       |  2 +-
 src/styles/components/_subapp.less |  7 +++++++
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/demo/DemoApp.tsx b/demo/DemoApp.tsx
index c8cbdc9..25b2b29 100644
--- a/demo/DemoApp.tsx
+++ b/demo/DemoApp.tsx
@@ -500,6 +500,28 @@ export function DemoApp()
 				<button onClick={easySubapp}>
 					Easy with callable subapp
 				</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>
 
 			<h3>Modals</h3>
diff --git a/package.json b/package.json
index 5eb600f..36ae7ef 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-	"version": "1.3.1",
+	"version": "1.3.2",
 	"name": "@kernelui/core",
 	"description": "Kernel UI Core.",
 	"scripts": {
diff --git a/src/styles/components/_subapp.less b/src/styles/components/_subapp.less
index 246bf55..0534c3a 100644
--- a/src/styles/components/_subapp.less
+++ b/src/styles/components/_subapp.less
@@ -7,6 +7,9 @@
 	top: @subapp-margin;
 	left: @subapp-margin;
 
+	display: flex;
+	flex-direction: column;
+
 	width: calc(100% - (2 * @subapp-margin));
 	height: calc(100% - (2 * @subapp-margin));
 	border-radius: 0.25em;
@@ -64,6 +67,10 @@
 
 	> main
 	{
+		flex: 1;
+
 		padding: 1em;
+
+		overflow: auto;
 	}
 }