fix: Cleans up some of the flexbox styling overflow content heights (#683)

Resolves some overflow flexbox issues where the flexbox heights are not extending to the height of the scrolling app-content container.

Resolves AB#16458

src/App.scss

@@ -5,7 +5,7 @@
     &-shell {
         display: flex;
         flex-direction: column;
-        height: 100%;
+        height: 100vh;
     }
 
     &-main {
@@ -116,6 +116,8 @@
 
     &-content {
         flex-grow: 1;
+        display: flex;
+        flex-direction: column;
         overflow: auto;
     }
 }

src/react/components/common/condensedList/condensedList.scss

@@ -2,8 +2,8 @@
 
 .condensed-list {
     display: flex;
+    flex-grow: 1;
     flex-direction: column;
-    height: 100%;
 
     &-header {
         font-size: 80%;
@@ -17,7 +17,11 @@
     }
 
     &-body {
+        flex-grow: 1;
+        display: flex;
         overflow: auto;
+        flex-direction: column;
+        position: relative;
     }
 }
 

src/react/components/pages/appSettings/appSettingsPage.scss

@@ -1,7 +1,8 @@
 .app-settings-page {
     display: flex;
     flex-direction: row;
-    height: 100%;
+    flex-grow: 1;
+    min-height: fit-content;
 
     &-form {
         flex-grow: 1;

src/react/components/pages/connections/connectionsPage.scss

@@ -1,13 +1,16 @@
 .app-connections-page {
+    flex-grow: 1;
     display: flex;
     flex-direction: row;
-    height: 100%;
+    min-height: fit-content;
 
     &-list {
-        min-width: 20vw;
+        flex-basis: 20vw;
+        min-width: 250px;
+        max-width: 300px;
     }
 
     &-detail {
         flex-grow: 1;
     }
-}
+}

src/react/components/pages/editorPage/editorPage.scss

@@ -2,17 +2,17 @@
 @import "~video-react/styles/scss/video-react";
 
 .editor-page {
+    flex-grow: 1;
     display: flex;
     flex-direction: row;
     overflow: hidden;
-    height: 100%;
 
     &-sidebar {
+        display: flex;
         min-width: 290px;
 
         &-nav {
             width: 100%;
-            height: 100%;
         }
     }
 
@@ -134,8 +134,7 @@
 
 .asset-preview {
     display: flex;
-    flex: 1;
-    height: 100%;
+    flex-grow: 1;
 
     &-container {
         display: flex;

src/react/components/pages/homepage/homePage.scss

@@ -1,21 +1,23 @@
 @import '../../../../assets/sass/theme.scss';
 
 .app-homepage {
-    height: 100%;
+    flex-grow: 1;
     display: flex;
     flex-direction: row;
+    min-height: fit-content;
 
     &-main {
+        display: flex;
         flex-grow: 1;
 
         ul {
-            height: 100%;
             display: flex;
             flex-direction: row;
             align-items: center;
             justify-content: center;
             margin: auto;
-            
+            flex-wrap: wrap;
+
             padding: 0;
 
             li {
@@ -36,6 +38,8 @@
     }
 
     &-recent {
-        min-width: 20vw;
+        flex-basis: 20vw;
+        min-width: 250px;
+        max-width: 300px;
     }
-}
+}

src/react/components/pages/projectSettings/projectMetrics.tsx

@@ -50,14 +50,16 @@ export default class ProjectMetrics extends React.Component<IProjectMetricsProps
                     <i className="fas fa-chart-bar" />
                     <span>{strings.projectMetrics.title}</span>
                 </h6>
-                {this.state.loading &&
-                    <div className="loading">
-                        <i className="fas fa-circle-notch fa-spin fa-2x" />
-                    </div>
-                }
-                {!this.state.loading &&
-                    this.renderMetrics()
-                }
+                <div className="condensed-list-body">
+                    {this.state.loading &&
+                        <div className="loading">
+                            <i className="fas fa-circle-notch fa-spin fa-2x" />
+                        </div>
+                    }
+                    {!this.state.loading &&
+                        this.renderMetrics()
+                    }
+                </div>
             </div>
         );
     }

src/react/components/pages/projectSettings/projectSettingsPage.scss

@@ -1,25 +1,27 @@
 @import "../../../../assets/sass/theme.scss";
 
 .project-settings-page {
+    flex-grow: 1;
     display: flex;
     flex-direction: row;
-    height: 100%;
+    min-height: fit-content;
 
     &-settings {
         flex-grow: 1;
     }
 
     &-metrics {
+        display: flex;
+        flex-direction: column;
         flex-grow: 1;
         min-width: 325px;
         max-width: 400px;
         color: #fff;
 
         .loading {
-            display: flex;
-            height: 100%;
-            align-items: center;
-            justify-content: center;
+            position: absolute;
+            left: 50%;
+            top: 25%;
         }
 
         p {

src/react/components/shell/statusBar.scss

@@ -31,6 +31,6 @@
     }
 
     &-main {
-        flex: 1;
+        flex-grow: 1;
     }
 }

src/react/components/shell/titleBar.scss

@@ -24,13 +24,16 @@
     color: #ccc;
     display: flex;
     flex-direction: row;
-    align-items: center;
+    align-items: stretch;
 
     &-main {
         -webkit-app-region: drag;
         -webkit-user-select: none;
 
-        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        flex-grow: 1;
         text-align: center;
         font-size: 0.80em;
     }
@@ -80,7 +83,7 @@
     }
 
     &-label {
-        flex: 1;
+        flex-grow: 1;
     }
 
     &-accelerator {

src/react/components/shell/titleBar.tsx

@@ -84,7 +84,7 @@ export class TitleBar extends React.Component<ITitleBarProps, ITitleBarState> {
                 <div className="title-bar-controls">
                     {this.props.children}
                     {this.state.platform === PlatformType.Windows &&
-                        <ul className="ml-3">
+                        <ul>
                             <li title="Minimize" className="btn-window-minimize" onClick={this.minimizeWindow}>
                                 <i className="far fa-window-minimize" />
                             </li>