[sidebar] sidebar visibility issues

da677223 · arturo · 43f38465 · da677223 · da677223 · da677223
Commit da677223 authored Jul 06, 2021 by arturo
12 changed files
--- a/dist/index.html
+++ b/dist/index.html
@@ -11,7 +11,7 @@
        <style> * {margin: 0; padding: 0; list-style: none;} </style>
    </head>
    <body>
-        <div id="app" class ="container-fluid"></div>
+        <div id="app"></div>
        <div id="portal"></div>
        <script src="bundle.js"></script>
        <script src='https://visio.gargantext.org/external_api.js'></script> <!-- FIXME to be removed -->

--- a/dist/styles/sass.css
+++ b/dist/styles/sass.css
@@ -4,6 +4,14 @@
 /*     padding-top: 15px */
 /*     padding-bottom: 15px */
 /*     float: none */
+#dafixedtop {
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 910;
+}
+
 #corporatop.nav-tabs > li {
  padding-left: 1;
  padding-right: 1;
@@ -170,10 +178,6 @@
  top: 50px;
 }

-#dafixedtop {
-  z-index: 910;
-}
-
 #logo-designed {
  border: 15px;
 }
@@ -183,7 +187,10 @@
 }

 #page-wrapper {
-  margin-top: 96px;
+  padding-top: 40px;
+  padding-left: 16px;
+  padding-right: 16px;
+  width: 100%;
 }

 #user-page-header {
@@ -518,6 +525,9 @@ li .leaf:hover a.settings {
  opacity: var(--over50, 0);
 }

+#node-popup-tooltip {
+  position: fixed;
+}
 #node-popup-tooltip .tree .node {
  margin-top: 5px;
 }
@@ -525,6 +535,18 @@ li .leaf:hover a.settings {
  padding-left: 15px;
 }

+.right-handed #node-popup-tooltip {
+  top: 50%;
+  left: 16.6666666667%;
+  transform: translateY(-50%);
+}
+
+.left-handed #node-popup-tooltip {
+  top: 50%;
+  right: 16.6666666667%;
+  transform: translateY(-50%);
+}
+
 .panel-actions .almost-useable {
  color: orange;
 }
@@ -540,20 +562,66 @@ li .leaf:hover a.settings {
  overflow-y: scroll;
 }

