feature: align vertically

owid · Dec 12, 2024 · 7926446 · 7926446
1 parent 0d9684a
commit 7926446
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/apps/wizard/app_pages/producer_analytics.py b/apps/wizard/app_pages/producer_analytics.py
@@ -447,7 +447,7 @@ def prepare_summary(
         f"Select a custom date range (note that this metric started to be recorded on {MIN_DATE.strftime('%Y-%m-%d')})."
     )
 
-    with st_horizontal():
+    with st_horizontal(vertical_alignment="center"):
         # Create input fields for minimum and maximum dates.
         min_date = st.date_input(
             "Select minimum date",

diff --git a/apps/wizard/utils/components.py b/apps/wizard/utils/components.py
@@ -13,42 +13,43 @@
 
 HORIZONTAL_STYLE = """<style class="hide-element">
     /* Hides the style container and removes the extra spacing */
-    .element-container:has(.hide-element) {
+    .element-container:has(.hide-element) {{
         display: none;
-    }
+    }}
     /*
         The selector for >.element-container is necessary to avoid selecting the whole
         body of the streamlit app, which is also a stVerticalBlock.
     */
-    div[data-testid="stVerticalBlock"]:has(> .element-container .horizontal-marker) {
+    div[data-testid="stVerticalBlock"]:has(> .element-container .horizontal-marker) {{
         display: flex;
         flex-direction: row !important;
         flex-wrap: wrap;
         gap: 1rem;
-        align-items: baseline;
-    }
+        align-items: {vertical_alignment};
+    }}
     /* Override the default width of selectboxes in horizontal layout */
-    div[data-testid="stVerticalBlock"]:has(> .element-container .horizontal-marker) select {
+    div[data-testid="stVerticalBlock"]:has(> .element-container .horizontal-marker) select {{
         min-width: 200px;  /* Set a minimum width for selectboxes */
         max-width: 400px;  /* Optional: Set a max-width to avoid overly wide selectboxes */
-    }
+    }}
     /* Buttons and their parent container all have a width of 704px, which we need to override */
-    div[data-testid="stVerticalBlock"]:has(> .element-container .horizontal-marker) div {
+    div[data-testid="stVerticalBlock"]:has(> .element-container .horizontal-marker) div {{
         width: max-content !important;
-    }
+    }}
     /* Just an example of how you would style buttons, if desired */
     /*
-    div[data-testid="stVerticalBlock"]:has(> .element-container .horizontal-marker) button {
+    div[data-testid="stVerticalBlock"]:has(> .element-container .horizontal-marker) button {{
         border-color: red;
-    }
+    }}
     */
 </style>
 """
 
 
 @contextmanager
-def st_horizontal():
-    st.markdown(HORIZONTAL_STYLE, unsafe_allow_html=True)
+def st_horizontal(vertical_alignment="baseline"):
+    h_style = HORIZONTAL_STYLE.format(vertical_alignment=vertical_alignment)
+    st.markdown(h_style, unsafe_allow_html=True)
     with st.container():
         st.markdown('<span class="hide-element horizontal-marker"></span>', unsafe_allow_html=True)
         yield