Update app.py

app.py

@@ -35,22 +35,18 @@ def load_data():
         )
         return pd.read_csv(local_path)
     except Exception:
-        # If repo or file doesn't exist, create repo
         try:
             api.create_repo(repo_id=repo_id, repo_type="dataset", private=True, exist_ok=True)
         except Exception as e:
             st.error(f"Could not create storage repository: {e}")
-        
         return pd.DataFrame(columns=["french", "context", "english", "active"])
 
 def save_data(df):
     api, token = get_api()
     repo_id = get_user_repo_id(api, token)
-    
     csv_buffer = StringIO()
     df.to_csv(csv_buffer, index=False)
     csv_buffer.seek(0)
-    
     try:
         api.upload_file(
             path_or_fileobj=csv_buffer.read().encode(),
@@ -78,7 +74,6 @@ if 'side_cycle_count' not in st.session_state:
     st.session_state['side_cycle_count'] = 0 
 
 def set_page(page_name):
-    # UPDATED: Just set state, let Streamlit handle the rerun automatically
     st.session_state['page'] = page_name
 
 def start_session():
@@ -101,7 +96,6 @@ def start_session():
 def next_card():
     st.session_state['current_card_idx'] += 1
     st.session_state['side_cycle_count'] = 0 
-    
     if st.session_state['current_card_idx'] >= len(st.session_state['deck']):
         st.balloons()
         st.success("Session Complete!")
@@ -134,13 +128,20 @@ 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>
-    .stButton>button {
-        width: 100%;
-        border-radius: 8px;
-        height: 3em;
+    /* Target all buttons within Streamlit */
+    div.stButton > button {
+        width: 100% !important;  /* Force full width */
+        border-radius: 12px;     /* Rounder corners */
+        height: 3.5em;           /* Taller for easy tapping */
+        font-size: 18px;         /* Larger text */
+        margin-top: 5px;
+        margin-bottom: 5px;
     }
+    
+    /* Card Styling */
     .card-container {
         padding: 40px;
         border-radius: 15px;
@@ -168,6 +169,7 @@ if st.session_state['page'] == 'home':
     st.title("🇫🇷 French Practice")
     st.write(f"Total Cards: {len(st.session_state['df'])}")
     
+    # Use columns to create spacing if needed, or just stack them
     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'))
@@ -190,17 +192,16 @@ elif st.session_state['page'] == 'archive':
     
     df = st.session_state['df']
     if not df.empty:
-        st.write("Below are your inactive cards. Click 'Unarchive' to restore.")
+        st.write("Below are your inactive cards.")
         archived = df[df['active'] == False]
         if archived.empty:
             st.info("Archive is empty.")
         else:
             for idx, row in archived.iterrows():
-                col1, col2 = st.columns([4, 1])
-                with col1:
-                    st.write(f"**{row['french']}** - {row['english']}")
-                with col2:
-                    st.button("Unarchive", key=f"unarc_{idx}", on_click=unarchive, args=(idx,))
+                # Display cleaner rows
+                st.markdown(f"**{row['french']}** — *{row['english']}*")
+                st.button("Unarchive", key=f"unarc_{idx}", on_click=unarchive, args=(idx,))
+                st.divider()
     else:
         st.write("No cards yet.")
 
@@ -231,17 +232,16 @@ elif st.session_state['page'] == 'play':
         </div>
         """, unsafe_allow_html=True)
         
-        col1, col2 = st.columns([2, 1])
-        with col1:
-            def cycle_side():
-                st.session_state['side_cycle_count'] += 1
-            st.button("Flip / Next Side", on_click=cycle_side, type="primary")
-            
-        with col2:
-            st.button("Next Card", on_click=next_card)
+        # Primary Action (Flip) full width
+        def cycle_side():
+            st.session_state['side_cycle_count'] += 1
+        st.button("Flip / Next Side", on_click=cycle_side, type="primary")
+        
+        # Secondary Action (Next Card) full width
+        st.button("Next Card", on_click=next_card)
             
         st.divider()
-        st.button("Archive this Card", on_click=archive_current_card, type="secondary")
+        st.button("Archive this Card", on_click=archive_current_card)
         st.button("Quit Session", on_click=lambda: set_page('home'))
         
     else: