Merge branch 'main' into web/v21.0.0

Author: johnman

how-to/web-layout/README.md

@@ -66,7 +66,7 @@ fin.Platform.Layout.init({ layoutManagerOverride, container: PARENT_CONTAINER })
 
 This allows us to call a function in the LayoutManager class called applyLayoutSnapshot that takes a container element, id string for its name, and a layout object to inject your snapshot layout in the desired container in the view.
 
-By overriding some of the existing layout functions that you might be used to if you've used our Platform API before, we can now pass an larger object (found in /public/layouts/default.layout.fin.json) with multiple layouts, and iterate the creation of them into the DOM.
+By overriding some of the existing layout functions that you might be used to if you've used our Platform API before, we can now pass a larger object (found in /public/layouts/default.layout.fin.json) with multiple layouts, and iterate the creation of them into the DOM.
 
 ```javascript
 function layoutManagerOverride(Base: LayoutManagerConstructor):
@@ -97,3 +97,13 @@ function layoutManagerOverride(Base: LayoutManagerConstructor):
      };
    };
 ```
+
+### Required CSS styles
+
+If the layout does not automatically resize to fill the viewport (both growing and shrinking), then the container does not have the correct css styles applied. 
+
+The parent of each layout must have defined dimensions - not proportional sizing such as flexbox or percentage values.
+
+In this example see the `.openfin-layout` class in [app.css](public/common/style/app.css) for how to achieve this. 
+
+![Required CSS](./docs/css-classes.png)

how-to/web-layout/client/src/provider.ts

@@ -181,7 +181,7 @@ async function createLayout(
 	// Create a new div container for the layout.
 	const container = document.createElement("div");
 	container.id = layoutName;
-	container.className = "col layout-container";
+	container.className = "col openfin-layout";
 	container.style.display = order === 0 ? "block" : "none";
 	PARENT_CONTAINER?.append(container);
 

how-to/web-layout/docs/css-classes.png

@@ -41,15 +41,16 @@
 	--brand-success: var(--theme-status-success, #35c759);
 }
 
-.left-panel {
-	width: var(--left-panel-width);
-}
-
-.layout-container {
+/* The parent of the lm_root class must have defined dimensions - not proportional sizing such as flexbox or percent values */
+.openfin-layout {
 	height: calc(100dvh - var(--header-height) - (var(--body-padding) * 2) - var(--tab-height));
 	width: calc(100dvw - var(--left-panel-width) - (var(--body-padding) * 2));
 }
 
+.left-panel {
+	width: var(--left-panel-width);
+}
+
 .header {
 	height: var(--header-height);
 }