fix mobile view

src/components.py

@@ -132,16 +132,50 @@ def show_charts():
     # interventions_categories
     interventions_processed_df = cached_parse_gg_sheet(INTERVENTIONS_PROCESSED_URL)
     supply_data = interventions_processed_df["supplies_category"].str.split(",").explode().str.strip('[] \'').dropna().astype("category")
-    interv_fig = px.pie(supply_data, names='supplies_category', title=_('Supplies Categories'))
+    interv_fig = px.pie(supply_data, names='supplies_category')
+    interv_fig.update_layout(
+        autosize=True,
+        legend=dict(
+        orientation="h",
+        # entrywidth=40,
+        yanchor="bottom",
+        y=1.02,
+        xanchor="right",
+        x=1,
+        font=dict(
+            # family="Courier",
+            # size=10,
+            # color="black"
+        ),
+        itemwidth=100
+    ))
     with col1:
-        st.plotly_chart(interv_fig)
+        st.subheader(_("Supplies Categories"))
+        st.plotly_chart(interv_fig, use_container_width=True)
 
     # requests_categories
     requests_processed_df = cached_parse_gg_sheet(VERIFIED_REQUESTS_PROCESSED_URL)
     need_data = requests_processed_df["need_category"].str.split(",").explode().str.strip('[] \'').dropna().astype("category")
-    req_fig = px.pie(need_data, names='need_category', title=_('Needs Categories'))
+    req_fig = px.pie(need_data, names='need_category')
+    req_fig.update_layout(
+        autosize=True,
+        legend=dict(
+        orientation="h",
+        # entrywidth=40,
+        yanchor="bottom",
+        y=1.02,
+        xanchor="right",
+        x=1,
+        font=dict(
+            # family="Courier",
+            # size=10,
+            # color="black"
+        ),
+        itemwidth=100
+    ))
     with col2:
-        st.plotly_chart(req_fig)
+        st.subheader(_("Needs Categories"))
+        st.plotly_chart(req_fig, use_container_width=True)