Minor UI fixes and styling for ranking (#7)

- Minor UI fixes and styling for ranking (503603c71fcaa304397eedc26175fb82f2c7f235)


Co-authored-by: Kai <[email protected]>

static/styles.css

@@ -298,9 +298,17 @@ body, .gradio-container {
 }
 
 .insufficient-alert strong {
-    display: block;
+    display: inline-flex !important;
+    align-items: center !important;
     margin-bottom: 5px;
-    font-size: 1.05em;
+    font-size: 1.1em !important;
+    font-weight: 600 !important;
+}
+
+.insufficient-alert strong svg {
+    margin-right: 8px !important;
+    width: 1em !important;
+    height: 1em !important;
 }
 
 .insufficient-alert p {
@@ -316,22 +324,18 @@ body, .gradio-container {
     font-size: 1.2em !important;
 }
 
-/* COMPLETELY NEW APPROACH FOR SUMMARY CARDS */
-/* Make the summary card row flex */
 #main-interface-area > div:nth-child(7) > div {
     display: flex !important;
     flex-direction: row !important;
     align-items: stretch !important;
 }
 
-/* Style each column in the summary row */
 #main-interface-area > div:nth-child(7) > div > div {
     flex: 1 !important;
     display: flex !important;
     flex-direction: column !important;
 }
 
