Fix map pages: force footer to bottom and tidy pedigree map & place hierarchy layouts (#4799)

* Fixes #4789, for all user map pages. It is necessary to give the map and sidebar elements a defined height so that on small devices where the elements are stacked, the footer is pushed below them

* Change inline style to bootstrap class

3 files changed, 13 insertions, 15 deletions

diff --git a/resources/css/_chart-pedigree-map.css b/resources/css/_chart-pedigree-map.css
index 067ab9e55b..efad08a914 100644
--- a/resources/css/_chart-pedigree-map.css
+++ b/resources/css/_chart-pedigree-map.css
@@ -31,6 +31,7 @@
     --wt-pedigree-map-gen-9: pink;
     --wt-pedigree-map-gen-10: magenta;
     --wt-pedigree-map-gen-11: maroon;
+    --wt-pedigree-map-height: 70vh;
 }
 
 .wt-pedigree-map-gen-0 {
@@ -81,15 +82,11 @@
     color: var(--wt-pedigree-map-gen-11);
 }
 
-.wt-pedigree-map-wrapper {
-    height: 70vh;
-}
-
 .wt-pedigree-map-map {
-    height: 100%;
+    height: var(--wt-pedigree-map-height);
 }
 
 .wt-pedigree-map-sidebar {
-    height: 100%;
+    height: var(--wt-pedigree-map-height);
     overflow-y: auto;
 }
diff --git a/resources/css/_list-places.css b/resources/css/_list-places.css
index cd95ffedec..356dbe1fac 100644
--- a/resources/css/_list-places.css
+++ b/resources/css/_list-places.css
@@ -18,15 +18,16 @@
  *
  * wt-route-place-list
  */
- .wt-place-hierarchy-wrapper {
-    height: 70vh;
+
+ :root {
+    --wt-place-hierarchy-map-height: 70vh;
 }
 
 .wt-place-hierarchy-map {
-    height: 100%;
+    height: var(--wt-place-hierarchy-map-height);
 }
 
 .wt-place-hierarchy-sidebar {
-    height: 100%;
+    height: var(--wt-place-hierarchy-map-height);
     overflow-y: auto;
 }
diff --git a/resources/css/_tab-places.css b/resources/css/_tab-places.css
index 8407e5d681..16d8783bf9 100644
--- a/resources/css/_tab-places.css
+++ b/resources/css/_tab-places.css
@@ -19,15 +19,15 @@
  * wt-tabs-individual
  * +--- wt-tab-places
  */
-.wt-places-tab-wrapper {
-    height: 70vh
-}
 
+:root {
+    --wt-places-tab-map-height: 70vh;
+}
 .wt-places-tab-map {
-    height: 100%
+    height: var(--wt-places-tab-map-height);
 }
 
 .wt-places-tab-sidebar {
-    height: 100%;
+    height: var(--wt-places-tab-map-height);
     overflow-y: auto;
 }