prepare containerization, layout tweaks

assets/custom.css

 :root {
-    --neon-pink: #ff71ce;
-    --neon-blue: #01cdfe;
-    --neon-green: #05ff81;
-    --neon-purple: #b967ff;
-    --neon-yellow: #fdfb96;
-    --grey-bg: #404040;
-    --grey-bg-bright: #d4d4d4;
-    --dark-bg: #1a1a1a;
-    --darker-bg: #121212;
-    --grid-color: rgba(33, 33, 99, 0.8);
+  --neon-pink: #ff71ce;
+  --neon-blue: #01cdfe;
+  --neon-green: #05ff81;
+  --neon-purple: #b967ff;
+  --neon-yellow: #fdfb96;
+  --grey-bg: #404040;
+  --grey-bg-bright: #d4d4d4;
+  --dark-bg: #1a1a1a;
+  --darker-bg: #121212;
+  --grid-color: rgba(33, 33, 99, 0.8);
 }
 
 body {
-    background-color: var(--dark-bg);
-    background-image:
-        linear-gradient(0deg, var(--grid-color) 1px, transparent 1px),
-        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
-    background-size: 20px 20px;
-    color: white;
-    font-family: 'VT323', 'Courier New', monospace;
-    margin-top: 70px;
-    padding: 15px;
+  background-color: var(--dark-bg);
+  background-image: linear-gradient(
+      0deg,
+      var(--grid-color) 1px,
+      transparent 1px
+    ),
+    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
+  background-size: 20px 20px;
+  color: white;
+  font-family: "VT323", "Courier New", monospace;
+  margin-top: 70px;
+  padding: 15px;
 }
 
 .title-bar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    background-color: var(--grey-bg);
-    padding: 10px 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid var(--grid-color);
-    z-index: 1000;
-    box-sizing: border-box;
-    height: 60px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: var(--grey-bg);
+  padding: 10px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--grid-color);
+  z-index: 1000;
+  box-sizing: border-box;
+  height: 60px;
 }
 
 .title-text {
-    color: white;
-    font-size: 1.4rem;
-    font-weight: bold;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 70%;
+  color: white;
+  font-size: 1.4rem;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 70%;
 }
 
 .logo-container {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .header-logo {
-    height: 40px;
-    background-color: var(--grey-bg-bright);
-    border-radius: 4px;
+  height: 40px;
+  background-color: var(--grey-bg-bright);
+  border-radius: 4px;
 }
 
 /* Logo wrapper to create the background box */
 .logo-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--grey-bg-bright);
-    border-radius: 0.4rem;
-    padding: 0.3rem 0.7rem 0.3rem 0.7rem;
-    margin-left: 0.5rem;
-    border: 1px solid var(--grid-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--grey-bg-bright);
+  border-radius: 0.4rem;
+  padding: 0.3rem 0.7rem 0.3rem 0.7rem;
+  margin-left: 0.5rem;
+  border: 1px solid var(--grid-color);
 }
 
 /* Responsive adjustments */
 @media (max-width: 600px) {
-    .logo-wrapper {
-        padding: 0.3rem;
-    }
+  .logo-wrapper {
+    padding: 0.3rem;
+  }
 
-    .header-logo {
-        height: 2rem;
-    }
+  .header-logo {
+    height: 2rem;
+  }
 }
 
 /* ----- drop boxes ----- */
 .Select-control {
-    background-color: var(--dark-bg);
+  background-color: var(--dark-bg);
 }
 
 .Select-control:hover {
-    background-color: var(--grey-bg);
+  background-color: var(--grey-bg);
 }
 
 .Select-value-label {
-    color: white !important;
+  color: white !important;
 }
 
 .Select-menu-outer {
-    background-color: var(--dark-bg);
-    color: white;
+  background-color: var(--dark-bg);
+  color: white;
 }
 
+/* The following styles ensure the attribution tag floats above the map and should be removed if the issue is fixed in a future plotly release. */
+.maplibregl-ctrl-bottom-right {
+  bottom: 5px;
+  left: 10px;
+}
+
+.maplibregl-ctrl-bottom-left,
+.maplibregl-ctrl-bottom-right,
+.maplibregl-ctrl-top-left,
+.maplibregl-ctrl-top-right {
+  pointer-events: none;
+  position: absolute;
+  z-index: 2;
+}
+
+.maplibregl-map {
+  font:
+    12px/20px Helvetica Neue,
+    Arial,
+    Helvetica,
+    sans-serif;
+  font-family:
+    Helvetica Neue,
+    Arial,
+    Helvetica,
+    sans-serif;
+  color: var(--grey-bg);
+}
+
+/*This is necessary to remove spacing below the canvas.*/
+.maplibregl-canvas {
+  display: block;
+}
 
 .footer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    background-color: var(--dark-bg);
-    padding: 10px 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-top: 1px solid var(--grid-color);
-    z-index: 1000;
-    box-sizing: border-box;
-    font-size: 0.9rem;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: var(--dark-bg);
+  padding: 10px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-top: 1px solid var(--grid-color);
+  z-index: 1000;
+  box-sizing: border-box;
+  font-size: 0.9rem;
 }
 
 /* Add some bottom margin to the main content to prevent overlap with footer */
 .main-content {
-    margin-bottom: 20px;
+  margin-bottom: 20px;
 }