[layout] main page moved to top, fixed handed

dist/styles/sass.css

@@ -535,8 +535,20 @@ li .leaf:hover a.settings {
   color: black;
 }
 
-.forest-layout-raw-tree {
-  padding-top: 60px;
+.forest-layout {
+  background-color: #fff;
+  position: fixed;
+  top: 3.7em;
+  width: 15%;
+  z-index: 999;
+}
+
+.left-handed .forest-layout {
+  left: 80%;
+}
+
+.right-handed .forest-layout {
+  left: 2%;
 }
 
 .code-editor .editor .code-area {
@@ -646,22 +658,42 @@ li .leaf:hover a.settings {
   cursor: pointer;
 }
 
-.side-panel {
+.left-handed .side-panel {
+  left: 2%;
+  padding: 0.3em;
+  position: fixed;
+  top: 3.7em;
+  background-color: #fff;
+  width: 28%;
+}
+.left-handed .side-panel .header {
+  float: left;
+}
+.left-handed .side-panel .corpus-doc-view .annotated-field-wrapper .annotated-field-runs {
+  max-height: 200px;
+  overflow-y: scroll;
+}
+.left-handed .side-panel .corpus-doc-view .list-group .list-group-item-heading {
+  display: inline-block;
+  width: 60px;
+}
+
+.right-handed .side-panel {
   left: 70%;
-  padding: 5px;
+  padding: 0.3em;
   position: fixed;
-  top: 60px;
+  top: 3.7em;
   background-color: #fff;
   width: 28%;
 }
-.side-panel .header {
+.right-handed .side-panel .header {
   float: right;
 }
-.side-panel .corpus-doc-view .annotated-field-wrapper .annotated-field-runs {
+.right-handed .side-panel .corpus-doc-view .annotated-field-wrapper .annotated-field-runs {
   max-height: 200px;
   overflow-y: scroll;
 }
-.side-panel .corpus-doc-view .list-group .list-group-item-heading {
+.right-handed .side-panel .corpus-doc-view .list-group .list-group-item-heading {
   display: inline-block;
   width: 60px;
 }

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;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACrFJ;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;EACE;;;ACpJE;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;;;AACF;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAER;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;;;ACjFF;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","file":"sass.css"}
+{"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;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACrFJ;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;EACE;EACA;EACA;EACA;EACA;;;AAEA;EACE;;;AAEF;EACE;;;AC9JA;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","file":"sass.css"}
\ No newline at end of file

src/Gargantext/Components/Forest.purs

 module Gargantext.Components.Forest
   ( forest
+  -- , forestLayout
+  -- , forestLayoutWithTopBar
+  -- , forestLayoutMain
+  -- , forestLayoutRaw
   , forestLayout
-  , forestLayoutWithTopBar
-  , forestLayoutMain
-  , forestLayoutRaw
   , Common
   , Props
   ) where
 
+import Gargantext.Prelude
+
 import Data.Array as A
 import Data.Maybe (Maybe, fromMaybe)
-import Data.Tuple.Nested ((/\))
-import Reactix as R
-import Reactix.DOM.HTML as H
-import Record.Extra as RX
-import Toestand as T
-
 import Gargantext.AsyncTasks as GAT
-import Gargantext.Components.Forest.Tree (treeLoader)
+import Gargantext.Components.Forest.Tree (doSearch, treeLoader)
 import Gargantext.Components.TopBar (topBar)
 import Gargantext.Ends (Frontends, Backend)
-import Gargantext.Prelude
 import Gargantext.Routes (AppRoute)
 import Gargantext.Sessions (Session(..), Sessions, OpenNodes, unSessions)
 import Gargantext.Types (Handed, reverseHanded, switchHanded)
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Toestand as T2
+import Reactix as R
+import Reactix.DOM.HTML as H
+import Record.Extra as RX
+import Toestand as T
 
 here :: R2.Here
 here = R2.here "Gargantext.Components.Forest"
@@ -56,7 +56,6 @@ type TreeExtra = (
 
 forest :: R2.Component Props
 forest = R.createElement forestCpt
-
 forestCpt :: R.Component Props
 forestCpt = here.component "forest" cpt where
   cpt props@{ backend
@@ -86,7 +85,7 @@ forestCpt = here.component "forest" cpt where
     -- TODO If `reloadForest` is set, `reload` state should be updated
     -- TODO fix tasks ref
     pure $ H.div { className: "forest " <> if showTree' then "" else "d-none" }
-      (A.cons (plus handed' showLogin) (trees handed' sessions'))
+      (A.cons (plus { handed, showLogin }) (trees handed' sessions'))
     where
       common = RX.pick props :: Record Common
       trees handed' sessions' = (tree handed') <$> unSessions sessions'
@@ -102,9 +101,19 @@ forestCpt = here.component "forest" cpt where
                    , session: s
                    , tasks } []
 
-plus :: Handed -> T.Box Boolean -> R.Element
-plus handed showLogin = H.div { className: "row" }
-  [ H.button { className: buttonClass
+type Plus =
+  ( handed    :: T.Box Handed
+  , showLogin :: T.Box Boolean )
+
+plus :: R2.Leaf Plus
+plus p = R.createElement plusCpt p []
+plusCpt :: R.Component Plus
+plusCpt = here.component "plus" cpt where
+  cpt { handed, showLogin } _ = do
+    handed' <- T.useLive T.unequal handed
+
+    pure $ H.div { className: "row" }
+      [ H.button { className: buttonClass handed'
                 , on: { click }
                 , title }
           [ H.div { className: divClass } [ H.text " Log in/out " ] -- fa-lg
@@ -120,89 +129,13 @@ plus handed showLogin = H.div { className: "row" }
         T.write_ true showLogin
       title = "Add or remove connections to the server(s)."
       divClass = "fa fa-universal-access"
-    buttonClass =
-      "btn btn-primary col-5 " <> switchHanded "mr-1 ml-auto" "ml-1 mr-auto" handed
-
+      buttonClass handed' =
+        "btn btn-primary col-5 " <> 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 props@{ handed } children =
-    pure $ R.fragment
-      [ topBar { handed } []
-      , forestLayoutMain props children ]
-
--- Renders its first child component in the top bar and the rest in
--- the main view.
-forestLayoutWithTopBar :: R2.Component Props
-forestLayoutWithTopBar = R.createElement forestLayoutWithTopBarCpt
-
-forestLayoutWithTopBarCpt :: R.Component Props
-forestLayoutWithTopBarCpt = here.component "forestLayoutWithTopBar" cpt where
-  cpt props@{ handed } children = do
-    let { head: topBarChild, tail: mainChildren } =
-          fromMaybe { head: H.div {} [], tail: [] } $ A.uncons children
-    pure $ R.fragment
-      [ topBar { handed } [ topBarChild ]
-      , forestLayoutMain props mainChildren ]
-
-forestLayoutMain :: R2.Component Props
-forestLayoutMain = R.createElement forestLayoutMainCpt
-
-forestLayoutMainCpt :: R.Component Props
-forestLayoutMainCpt = here.component "forestLayoutMain" cpt where
-  cpt props@{ reloadMainPage } children =
-    pure $ forestLayoutRaw props [ mainPage {} children ]
-
-forestLayoutRaw :: R2.Component Props
-forestLayoutRaw = R.createElement forestLayoutRawCpt
-
-forestLayoutRawCpt :: R.Component Props
-forestLayoutRawCpt = here.component "forestLayoutRaw" cpt where
-  cpt p@{ backend
-        , forestOpen
-        , frontends
-        , reloadForest
-        , reloadMainPage
-        , reloadRoot
-        , route
-        , sessions
-        , showTree
-        , showLogin
-        , tasks } children = do
-    handed' <- T.useLive T.unequal p.handed
-
-    pure $ R2.row $ reverseHanded handed' $
-      [ H.div { className: "col-md-2 forest-layout-raw-tree" }
-         [ forest' p.handed ]
-      ] <> children
-      where
-        forest' handed =
-          forest { backend
-                 , frontends
-                 , forestOpen
-                 , handed
-                 , reloadForest
-                 , reloadMainPage
-                 , reloadRoot
-                 , route
-                 , sessions
-                 , showTree
-                 , showLogin
-                 , tasks } []
-
-mainPage :: R2.Component ()
-mainPage = R.createElement mainPageCpt
-
--- mainPageCpt :: R.Memo ()
--- mainPageCpt = R.memo (here.component "mainPage" cpt) where
-mainPageCpt :: R.Component ()
-mainPageCpt = here.component "mainPage" cpt
-  where
-    cpt _ children = do
-      pure $ H.div { className: "col-md-10" }
-        [ H.div { id: "page-wrapper" }
-          [ H.div { className: "container-fluid" } children ]
-        ]
+  cpt p _ = do
+    pure $ H.div { className: "forest-layout" }
+      [ forest p [] ]

src/Gargantext/Components/MainPage.purs

+module Gargantext.Components.MainPage where
+
+import Reactix as R
+import Reactix.DOM.HTML as H
+
+import Gargantext.Prelude
+
+import Gargantext.Utils.Reactix as R2
+
+here :: R2.Here
+here = R2.here "Gargantext.Components.MainPage"
+
+type MainPage = ()
+  -- ( mClassName :: Maybe String )
+
+mainPage :: R2.Component MainPage
+mainPage = R.createElement mainPageCpt
+mainPageCpt :: R.Component MainPage
+mainPageCpt = here.component "mainPage" cpt
+  where
+    cpt { } children = do
+      pure $ H.div {}
+        [ H.div { id: "page-wrapper" }
+          [ H.div { className: "container-fluid" } children ]
+        ]

src/sass/_styles.sass

 .cache-toggle
   cursor: pointer
-.side-panel
+.left-handed
+  .side-panel
+    //background-color: $dark
+    left: 2%
+    padding: 0.3em
+    position: fixed
+    top: 3.7em
+    background-color: #fff
+    width: 28%
+    .header
+      float: left
+    .corpus-doc-view
+      .annotated-field-wrapper
+        .annotated-field-runs
+          max-height: 200px
+          overflow-y: scroll
+      .list-group
+        .list-group-item-heading
+          display: inline-block
+          width: 60px
+.right-handed
+  .side-panel
     //background-color: $dark
     left: 70%
-  padding: 5px
+    padding: 0.3em
     position: fixed
-  top: 60px
+    top: 3.7em
     background-color: #fff
     width: 28%
     .header

src/sass/_tree.sass

@@ -168,5 +168,15 @@ li
   .ok-to-use
     color: black
 
-.forest-layout-raw-tree
-  padding-top: 60px
+.forest-layout
+  background-color: #fff
+  position: fixed
+  top: 3.7em
+  width: 15%
+  z-index: 999
+.left-handed
+  .forest-layout
+    left: 80%
+.right-handed
+  .forest-layout
+    left: 2%