+.forest-layout-wrapper {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .forest-layout {
-  background-color: #fff;
-  position: fixed;
-  top: 3.7em;
-  width: 15%;
+  padding-top: 8px;
  z-index: 909;
+  position: fixed;
+  height: calc(100vh - 56px);
+  width: 100%;
+  max-width: inherit;
+  scrollbar-width: none;
+  overflow-y: scroll;
+  overflow-x: visible;
+  transition: border 150ms;
+}
+.forest-layout::-webkit-scrollbar {
+  display: none;
+}
+
+.right-handed .forest-layout {
+  border-right: 1px solid #FFFFFF;
+}
+.right-handed .forest-layout:hover {
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
 }

 .left-handed .forest-layout {
-  left: 80%;
+  border-left: 1px solid #FFFFFF;
+}
+.left-handed .forest-layout:hover {
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.forest-layout-teaser {
+  pointer-events: none;
+  position: fixed;
+  bottom: 0;
+  height: 24px;
+  width: calc(16.6666666667% - 1px);
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%);
+}
+
+.right-handed .forest-layout-teaser {
+  left: 0;
+}
+
+.left-handed .forest-layout-teaser {
+  right: 0;
+}
+
+.left-handed .forest-layout {
+  padding-left: 8px;
+  padding-right: 16px;
 }

 .right-handed .forest-layout {
-  left: 2%;
+  padding-left: 16px;
+  padding-right: 8px;
 }

 .code-editor .editor .code-area {
@@ -777,6 +845,20 @@ ul li {
  padding-top: 100px;
 }

+#app {
+  width: 100%;
+}
+
+.router-inner {
+  display: flex;
+}
+.router-inner.left-handed {
+  flex-direction: row;
+}
+.router-inner.right-handed {
+  flex-direction: row;
+}
+
 .range {
  width: 400px;
  /* some space for the right knob */

--- a/dist/styles/sass.css.map
+++ b/dist/styles/sass.css.map
-{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass","../../src/sass/_folder_view.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EAEE;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACtFJ;EAEE;;;AAQF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACzKF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGA;EACE;;AACF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAGN;EACE;;;AAIA;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AAGN;EACE;;AACF;EACE;;AACF;EACE;;;AAEJ;EAEE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEA;EACE;;;AAEF;EACE;;;ACnKA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtFZ;EACE;;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAER;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAEJ;EACE;;AACA;EACE;;;AAEJ;EACE;EACA;;;ACtGF;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACxBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBANyB;;AAkC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBANyB;;AA4C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB;;;ACRxB;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA","file":"sass.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass","../../src/sass/_folder_view.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACE;EACA;EACA;EACA;EAEA;;;AAEF;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;ACrDF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EAEE;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACjFJ;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACvKF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGA;EACE;;AACF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAGN;EACE;;;AAIA;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAEN;EAWE;;AAGE;EACE;;AAEA;EACE;;;AAUR;EAEE;EACA,MAFW;EAGX;;;AAEF;EAEE;EACA,OAFW;EAGX;;;AAGA;EACE;;AACF;EACE;;AACF;EACE;;;AAEJ;EAEE;EACA;;;AACF;EAEE;EACA;;;AAEF;EAGE;EACA;EAKA;EACA;EACA;EACA;EAGA;EACA;EACA;EAKA;;AAHA;EACE;;;AAKJ;EACE;;AAEA;EACE;;;AAEJ;EACE;;AAEA;EACE;;;AAIJ;EAKE;EACA;EACA;EACA,QAPS;EAQT;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACI;EACA;;;AACJ;EACI;EACA;;;AC1PA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtFZ;EACE;;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAER;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAEJ;EACE;;AACA;EACE;;;AAEJ;EACE;EACA;;;AAGF;EACE;;;AAEF;EACE;;AAEA;EACE;;AAEF;EACE;;;ACnHJ;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACxBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBANyB;;AAkC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBANyB;;AA4C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB;;;ACRxB;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA","file":"sass.css"}
\ No newline at end of file
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
        <style> * {margin: 0; padding: 0; list-style: none;} </style>
    </head>
    <body>
-        <div id="app" class ="container-fluid"></div>
+        <div id="app"></div>
        <div id="portal"></div>
        <script src="bundle.js"></script>
    </body>

--- a/src/Gargantext/Components/Forest.purs
+++ b/src/Gargantext/Components/Forest.purs
@@ -26,7 +26,7 @@ here :: R2.Here
 here = R2.here "Gargantext.Components.Forest"

 -- Shared by components here with Tree
-type Common = 
+type Common =
  ( frontends      :: Frontends
  , handed         :: T.Box Handed
  , reloadMainPage :: T2.ReloadS
@@ -42,7 +42,7 @@ type Props =
  , showLogin          :: T.Box Boolean
  , showTree           :: T.Box Boolean
  , tasks              :: T.Box GAT.Storage
-  | Common 
+  | Common
  )

 type TreeExtra = (
@@ -108,7 +108,7 @@ plusCpt = here.component "plus" cpt where
  cpt { backend, handed, showLogin } _ = do
    handed' <- T.useLive T.unequal handed

-    pure $ H.div { className: "row" }
+    pure $ H.div {}
      [ H.button { className: buttonClass handed'
                , on: { click }
                , title }
@@ -128,12 +128,20 @@ plusCpt = here.component "plus" cpt where
      title = "Add or remove connections to the server(s)."
      divClass = "fa fa-universal-access"
      buttonClass handed' =
-        "btn btn-primary col-5 " <> switchHanded "mr-1 ml-auto" "ml-1 mr-auto" handed'
+        "btn btn-primary d-block " <> switchHanded "mr-1 ml-auto" "ml-1 mr-auto" handed'

 forestLayout :: R2.Component Props
 forestLayout = R.createElement forestLayoutCpt
 forestLayoutCpt :: R.Component Props
 forestLayoutCpt = here.component "forestLayout" cpt where
-  cpt p _ = do
-    pure $ H.div { className: "forest-layout" }
-      [ forest p [] ]
+  cpt p _ = pure $
+
+    H.div { className: "forest-layout-wrapper col-md-2" }
+    [
+      H.div { className: "forest-layout" }
+      [
+        forest p []
+      ,
+        H.div { className: "forest-layout-teaser" } []
+      ]
+    ]
--- a/src/Gargantext/Components/MainPage.purs
+++ b/src/Gargantext/Components/MainPage.purs
@@ -2,15 +2,11 @@ module Gargantext.Components.MainPage where

 import Gargantext.Prelude

-import Data.Tuple.Nested ((/\))
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Toestand as T
-import Web.HTML.Event.EventTypes (offline)

 import Gargantext.Components.App.Data (Boxes)
-import Gargantext.Routes as GR
-import Gargantext.Types as GT
 import Gargantext.Utils.Reactix as R2

 here :: R2.Here
@@ -31,17 +27,9 @@ mainPageCpt = here.component "mainPage" cpt
      handed' <- T.useLive T.unequal handed
      route' <- T.useLive T.unequal route

-      let classNameOffsetPre /\ className /\ classNameOffsetPost = case route' of
-            GR.PGraphExplorer _ _ -> "" /\ "col-md-12" /\ ""
-            _                     -> case handed' of
-              GT.LeftHanded  -> "" /\ "col-md-10" /\ "col-md-2"
-              GT.RightHanded -> "col-md-2" /\ "col-md-10" /\ ""
-
-      pure $ H.div { className: "row" }
-        [ H.div { className: classNameOffsetPre } []
-        , H.div { className }
-          [ H.div { id: "page-wrapper" }
-            [ H.div { className: "container-fluid" } children ]
-          ]
-        , H.div { className: classNameOffsetPost } []
+      pure $
+
+        H.div { id: "page-wrapper" }
+        [
+          H.div { className: "container-fluid" } children
        ]
--- a/src/Gargantext/Components/Router.purs
+++ b/src/Gargantext/Components/Router.purs
@@ -68,7 +68,7 @@ routerCpt = here.component "router" cpt where
    pure $ R.fragment
      ([ loginModal { boxes }
       , topBar { boxes } ] <>
-       [ H.div { className: handedClassName } $ reverseHanded handed' $
+       [ H.div { className: handedClassName <> " router-inner" } $ reverseHanded handed' $
         [ forest { boxes }
         , mainPage { boxes }
         , sidePanel { boxes }

--- a/src/Gargantext/Components/TopBar.purs
+++ b/src/Gargantext/Components/TopBar.purs
 module Gargantext.Components.TopBar where

 import Data.Foldable (intercalate)
-import Data.Tuple.Nested ((/\))
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Toestand as T
@@ -27,7 +26,7 @@ topBarCpt = here.component "topBar" cpt
    cpt { handed, showTree } children = do
      handed' <- T.useLive T.unequal handed

-      pure $ H.div { className: "navbar navbar-expand-lg navbar-dark bg-dark fixed-top"
+      pure $ H.div { className: "navbar navbar-expand-lg navbar-dark bg-dark"
                   , id: "dafixedtop"
                   , role: "navigation"
                   }

--- a/src/sass/_login.sass
+++ b/src/sass/_login.sass
-#dafixedtop
-  // correction for the popover
-  z-index: 910
-  // height: 60px
-
 //.logoSmall
 //  line-height: 15px
  // height: 10px
@@ -15,7 +10,10 @@
    border: 3px solid white

 #page-wrapper
-  margin-top : 96px
+  padding-top: 40px
+  padding-left: 16px
+  padding-right: 16px
+  width: 100%

 #user-page-header
  border-bottom : 1px solid black

--- a/src/sass/_menu.sass
+++ b/src/sass/_menu.sass
@@ -6,6 +6,14 @@
 /*     padding-bottom: 15px
 /*     float: none

+#dafixedtop
+  position: sticky
+  top: 0
+  left: 0
+  right: 0
+  // correction for the popover
+  z-index: 910
+
 #corporatop.nav-tabs > li
    padding-left: 1
    padding-right: 1

--- a/src/sass/_styles.sass
+++ b/src/sass/_styles.sass
@@ -101,3 +101,16 @@ ul
 .join-button
  padding-bottom: 100px
  padding-top: 100px
+
+
+#app
+  width: 100%
+
+.router-inner
+  display: flex
+
+  &.left-handed
+    flex-direction: row
+
+  &.right-handed
+    flex-direction: row
--- a/src/sass/_tree.sass
+++ b/src/sass/_tree.sass
@@ -153,6 +153,18 @@ li
      opacity: var(--over50, 0)

 #node-popup-tooltip
+  // @XXX "react-awesome-popover" lack of parent host parameter
+  //
+  //      hence, the popover will be added from within the overflow context
+  //      of component where its CTA lies, causing an issue with the hidden
+  //      overflow of its parent component
+  //
+  //      to avoid a truncated popover, this position workaround has to be set
+  //      (so the popover will be hoisted to the overflow context of the window)
+  //
+  // @link https://gitlab.iscpif.fr/gargantext/purescript-gargantext/issues/302
+  position: fixed
+
  .tree
    .node
      margin-top: 5px
@@ -160,6 +172,26 @@ li
      .node
        padding-left: 15px

+// @XXX "react-awesome-popover" lack of parent host parameter
+//
+//       as the container where the popover will be appended is actually a
+//       a heighthy sidebar (which a large is hidden with a scrollbar),
+//       the library tends to add the tooltip position in the middle of the
+//       sidebar height: which can be off screen
+//
+//       this workaround appends the tooltip in a static position
+.right-handed #node-popup-tooltip
+  $offset-x: 16.6666666667% // simulate "col-2" sidebar attributes
+  top: 50%
+  left: $offset-x
+  transform: translateY(-50%)
+
+.left-handed #node-popup-tooltip
+  $offset-x: 16.6666666667% // simulate "col-2" sidebar attributes
+  top: 50%
+  right: $offset-x
+  transform: translateY(-50%)
+
 .panel-actions
  .almost-useable
    color: orange
@@ -172,16 +204,71 @@ li
  // empirical value (see issue #308)
  max-height: 50vh
  overflow-y: scroll
+.forest-layout-wrapper
+  // removing Bootstrap "col" padding
+  padding-left: 0
+  padding-right: 0

 .forest-layout
-  background-color: #fff
-  position: fixed
-  top: 3.7em
-  width: 15%
+  $offset-y: 56px
+
+  padding-top: 8px
  z-index: 909
-.left-handed
-  .forest-layout
-    left: 80%
-.right-handed
-  .forest-layout
-    left: 2%
+
+  // make the sidebar a scrollable component
+  // `max-width` rule is an addition due to Bootstrap "col-2" applied on its
+  // parent
+  position: fixed
+  height: calc(100vh - #{ $offset-y })
+  width: 100%
+  max-width: inherit
+
+  // avoiding ugly scrollbar
+  scrollbar-width: none
+  overflow-y: scroll
+  overflow-x: visible
+
+  &::-webkit-scrollbar
+    display: none
+
+  transition: border 150ms
+
+// UX addition: visually delimiting the sidebar on hover
+.right-handed .forest-layout
+  border-right: 1px solid #FFFFFF
+
+  &:hover
+    border-right: 1px solid rgba(0, 0, 0, 0.1)
+
+.left-handed .forest-layout
+  border-left: 1px solid #FFFFFF
+
+  &:hover
+    border-left: 1px solid rgba(0, 0, 0, 0.1)
+
+// UX best pratice: when a lengthy column is overflowy hidden (with a scroll), a teaser
+// UI element shows to the user that a scroll is possible
+.forest-layout-teaser
+  $height: 24px             // ~line-height to 1.5
+  $width: 16.6666666667%    // simulate "col-2" sidebar attributes
+  $minus-parent-border: 1px // border size of the sidebar on hover
+
+  pointer-events: none
+  position: fixed
+  bottom: 0
+  height: $height
+  width: calc(#{ $width } - #{ $minus-parent-border})
+  background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 45%)
+
+.right-handed .forest-layout-teaser
+  left: 0
+
+.left-handed .forest-layout-teaser
+  right: 0
+
+.left-handed .forest-layout
+    padding-left: 8px
+    padding-right: 16px
+.right-handed .forest-layout
+    padding-left: 16px
+    padding-right: 8px