P2-E mobile responsive UI

app.py

@@ -52,6 +52,95 @@ st.set_page_config(
     initial_sidebar_state="collapsed",
 )
 
+
+def inject_mobile_responsive_form_styles() -> None:
+    """Improve narrow-screen form readability without changing desktop behavior."""
+    st.markdown(
+        """
+        <style>
+        @media (max-width: 760px) {
+          /* Keep native Streamlit labels complete on narrow screens. */
+          [data-testid="stTextInput"] label,
+          [data-testid="stSelectbox"] label,
+          [data-testid="stNumberInput"] label,
+          [data-testid="stRadio"] label,
+          [data-testid="stTextInput"] label p,
+          [data-testid="stSelectbox"] label p,
+          [data-testid="stNumberInput"] label p,
+          [data-testid="stRadio"] label p {
+            width: 100% !important;
+            max-width: 100% !important;
+            min-width: 0 !important;
+            white-space: normal !important;
+            overflow: visible !important;
+            text-overflow: clip !important;
+            overflow-wrap: anywhere !important;
+            line-height: 1.35 !important;
+          }
+
+          /* Let form widgets use the full available mobile width. */
+          [data-testid="stTextInput"],
+          [data-testid="stSelectbox"],
+          [data-testid="stNumberInput"],
+          [data-testid="stRadio"] {
+            width: 100% !important;
+            max-width: 100% !important;
+            min-width: 0 !important;
+          }
+
+          /* Preserve the native Research Design selectbox while allowing long
+             selected values to wrap instead of being visually truncated. */
+          [data-testid="stSelectbox"] [data-baseweb="select"],
+          [data-testid="stSelectbox"] [role="combobox"] {
+            width: 100% !important;
+            max-width: 100% !important;
+            min-width: 0 !important;
+          }
+
+          [data-testid="stSelectbox"] [data-baseweb="select"] > div {
+            min-height: 3rem !important;
+            height: auto !important;
+          }
+
+          [data-testid="stSelectbox"] [data-baseweb="select"] > div > div:first-child,
+          [data-testid="stSelectbox"] [data-baseweb="select"] > div > div:first-child > div,
+          [data-testid="stSelectbox"] [data-baseweb="select"] span,
+          [data-testid="stSelectbox"] [role="combobox"] span {
+            min-width: 0 !important;
+            max-width: 100% !important;
+            white-space: normal !important;
+            overflow: visible !important;
+            text-overflow: clip !important;
+            overflow-wrap: anywhere !important;
+            line-height: 1.3 !important;
+          }
+
+          /* BaseWeb renders the opened select menu in a portal. Keep option
+             rows readable for long EN/RU/KK method names on small screens. */
+          [data-baseweb="menu"] [role="option"],
+          [data-baseweb="popover"] [role="option"] {
+            min-height: 2.75rem !important;
+            height: auto !important;
+            white-space: normal !important;
+            overflow-wrap: anywhere !important;
+            line-height: 1.3 !important;
+          }
+
+          /* Standard / Flagship may wrap naturally rather than compressing. */
+          [data-testid="stRadio"] [role="radiogroup"] {
+            flex-wrap: wrap !important;
+            row-gap: 0.45rem !important;
+            column-gap: 1rem !important;
+          }
+        }
+        </style>
+        """,
+        unsafe_allow_html=True,
+    )
+
+
+inject_mobile_responsive_form_styles()
+
 # A3-R5D: default-off, benchmark-only startup probe; never blocks the UI.
 try:
     from core.a3_glm_live_probe import run_startup_probe_if_enabled