Refactor salary display logic in app.py by removing JavaScript dependency for screen width and simplifying column layout. This change enhances the user experience by ensuring consistent presentation of salary information across all devices.

app.py

@@ -4,15 +4,9 @@ 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']
@@ -1034,39 +1028,23 @@ with tab4:
             })
             summary_row = summary_row[['Salary', 'Median', 'Own%']].head(10)
             
-            col1, col2, col3 = st.columns([2, 1, 3])
-            if screen_width < 700:
-                with col1:
-                    if (10 - len(filled_lineup)) > 0:
-                        st.markdown(f"""
-                                <div style='text-align: right; vertical-align: top; margin-top: 0; padding-top: 0;''>
-                                    <b>💰 Per Player:</b> ${round((50000 - total_salary) / (10 - len(filled_lineup)), 0)} &nbsp;
-                                </div>
-                                """,
-                                unsafe_allow_html=True)
-                    else:
-                        st.markdown(f"""
-                                <div style='text-align: right; vertical-align: top; margin-top: 0; padding-top: 0;''>
-                                    <b>💰 Leftover:</b> ${round(50000 - total_salary, 0)} &nbsp;
-                                </div>
-                                """,
-                                unsafe_allow_html=True)
-            else:
-                with col1:
-                    if (10 - len(filled_lineup)) > 0:
-                        st.markdown(f"""
-                                <div style='text-align: left; vertical-align: top; margin-top: 0; padding-top: 0;''>
-                                    <b>💰 Per Player:</b> ${round((50000 - total_salary) / (10 - len(filled_lineup)), 0)} &nbsp;
-                                </div>
-                                """,
-                                unsafe_allow_html=True)
-                    else:
-                        st.markdown(f"""
-                                <div style='text-align: left; vertical-align: top; margin-top: 0; padding-top: 0;''>
-                                    <b>💰 Leftover:</b> ${round(50000 - total_salary, 0)} &nbsp;
-                                </div>
-                                """,
-                                unsafe_allow_html=True)
+            col1, col3 = st.columns([2, 3])
+
+            with col1:
+                if (10 - len(filled_lineup)) > 0:
+                    st.markdown(f"""
+                            <div style='text-align: left; vertical-align: top; margin-top: 0; padding-top: 0;''>
+                                <b>💰 Per Player:</b> ${round((50000 - total_salary) / (10 - len(filled_lineup)), 0)} &nbsp;
+                            </div>
+                            """,
+                            unsafe_allow_html=True)
+                else:
+                    st.markdown(f"""
+                            <div style='text-align: left; vertical-align: top; margin-top: 0; padding-top: 0;''>
+                                <b>💰 Leftover:</b> ${round(50000 - total_salary, 0)} &nbsp;
+                            </div>
+                            """,
+                            unsafe_allow_html=True)
 
             with col3:
                 if total_salary <= 50000: