More styling tweaks

Author: stronk-dev

src/components/WorldMap.css

@@ -1,16 +1,17 @@
 /* Container that holds the entire map and panel section */
 .map-and-panel {
+  flex: 1;
   display: flex;
-  height: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  overflow: hidden;
+  background-color: var(--darkest);
   width: 100%;
-  transition: width 0.3s ease-in-out;
+  height: 100%;
+  box-sizing: border-box;
   position: relative;
-}
-
-@media (max-width: 768px) {
-  .map-and-panel {
-    flex-direction: column;
-  }
+  display: flex;
 }
 
 /* World map container styling */
@@ -31,16 +32,17 @@
 
 /* Side panel styling */
 .side-panel {
+  position: relative;
   width: 400px;
   height: 100%;
   background-color: var(--darker);
   color: var(--text-color);
   box-shadow: var(--box-shadow);
   padding: 1em;
-  overflow-y: auto;
+  overflow-y: auto; /* Independent scrolling within the sidebar */
   transition: transform 0.3s ease-in-out;
   border-left: 1px solid var(--border-color);
-  z-index: 20; /* Ensure panel covers map */
+  z-index: 15; /* Ensure it stays above the map when visible */
 }
 
 @media (max-width: 768px) {
@@ -49,8 +51,9 @@
     top: 0;
     left: 0;
     width: 100%;
-    height: 100%;
-    z-index: 20; /* Make sure side panel is above everything */
+    height: 100%; /* Cover entire viewport height */
+    overflow-y: auto; /* Allow scrolling within the side panel */
+    z-index: 20; /* Ensure it overlays the map */
   }
 }
 
@@ -107,6 +110,18 @@
   color: var(--heading-color);
   border-radius: 5px;
   transition: background-color 0.3s ease;
+  overflow: hidden;
+}
+
+.accordion-item-header strong {
+  overflow: hidden;
+  text-overflow: ellipsis; /* Adds ellipsis for truncated content */
+  white-space: nowrap; /* Prevents wrapping */
+}
+
+.accordion-icon {
+  color: var(--weird);
+  font-weight: bold;
 }
 
 .accordion-item-header:hover {

src/pages/home.css

@@ -247,6 +247,13 @@
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
+@media (max-width: 768px) {
+  .ranking-section,
+  .histogram-section {
+    padding-bottom: 4em;
+  }
+}
+
 /* Scrollbar Styling */
 .scrollable-content::-webkit-scrollbar {
   width: 12px;