From ee2bed7c73b77176be745b5e9c3c1cd50c902eba Mon Sep 17 00:00:00 2001
From: ianguerin <ianguerin@gmail.com>
Date: Fri, 19 Jan 2024 16:33:19 -0800
Subject: [PATCH] Add CSS to support scrolling in layers toolbar in the Cesium
 map view

Set a fixed height for body element to force map view to appear on page.
Add some padding to allow for scrollbar in layers toolbar.
Fix issue with cutting off last layer in toolbar on narrow laptop
screen due to a hardcoded value for the header height.

GitHub issue: https://github.com/NCEAS/metacatui/issues/2242

temp commit with changes for PR comments
---
 src/css/map-view.css                | 7 ++++++-
 src/css/metacatui-common.css        | 7 +++++++
 src/js/themes/knb/css/metacatui.css | 5 +++++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/css/map-view.css b/src/css/map-view.css
index 1812de6fe..483f7de6c 100644
--- a/src/css/map-view.css
+++ b/src/css/map-view.css
@@ -180,7 +180,7 @@
   --headerHeight: 80px;
   position: relative;
   height: 100%;
-  min-height: calc(100vh - var(--headerHeight));
+  min-height: 100%;
   width: 100%;
   display: grid;
   box-sizing: border-box;
@@ -229,6 +229,8 @@
   top: 0;
   left: 0;
   height: 100%;
+  overflow: hidden;
+  width: min-content;
   /* required to be placed above map widget in firefox: */
   z-index: 1;
 }
@@ -395,6 +397,7 @@ represents 1 unit of the given distance measurement. */
   class .toolbar, is not hidden so that the links (tabs) are still visible when the
   toolbar is closed */
   display: none;
+  overflow: hidden;
 }
 
 .toolbar--open .toolbar__all-content {
@@ -408,10 +411,12 @@ represents 1 unit of the given distance measurement. */
   justify-content: center;
   /* hide unless the content section is active */
   display: none;
+  overflow: auto;
 }
 
 .toolbar__content--active {
   padding-top: 1rem;
+  padding-right: 1rem;
   display: flex;
 }
 
diff --git a/src/css/metacatui-common.css b/src/css/metacatui-common.css
index f786db5ce..d70ae04f3 100644
--- a/src/css/metacatui-common.css
+++ b/src/css/metacatui-common.css
@@ -4875,6 +4875,12 @@ i.toc-sub-item {
 * Portals
 ********************************************/
 
+.PortalView {
+  height: 100%;
+  display: grid;
+  grid-template-rows: 40px 0px 100fr 0px;
+}
+
 .portal-view{
   width: calc(100% + 80px);
   margin-left: -40px;
@@ -5458,6 +5464,7 @@ i.toc-sub-item {
 /** The Portal Visualization View **/
 .portal-viz-section-view{
   background-color: black;
+  height: 100%;
 }
 .portal-viz-section-view iframe{
   box-sizing: border-box;
diff --git a/src/js/themes/knb/css/metacatui.css b/src/js/themes/knb/css/metacatui.css
index 89862093d..729ee42d2 100644
--- a/src/js/themes/knb/css/metacatui.css
+++ b/src/js/themes/knb/css/metacatui.css
@@ -177,6 +177,11 @@
 
 /* Portal & Editor (minimal header common to both views)
 -------------------------------------------------- */
+.PortalView {
+  /* Rows template differs from metacatui-common.css due to hiding #HeaderContainer. */
+  grid-template-rows: 40px 100fr;
+}
+
 #Navbar .navbar-inner:before, .navbar-inner:after {
 	display: none;
 }