-/* Reset all padding/margin for summary cards */
 .summary-card {
     border: 1px solid var(--border-light) !important;
     border-radius: 6px !important;
@@ -354,7 +358,6 @@ body, .gradio-container {
     border-left: 3px solid var(--model-b-color) !important;
 }
 
-/* Style the form inside summary cards */
 .summary-card .gr-form {
     margin: 0 !important;
     padding: 0 !important;
@@ -363,7 +366,6 @@ body, .gradio-container {
     flex-direction: column !important;
 }
 
-/* Style the inner div of the form */
 .summary-card .gr-form > div {
     margin: 0 !important;
     padding: 0 !important;
@@ -372,7 +374,6 @@ body, .gradio-container {
     flex-direction: column !important;
 }
 
-/* Style the label */
 .summary-card .gr-input-label {
     font-size: 1.1em !important;
     font-weight: 600 !important;
@@ -381,7 +382,6 @@ body, .gradio-container {
     color: var(--text-dark) !important;
 }
 
-/* Style the textbox container */
 .summary-card .gr-textbox {
     border: none !important;
     background: transparent !important;
@@ -390,7 +390,6 @@ body, .gradio-container {
     flex: 1 !important;
 }
 
-/* Style the textarea */
 .summary-card textarea {
     background-color: transparent !important;
     border: none !important;
@@ -406,7 +405,6 @@ body, .gradio-container {
     overflow-y: visible !important;
 }
 
-/* Force scrollbars when needed */
 .summary-card-wrapper {
     height: 100% !important;
     overflow-y: auto !important;
@@ -503,19 +501,27 @@ body, .gradio-container {
 }
 
 .model-reveal {
-    font-size: 1.3em !important;
-    padding: 8px 0 !important;
+    font-size: 1em !important;
     text-align: center !important;
-    margin-top: 5px !important;
     font-weight: 600 !important;
-    border-radius: 6px !important;
+    background-color: transparent !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    border: none !important;
+}
+
+.model-reveal span {
+    font-size: 1.2em !important; 
+    display: block !important;
+    width: 100% !important;
+    padding: 18px 15px !important; 
 }
 
-.model-a-reveal {
+.model-a-reveal span {
     background-color: rgba(146, 180, 244, 0.2) !important;
 }
 
-.model-b-reveal {
+.model-b-reveal span {
     background-color: rgba(248, 173, 167, 0.2) !important;
 }
 
@@ -692,15 +698,140 @@ hr {
     }
 }
 
-/* Fix for specificity to override Gradio defaults */
-body textarea.gr-box, 
-body .gr-box textarea {
-    font-size: 1em !important;
-    line-height: 1.4 !important;
-    color: var(--text-dark) !important;
-    background-color: transparent !important;
+.summary-card textarea {
+    scroll-behavior: smooth !important;
+    scroll-margin-top: 0 !important;
+    scroll-snap-align: start !important;
+}
+
+.summary-card textarea::after {
+    content: "";
+    display: block;
+    height: 0;
+    overflow: hidden;
+    scroll-snap-align: start;
+}
+
+#main-interface-area > div:nth-child(7) > div {
+    content: "" !important;
+    overflow: auto !important;
+    scroll-behavior: smooth !important;
+}
+
+#main-interface-area > div:nth-child(7)::after {
+    content: "var textareas = document.querySelectorAll('.summary-card textarea'); textareas.forEach(function(t) { t.scrollTop = 0; });" !important;
+    display: none !important;
+}
+
+.gr-textbox:not(:empty) {
+    scroll-behavior: smooth;
+    scrollbar-width: thin;
+}
+
+.orange-title {
+    color: var(--primary) !important;
+    font-weight: bold !important;
+}
+
+.model-link {
+    color: var(--text-dark, #333333) !important;
+    text-decoration: none !important;
+    border-bottom: 1px dotted var(--border-light, #E6E6E6) !important;
+    transition: color 0.2s, border-color 0.2s !important;
+    padding: 2px 0 !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    font-weight: 500 !important;
+}
+
+.model-link:hover {
+    color: #FF5500 !important;
+    border-color: #FF5500 !important;
+}
+
+.external-icon {
+    display: inline-block !important;
+    margin-left: 5px !important;
+    opacity: 0.6 !important;
+    transition: opacity 0.2s !important;
+}
+
+.model-link:hover .external-icon {
+    opacity: 1 !important;
+}
+
+#leaderboard-info {
+    margin: 15px 0 !important;
+    padding: 0 !important;
+    background-color: rgba(255, 236, 224, 0.5) !important;
     border: none !important;
-    box-shadow: none !important;
-    height: auto !important;
-    min-height: 150px !important;
+}
+
+#leaderboard-info > div {
+    margin: 0 !important;
+    padding: 15px !important;
+    background-color: var(--background-light, #F9F9F9) !important;
+    border: none !important;
+}
+
+#leaderboard-info h3 {
+    margin-top: 0 !important;
+    margin-bottom: 10px !important;
+    color: var(--primary, #FF7D1E) !important;
+}
+
+#leaderboard-info p {
+    margin-bottom: 8px !important;
+    line-height: 1.5 !important;
+}
+
+#leaderboard-info ul {
+    margin-bottom: 10px;
+    padding-left: 20px;
+}
+
+#leaderboard-info li {
+    margin-bottom: 4px;
+    line-height: 1.4;
+}
+
+.leaderboard-table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    font-size: 1.05em !important;
+    margin-top: 15px;
+}
+
+.leaderboard-table th {
+    background-color: #FFF1E6 !important;
+    color: var(--text-dark, #333333);
+    font-weight: 600;
+    text-align: left;
+    padding: 14px 15px !important;
+    border-bottom: 1px solid var(--border-light, #E6E6E6);
+    font-size: 1.1em !important;
+}
+
+.leaderboard-table td {
+    padding: 12px 15px !important;
+    border-bottom: 1px solid var(--border-light, #E6E6E6);
+    background-color: var(--background-main, #FFFFFF);
+    font-size: 1.05em !important;
+}
+
+.leaderboard-table th.centered,
+.leaderboard-table td.centered {
+    text-align: center;
+}
+
+.leaderboard-table td.elo-col {
+    font-weight: 600;
+    color: var(--primary, #FF7D1E);
+}
+
+.leaderboard-table .confidence-value {
+    color: var(--text-medium, #666666);
+    font-size: 0.9em;
+    font-weight: normal;
 }