Resolve layout shrink (#14)

Co-authored-by: Ray Cashmore <[email protected]>
built-on-openfin · Sep 10, 2024 · cf14631 · cf14631
1 parent 603ecf8
commit cf14631
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,5 @@ node_modules
 **/public/js/*.bundle.js
 **/public/js/*.bundle.js.map
 **/.DS_Store
-**/node_modules
+**/node_modules
+.idea
diff --git a/how-to/web-interop-support-context-and-intents/client/src/platform/layout/layout-override.ts b/how-to/web-interop-support-context-and-intents/client/src/platform/layout/layout-override.ts
@@ -218,7 +218,7 @@ export function makeOverride(
 				// Create a new div container for the layout.
 				const container = document.createElement("div");
 				container.id = layoutName;
-				container.className = "col fill layout-container hidden";
+				container.className = "col layout-container workspace-container hidden";
 				this._layoutContainer?.append(container);
 				await fin.Platform.Layout.create({ layoutName, layout, container });
 				if (entry === length) {

diff --git a/how-to/web-interop-support-context-and-intents/public/common/style/app.css b/how-to/web-interop-support-context-and-intents/public/common/style/app.css
@@ -17,6 +17,8 @@
 	--brand-success: var(--theme-status-success, #35c759);
 
 	accent-color: var(--brand-primary);
+
+	--header-height: 60px;
 }
 
 .theme-light {
@@ -166,6 +168,14 @@ main {
 	min-height: 100px;
 }
 
+.header {
+	height: var(--header-height);
+}
+
+.workspace-container {
+	height: calc(100dvh - var(--header-height));
+}
+
 a {
 	color: var(--brand-primary);
 	font-size: 12px;
@@ -920,6 +930,14 @@ td,
 	gap: 20px;
 }
 
+.width-viewport {
+	width: 100dvw;
+}
+
+.height-viewport {
+	height: 100dvh;
+}
+
 .width-full {
 	width: 100%;
 }

diff --git a/how-to/web-interop-support-context-and-intents/public/platform/provider.html b/how-to/web-interop-support-context-and-intents/public/platform/provider.html
@@ -12,8 +12,8 @@
 		<script defer="defer" src="../js/provider.bundle.js"></script>
 		<link rel="manifest" href="../manifest.json" />
 	</head>
-	<body class="col fill gap20">
-		<header class="row spread middle">
+	<body class="col width-viewport height-viewport">
+		<header class="row spread middle header">
 			<div class="col">
 				<h1 id="title">OpenFin - Support Context & Intents</h1>
 				<h1 id="subTitle" class="tag">
@@ -36,10 +36,6 @@ <h1 id="subTitle" class="tag">
 				<img id="logo" src="../common/images/icon-blue.png" alt="OpenFin" height="40px" />
 			</div>
 		</header>
-		<main class="row fill gap10">
-			<div class="row fill" id="main-page">
-				<div id="layout_container" class="col fill"></div>
-			</div>
-		</main>
+		<main id="layout_container" class="col workspace-container"></main>
 	</body>
 </html>