chore: clean up device ranking tab

src/app.py

@@ -156,11 +156,40 @@ async def main():
             # Device rankings view
             st.title(" Device Rankings")
 
-            # Show standardization notice
-            st.text(
-                f"📊 The rankings are based on the Glicko-2 algorithm."
-                f" Rankings are based on benchmarks with standard conditions: "
-                f"PP={512} tokens, TG={128} tokens. "
+            # Footnote-style information
+            st.markdown(
+                """
+            <div style="position: relative;">
+                <div style="margin-bottom: 10px;">
+                    <a href="#" data-tooltip="Rankings calculated using Glicko-2 algorithm with standardized conditions: PP=512 tokens, TG=128 tokens" style="text-decoration: none; color: #888; font-size: 12px; border-bottom: 1px dotted #888;">
+                        ℹ️ Ranking methodology
+                    </a>
+                </div>
+            </div>
+            <style>
+            [data-tooltip] {
+                position: relative;
+                cursor: pointer;
+            }
+            [data-tooltip]:hover::after {
+                content: attr(data-tooltip);
+                position: absolute;
+                left: 0;
+                top: 100%;
+                background-color: #f8f9fa;
+                border: 1px solid #dee2e6;
+                border-radius: 4px;
+                padding: 8px 12px;
+                width: max-content;
+                max-width: 300px;
+                z-index: 100;
+                font-size: 12px;
+                color: #333;
+                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+            }
+            </style>
+            """,
+                unsafe_allow_html=True,
             )
 
             # Render performance metrics

src/components/visualizations.py

@@ -288,7 +288,7 @@ def render_leaderboard_table(df: pd.DataFrame, filters: Dict):
         grouped_df[display_cols],
         use_container_width=True,
         height=min(
-            400, (len(grouped_df) + 1) * 35 + 40
+            600, (len(grouped_df) + 1) * 35 + 40
         ),  # Dynamic height based on content
         hide_index=False,
         column_config={
@@ -443,12 +443,12 @@ def create_ranking_ladder(g2_confident_display: pd.DataFrame, top_n: int = 30):
 
     # Update layout
     fig.update_layout(
-        title=dict(
-            text=f"Device Ranking Ladder (Top {top_n})",
-            x=0.4,
-            y=0.95,
-            font=dict(size=16, family="Arial, sans-serif", color="rgba(0,0,0,1.0)"),
-        ),
+        # title=dict(
+        #     text=f"Device Ranking Ladder (Top {top_n})",
+        #     x=0.4,
+        #     y=0.95,
+        #     font=dict(size=16, family="Arial, sans-serif", color="rgba(0,0,0,1.0)"),
+        # ),
         xaxis=dict(
             title="Rating",
             showgrid=True,
@@ -529,7 +529,7 @@ def render_device_rankings(df: pd.DataFrame):
             with col3:
                 st.metric("Total Models", total_models)
 
-            st.markdown("---")
+            # st.markdown("---")
 
             # Display confident rankings
             if not g2_confident.empty:
@@ -609,29 +609,37 @@ def render_device_rankings(df: pd.DataFrame):
                 g2_confident_display.index = g2_confident_display.index + 1
                 g2_confident_display = g2_confident_display.rename_axis("Rank")
 
-                # Display the ranking ladder
-                st.plotly_chart(
-                    create_ranking_ladder(g2_confident_display, top_n=30),
-                    use_container_width=True,
-                )
-
-                # Display the table
-                st.dataframe(
-                    g2_confident_display[
-                        [
-                            "Device",
-                            "Platform",
-                            "Rating",
-                            "Rating Deviation",
-                            "Token Rating",
-                            "Prompt Rating",
-                            "Model Size Range",
-                        ]
-                    ],
-                    use_container_width=True,
-                    height=min(600, (len(g2_confident_display) + 1) * 35 + 40),
-                    hide_index=False,
+                tab1, tab2 = st.tabs(
+                    [
+                        "Performance Ladder",
+                        "Performance Table",
+                    ]
                 )
+                with tab1:
+                    # Display the ranking ladder
+                    st.plotly_chart(
+                        create_ranking_ladder(g2_confident_display, top_n=30),
+                        use_container_width=True,
+                    )
+
+                with tab2:
+                    # Display the table
+                    st.dataframe(
+                        g2_confident_display[
+                            [
+                                "Device",
+                                "Platform",
+                                "Rating",
+                                "Rating Deviation",
+                                "Token Rating",
+                                "Prompt Rating",
+                                "Model Size Range",
+                            ]
+                        ],
+                        use_container_width=True,
+                        height=min(600, (len(g2_confident_display) + 1) * 35 + 40),
+                        hide_index=False,
+                    )
 
             else:
                 st.warning(