From 2e2803b7e26880e97b3ea9cf67b48fe8582900ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Henrik=20=C3=98verland?= <jan@dhis2.org>
Date: Tue, 1 Oct 2019 10:45:43 +0200
Subject: [PATCH] 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
---
 packages/app/src/components/App.css | 6 +++++-
 packages/app/src/components/App.js  | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/components/App.css b/packages/app/src/components/App.css
index 7c8d03a9a8..28916cd591 100644
--- 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
index 0afaf04acc..dc2e93ec41 100644
--- 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>