From 077ebbad9aec3a4581d7c46bbbad1041af9dcbb9 Mon Sep 17 00:00:00 2001
From: Alyssa Dai <alyssa.ydai@gmail.com>
Date: Sat, 19 Oct 2024 19:08:32 -0400
Subject: [PATCH 1/3] make map disclaimer wrap on smaller screens

---
 climate_emotions_map/layout.py | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/climate_emotions_map/layout.py b/climate_emotions_map/layout.py
index ad7803c..1bc2fc7 100644
--- a/climate_emotions_map/layout.py
+++ b/climate_emotions_map/layout.py
@@ -424,20 +424,25 @@ def create_map_plot():
 
 def create_map_disclaimer():
     """Create the disclaimer for the map section of the dashboard."""
-    return dmc.Flex(
-        [
+    return dmc.Text(
+        children=[
             html.I(
-                className="bi bi-exclamation-circle", style={"fontSize": 15}
+                className="bi bi-exclamation-circle",
+                style={
+                    "fontSize": 15,
+                    "display": "inline",
+                    "verticalAlign": "middle",
+                },
             ),
             dmc.Text(
                 children=SUPP_TEXT["map_disclaimer"],
                 fs="italic",
                 size="sm",
+                ms=5,
                 # ta="center",
+                style={"display": "inline", "verticalAlign": "middle"},
             ),
         ],
-        gap=5,
-        align="center",
     )
 
 
@@ -628,6 +633,7 @@ def create_main():
                             dmc.GridCol(
                                 create_map_disclaimer(),
                                 span="content",
+                                style={"maxWidth": "100%"},
                             ),
                             dmc.GridCol(
                                 create_impact_dropdown(),

From cb4858e1193915d3cb0012edb1c5cd8ad00b5138 Mon Sep 17 00:00:00 2001
From: Alyssa Dai <alyssa.ydai@gmail.com>
Date: Mon, 21 Oct 2024 02:39:54 -0400
Subject: [PATCH 2/3] constrain dimensions of map fig for smaller screen
 usability

---
 climate_emotions_map/layout.py   | 13 +++++--------
 climate_emotions_map/make_map.py |  6 +++++-
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/climate_emotions_map/layout.py b/climate_emotions_map/layout.py
index 1bc2fc7..082094f 100644
--- a/climate_emotions_map/layout.py
+++ b/climate_emotions_map/layout.py
@@ -27,7 +27,7 @@
 }
 
 MAP_LAYOUT = {
-    "margin": {"l": 15, "r": 15, "t": 15, "b": 15},
+    "margin": {"l": 0, "r": 0, "t": 15, "b": 15},
     "colormap_range_padding": 0,
 }
 
@@ -409,15 +409,12 @@ def create_map_plot():
                 decimals=NUM_DECIMALS,
                 # opinion_colormap=OPINION_COLORMAP,
             ),
-            # vh = % of viewport height
-            # TODO: Revisit once plot margins are adjusted
             config=DCC_GRAPH_CONFIG,
-            style={"height": "65vh"},
+            # NOTE: To verify centering/margins of figure, can apply a border
+            style={"maxHeight": "50vw", "height": "65vh"},
         ),
-        # set max width
-        # TODO: Revisit once plot margins are adjusted
-        # style={"maxWidth": "70vw"},
-        size="xl",
+        fluid=True,
+        w={"base": "100vw", "lg": "65vw"},
     )
     return us_map
 
diff --git a/climate_emotions_map/make_map.py b/climate_emotions_map/make_map.py
index 1d6d3f0..8719e73 100644
--- a/climate_emotions_map/make_map.py
+++ b/climate_emotions_map/make_map.py
@@ -199,7 +199,11 @@ def make_map(
         hoverinfo="none",  # no hoverbox but click events are still emitted (?)
         # TODO: revisit
         # position colorbar closer to plot area (map)
-        colorbar={"x": 1},
+        colorbar={
+            "x": 0.95,
+            "thicknessmode": "fraction",
+            "lenmode": "fraction",
+        },
     )
 
     # add outline for clicked state

From 5f443b30e41f44d096bf179ab73a4a5ac4287f04 Mon Sep 17 00:00:00 2001
From: Alyssa Dai <alyssa.ydai@gmail.com>
Date: Fri, 1 Nov 2024 17:03:23 -0400
Subject: [PATCH 3/3] make stacked bar plots wider on xl screens

---
 climate_emotions_map/layout.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/climate_emotions_map/layout.py b/climate_emotions_map/layout.py
index 082094f..93d5134 100644
--- a/climate_emotions_map/layout.py
+++ b/climate_emotions_map/layout.py
@@ -485,7 +485,7 @@ def create_bar_plots_for_question(question_id: str, subquestion_id: str):
         ),
         fluid=True,
         # TODO: Reduce currently hard-coded L/R margins in Plotly fig to fill up more available width
-        w={"base": "100vw", "lg": 1000},
+        w={"base": "100vw", "lg": 1000, "xl": 1100},
         # size="xl",
     )
     return figure
@@ -516,7 +516,7 @@ def create_selected_question_bar_plot():
         ),
         fluid=True,
         # TODO: Reduce currently hard-coded L/R margins in Plotly fig to fill up more available width
-        w={"base": "100vw", "lg": 1000},
+        w={"base": "100vw", "lg": 1000, "xl": 1100},
     )
 
     return dmc.Stack(