Implement responsive column layout in app.py based on screen width to enhance user experience on mobile devices. Default to desktop layout if JavaScript fails to retrieve screen width.

app.py

@@ -4,9 +4,15 @@ import pandas as pd
 import gspread
 import pymongo
 import re
+from streamlit_javascript import st_javascript
 
 st.set_page_config(layout="wide")
 
+screen_width = st_javascript("window.innerWidth")
+# Default to desktop if JS fails
+if screen_width is None:
+    screen_width = 1200
+
 @st.cache_resource
 def init_conn():
         uri = st.secrets['mongo_uri']
@@ -1028,7 +1034,12 @@ with tab4:
             })
             summary_row = summary_row[['Salary', 'Median', 'Own%']].head(10)
             
-            col1, col2, col3 = st.columns([2, 1, 3])
+            if screen_width < 700:
+                # Mobile: Only two columns
+                col1, col3 = st.columns([2, 3])
+                col2 = None
+            else:
+                col1, col2, col3 = st.columns([2, 1, 3])
             with col1:
                 if (10 - len(filled_lineup)) > 0:
                     st.markdown(f"""