Update app.py

app.py

@@ -128,23 +128,8 @@ def unarchive(df_idx):
 
 st.set_page_config(page_title="French Flashcards", page_icon="🇫🇷", layout="centered")
 
-# UPDATED CSS FOR FULL-WIDTH BUTTONS
 st.markdown("""
     <style>
-    /* Force the button container to fill width */
-    .stButton {
-        width: 100%;
-    }
-    /* Force the actual button to fill the container */
-    .stButton > button {
-        width: 100% !important;
-        border-radius: 12px;
-        height: 3.5em;
-        font-size: 18px;
-        margin-top: 8px; /* Add spacing between stacked buttons */
-        margin-bottom: 8px;
-    }
-    
     /* Card Styling */
     .card-container {
         padding: 40px;
@@ -173,9 +158,10 @@ if st.session_state['page'] == 'home':
     st.title("🇫🇷 French Practice")
     st.write(f"Total Cards: {len(st.session_state['df'])}")
     
-    st.button("Start Session", on_click=start_session, type="primary")
-    st.button("Add Card", on_click=lambda: set_page('add'))
-    st.button("View Archive", on_click=lambda: set_page('archive'))
+    # NATIVE FULL WIDTH BUTTONS
+    st.button("Start Session", on_click=start_session, type="primary", use_container_width=True)
+    st.button("Add Card", on_click=lambda: set_page('add'), use_container_width=True)
+    st.button("View Archive", on_click=lambda: set_page('archive'), use_container_width=True)
 
 elif st.session_state['page'] == 'add':
     st.title("Add New Card")
@@ -183,15 +169,15 @@ elif st.session_state['page'] == 'add':
         fr = st.text_input("French Word/Phrase")
         ctx = st.text_area("Context / Sentence")
         en = st.text_input("English Translation")
-        submitted = st.form_submit_button("Save Card")
+        submitted = st.form_submit_button("Save Card", use_container_width=True)
         if submitted and fr and en:
             add_card(fr, ctx, en)
             
-    st.button("Back", on_click=lambda: set_page('home'))
+    st.button("Back", on_click=lambda: set_page('home'), use_container_width=True)
 
 elif st.session_state['page'] == 'archive':
     st.title("Archive")
-    st.button("Back", on_click=lambda: set_page('home'))
+    st.button("Back", on_click=lambda: set_page('home'), use_container_width=True)
     
     df = st.session_state['df']
     if not df.empty:
@@ -202,7 +188,7 @@ elif st.session_state['page'] == 'archive':
         else:
             for idx, row in archived.iterrows():
                 st.markdown(f"**{row['french']}** — *{row['english']}*")
-                st.button("Unarchive", key=f"unarc_{idx}", on_click=unarchive, args=(idx,))
+                st.button("Unarchive", key=f"unarc_{idx}", on_click=unarchive, args=(idx,), use_container_width=True)
                 st.divider()
     else:
         st.write("No cards yet.")
@@ -234,17 +220,16 @@ elif st.session_state['page'] == 'play':
         </div>
         """, unsafe_allow_html=True)
         
-        # --- FIXED: Removed Columns so buttons stack and fill width ---
-        
+        # ACTIONS
         def cycle_side():
             st.session_state['side_cycle_count'] += 1
-        st.button("Flip / Next Side", on_click=cycle_side, type="primary")
-        
-        st.button("Next Card", on_click=next_card)
-        
+            
+        st.button("Flip / Next Side", on_click=cycle_side, type="primary", use_container_width=True)
+        st.button("Next Card", on_click=next_card, use_container_width=True)
+            
         st.divider()
-        st.button("Archive this Card", on_click=archive_current_card)
-        st.button("Quit Session", on_click=lambda: set_page('home'))
+        st.button("Archive this Card", on_click=archive_current_card, use_container_width=True)
+        st.button("Quit Session", on_click=lambda: set_page('home'), use_container_width=True)
         
     else:
         set_page('home')