UI, css updates

battlewords/ui.py

@@ -87,8 +87,7 @@ def inject_styles() -> None:
             text-align: center;
           }
           div[data-testid="stButton"] button {
-            max-width: 100%;
-            width: auto;
+            max-width: 100%;            
             aspect-ratio: 1 / 1;
             border-radius: 0;
             #border: 1px solid #1d64c8;
@@ -98,6 +97,15 @@ def inject_styles() -> None:
             padding: 0.25rem 0.75rem;
             min-height: 2.5rem;
           }
+          .st-key-new_game_btn, .st-key-sort_wordlist_btn {
+            margin: 0 auto;
+            aspect-ratio: unset;
+          }
+          .st-key-new_game_btn > div[data-testid="stButton"] button, .st-key-sort_wordlist_btn > div[data-testid="stButton"] button {
+            aspect-ratio: unset;
+            text-align:center;
+            height: auto;
+          }
 
           /* Ensure grid cell columns expand equally for both buttons and revealed cells */
           div[data-testid="column"], .st-emotion-cache-zh2fnc {
@@ -332,7 +340,7 @@ def _render_sidebar():
                 on_change=_new_game,  # immediately start a new game with the selected list
             )
 
-            if st.button("Sort Wordlist", width="content"):
+            if st.button("Sort Wordlist", width=125, key="sort_wordlist_btn"):
                 _sort_wordlist(st.session_state.selected_wordlist)
         else:
             st.info("No word lists found in words/ directory. Using built-in fallback.")
@@ -768,7 +776,7 @@ def run_app():
     left, right = st.columns([2, 2], gap="medium")
     with left:
         _render_grid(state, st.session_state.letter_map)
-        st.button("New Game", width="content", on_click=_new_game)
+        st.button("New Game", width=125, on_click=_new_game, key="new_game_btn")
 
     with right:
         _render_radar(state.puzzle, size=state.grid_size, r_max=1.6, max_frames=60, sinusoid_expand=False, stagger_radar=True)