Update app.R

app.R

@@ -109,36 +109,39 @@ ui <- dashboardPage(
         }
         /* Responsive map container */
         .map-container {
-          height: 70vh;  /* Default height for desktop */
+          height: 70vh;  
+          width: 100%;
         }
         @media (max-width: 768px) {
           .map-container {
-            height: 50vh;  /* Taller height for mobile and tablets */
+            height: 50vh;  
           }
         }
       "))
     ),
-    tabItems(
-      tabItem(
-        tabName = "cartogramTab",
-        fluidRow(
+    tabItem(
+      tabName = "cartogramTab",
+      fluidRow(
+        column(
+          width = 9,
           box(
-            width = 12,
+            width = NULL,
             title = strong("Global Leadership Project (GLP)"),
             solidHeader = TRUE,
             div(
               class = "map-container",
-              style = "padding: 10px;",  # Keep padding, height is set via CSS
               girafeOutput("cartogramPlot", width = "100%", height = "100%")
             )
           )
         ),
-        fluidRow(
+        column(
+          width = 3,
           box(
-            width = 12,
+            width = NULL,
             title = strong("Selected Country Data"),
             solidHeader = TRUE,
-            uiOutput("selectedCountryData")
+            uiOutput("selectedCountryData"),
+            style = "overflow-y: auto;"  # Scroll if content overflows
           )
         )
       )