CSS update

battlewords/ui.py

@@ -188,9 +188,6 @@ def inject_styles() -> None:
           .shiny-border:hover::before { left: 100%; }
 
           .bw-radio-group { display:flex; align-items:flex-start; gap: 10px; flex-flow: row; }
-          @media (max-width:1000px) and (min-width:641px) {
-            .bw-radio-group { flex-wrap:wrap; gap: 5px; }
-          }
           .bw-radio-item { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;}
           .bw-radio-circle { width: 45px; height: 45px; border-radius: 50%; border: 4px solid; background: rgba(255,255,255,0.06); display: grid; place-items: center; color:#fff; font-weight:700; }
           .bw-radio-circle .dot { width: 14px; height: 14px; border-radius: 50%; background:#777; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25); }
@@ -199,6 +196,13 @@ def inject_styles() -> None:
           .bw-radio-circle.active.miss { background: linear-gradient(135deg, rgba(255,0,0,0.18), rgba(128,0,0,0.38)); }
           .bw-radio-circle.active.miss .dot { background:#ff4b4b; box-shadow: 0 0 10px rgba(255,75,75,0.85); }
           .bw-radio-caption { font-size: 0.8rem; color:#fff; opacity:0.85; letter-spacing:0.5px; }
+          @media (max-width:1000px) and (min-width:641px) {
+            .bw-radio-group { flex-wrap:wrap; gap: 5px; margin-bottom: 5px;}
+            .bw-radio-item {margin: 0 auto;}
+          }
+          @media (max-width:640px) {
+            .bw-radio-item { margin:unset;}
+          }
 
           /* Make the sidebar scrollable */
           section[data-testid="stSidebar"] {
@@ -230,130 +234,6 @@ def inject_styles() -> None:
         unsafe_allow_html=True,
     )
 
-# Bridge to control the wrapper around the iframe component from the parent page
-def _inject_parent_modal_bridge() -> None:
-    if st.session_state.get("_bw_parent_bridge", False):
-        return
-    st.session_state["_bw_parent_bridge"] = True
-    st.markdown(
-        """
-        <script>
-        (function(){
-          // Debug: script injection confirmation
-          alert('Parent modal bridge script loaded');
-
-          // Find the Streamlit wrapper around the iframe that renders the modal (components.html wrapper)
-          function findWrapper(iframe) {
-            if (!iframe) return null;
-            // Try Streamlit's typical element wrapper first, then fallback to parentElement
-            var el = iframe.closest('.st-emotion-cache-wp60of') || iframe.parentElement;
-            // Debug: which wrapper did we find
-            alert('findWrapper called, found: ' + (el ? el.className : 'null'));
-            return el;
-          }
-
-          // Listen for messages from the iframe (modal page) to toggle visibility/positioning
-          window.addEventListener('message', function(e) {
-            alert('Message event received');
-
-            var data = e.data || {};
-            var isVisibility = data && data.type === 'bw-bootstrap-modal-visibility';
-            var isStreamlitSet = data && data.type === 'streamlit:setComponentValue' && data.key === 'show_gameover_overlay';
-
-            // Only handle our two message types
-            if (!(isVisibility || isStreamlitSet)) return;
-            alert('Visibility or StreamlitSet message detected');
-
-            // Decide if the modal should be visible based on message type
-            var shouldBeVisible = isVisibility ? !!data.visible : !!data.value;
-            alert('shouldBeVisible: ' + shouldBeVisible);
-
-            // Try to get the iframe element directly from the message source
-            var iframeEl = null;
-            try {
-              iframeEl = (e.source && e.source.frameElement) ? e.source.frameElement : null;
-            } catch(_) {
-              iframeEl = null;
-            }
-            alert('iframeEl direct: ' + (iframeEl ? iframeEl.tagName : 'null'));
-
-            // Fallback: scan iframes and match by contentWindow reference
-            if (!iframeEl) {
-              var frames = document.querySelectorAll('iframe');
-              for (var i = 0; i < frames.length; i++) {
-                var f = frames[i];
-                try {
-                  if (f.contentWindow !== e.source) continue;
-                } catch(_) {
-                  continue;
-                }
-                iframeEl = f;
-                break;
-              }
-            }
-            alert('iframeEl after fallback: ' + (iframeEl ? iframeEl.tagName : 'null'));
-            if (!iframeEl) return;
-
-            // Find the wrapper that we will show/hide and absolutely position
-            var wrap = findWrapper(iframeEl);
-            alert('Wrapper found: ' + (wrap ? wrap.className : 'null'));
-
-            if (wrap) {
-              wrap.classList.add('bw-modal-wrapper');
-              if (shouldBeVisible) {
-                alert('Setting wrapper to visible');
-                wrap.style.display = 'block';
-                wrap.style.position = 'fixed';
-                wrap.style.inset = '0';
-                wrap.style.zIndex = '99999';
-                wrap.style.width = '100vw';
-                wrap.style.height = '100vh';
-                wrap.style.margin = '0';
-                wrap.style.padding = '0';
-              } else {
-                alert('Setting wrapper to hidden');
-                wrap.style.display = 'none';
-                wrap.style.position = 'relative';
-              }
-            }
-
-            // Always toggle the iframe element itself for robustness
-            try {
-              if (shouldBeVisible) {
-                alert('Setting iframe to visible');
-                iframeEl.style.display = 'block';
-                iframeEl.style.width = '100vw';
-                iframeEl.style.height = '100vh';
-                iframeEl.style.borderRadius = '15px';
-                iframeEl.style.background = 'rgba(29, 100, 200, 0.5)';
-                iframeEl.style.pointerEvents = 'auto';
-                iframeEl.style.zIndex = '1000';
-                iframeEl.style.position = 'fixed';
-                iframeEl.style.inset = '0';
-              } else {
-                alert('Setting iframe to hidden');
-                iframeEl.style.display = 'none';
-                iframeEl.style.width = '0px';
-                iframeEl.style.height = '0px';
-                iframeEl.style.pointerEvents = 'none';
-                iframeEl.style.zIndex = '-1';
-                iframeEl.style.position = '';
-                iframeEl.style.inset = '';
-              }
-            } catch(_) {
-              alert('Error toggling iframe style');
-            }
-          }, false);
-
-          // Note: Streamlit's components.html uses an iframe sandbox that includes allow-scripts and allow-same-origin.
-          // That combination raises a general warning, but is required here for messaging and proper behavior.
-        })();
-        </script>
-        """,
-        unsafe_allow_html=True,
-    )
-
-
 def _init_session() -> None:
     if "initialized" in st.session_state and st.session_state.initialized:
         return
@@ -1164,7 +1044,7 @@ def run_app():
     left, right = st.columns([3, 2], gap="medium")
     with right:
         _render_radar(state.puzzle, size=state.grid_size, r_max=0.8, max_frames=25, sinusoid_expand=True, stagger_radar=False, show_ticks=st.session_state.get("show_grid_ticks", False))    
-        one, two = st.columns([1, 3], gap="medium")
+        one, two = st.columns([1, 2], gap="medium")
         with one:
             _render_correct_try_again(state)
             #_render_hit_miss(state)