fix: viewport layout with visible interpretations panel (#323)

* set flex-basis on main-center to allocate remaining space for main-right * change main-right bg color to make SV interpretations look better
dhis2 · Oct 1, 2019 · 2e2803b · 2e2803b
1 parent f4f1ffb
commit 2e2803b
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/packages/app/src/components/App.css b/packages/app/src/components/App.css
@@ -27,6 +27,10 @@ body {
     flex-grow: 1;
 }
 
+.flex-basis-0 {
+    flex-basis: 0%;
+}
+
 /* Headerbar */
 
 .section-headerbar {
@@ -59,7 +63,7 @@ body {
 .main-right {
     flex: 1 1 0%;
     max-width: 380px;
-    background-color: #f4f6f8;
+    background-color: #f0f2f4;
     overflow-y: auto;
     overflow-x: hidden;
 }

diff --git a/packages/app/src/components/App.js b/packages/app/src/components/App.js
@@ -177,7 +177,7 @@ export class App extends Component {
                         <div className="main-left">
                             <DimensionsPanel />
                         </div>
-                        <div className="main-center flex-grow-1 flex-ct flex-dir-col">
+                        <div className="main-center flex-grow-1 flex-basis-0 flex-ct flex-dir-col">
                             <div className="main-center-layout">
                                 <Layout />
                             </div>