Deploy Space: update src

src/display/css_html_js.py

@@ -70,22 +70,238 @@ custom_css = """
     letter-spacing: 0.04em;
     font-weight: 700;
 }
-.dataframe {
+.dataframe,
+.leaderboard-dataframe {
+    --leaderboard-model-column-width: 280px;
+    --cell-width-0: var(--leaderboard-model-column-width) !important;
     border-radius: 8px !important;
     overflow: hidden !important;
     border: 1px solid var(--bench-line) !important;
 }
-.dataframe table {
+.rank-leaderboard-dataframe {
+    --leaderboard-model-column-width: 460px;
+    --leaderboard-rank-table-min-width: 1720px;
+    --cell-width-0: 460px !important;
+}
+.dataframe table,
+.leaderboard-dataframe table {
+    table-layout: fixed !important;
+    min-width: 100% !important;
     font-size: 14px !important;
 }
-.dataframe th {
+.dataframe th,
+.leaderboard-dataframe th {
     background: #eef2f7 !important;
     color: var(--bench-ink) !important;
     font-weight: 750 !important;
 }
-.dataframe td {
+.dataframe td,
+.leaderboard-dataframe td {
+    color: #263244 !important;
+    overflow: hidden !important;
+}
+.dataframe th:first-child,
+.dataframe td:first-child,
+.leaderboard-dataframe th:first-child,
+.leaderboard-dataframe td:first-child {
+    width: var(--leaderboard-model-column-width) !important;
+    min-width: var(--leaderboard-model-column-width) !important;
+    max-width: var(--leaderboard-model-column-width) !important;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    white-space: nowrap !important;
+    scrollbar-width: thin;
+}
+.dataframe th:first-child > div,
+.dataframe td:first-child > div,
+.leaderboard-dataframe th:first-child > div,
+.leaderboard-dataframe td:first-child > div,
+.leaderboard-dataframe [role="columnheader"]:first-child > div,
+.leaderboard-dataframe [role="gridcell"]:first-child > div {
+    display: block !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    white-space: nowrap !important;
+}
+.leaderboard-dataframe .table-wrap,
+.leaderboard-dataframe .table-wrap table,
+.leaderboard-dataframe .table-wrap thead,
+.leaderboard-dataframe .table-wrap tbody,
+.leaderboard-dataframe .table-wrap tr {
+    --cell-width-0: var(--leaderboard-model-column-width) !important;
+    max-width: 100% !important;
+}
+.rank-leaderboard-dataframe .table-wrap {
+    --cell-width-0: 460px !important;
+    overflow-x: auto !important;
+}
+.rank-leaderboard-dataframe .table-wrap > table,
+.rank-leaderboard-dataframe .table-wrap > table.fixed-layout,
+.rank-leaderboard-dataframe svelte-virtual-table-viewport table.table,
+.rank-leaderboard-dataframe svelte-virtual-table-viewport table.table thead,
+.rank-leaderboard-dataframe svelte-virtual-table-viewport table.table tbody,
+.rank-leaderboard-dataframe svelte-virtual-table-viewport table.table tfoot {
+    min-width: var(--leaderboard-rank-table-min-width) !important;
+    width: var(--leaderboard-rank-table-min-width) !important;
+}
+.rank-leaderboard-dataframe .table-wrap > table th:first-child,
+.rank-leaderboard-dataframe svelte-virtual-table-viewport table.table th:first-child,
+.rank-leaderboard-dataframe svelte-virtual-table-viewport table.table td:first-child {
+    width: 460px !important;
+    min-width: 460px !important;
+    max-width: 460px !important;
+}
+.rank-leaderboard-dataframe .leaderboard-model-cell {
+    display: block !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    box-sizing: border-box !important;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    white-space: nowrap !important;
+    text-overflow: clip !important;
+    scrollbar-width: thin;
+}
+.rank-leaderboard-dataframe .leaderboard-model-cell::-webkit-scrollbar {
+    height: 6px;
+}
+.rank-html-output,
+.domain-rank-html {
+    border-radius: 8px !important;
+    overflow: hidden !important;
+    border: 1px solid var(--bench-line) !important;
+}
+.rank-table-scroll,
+.domain-rank-table-scroll {
+    width: 100% !important;
+    max-width: 100% !important;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    scrollbar-width: thin;
+}
+.rank-table-scroll::-webkit-scrollbar,
+.rank-fixed-window::-webkit-scrollbar,
+.domain-rank-table-scroll::-webkit-scrollbar,
+.domain-rank-model-window::-webkit-scrollbar {
+    height: 6px;
+}
+.rank-html-table,
+.domain-rank-table {
+    width: 100% !important;
+    min-width: 1800px !important;
+    table-layout: fixed !important;
+    border-collapse: separate !important;
+    border-spacing: 0 !important;
+    font-family: var(--font-mono) !important;
+    font-size: 14px !important;
+    line-height: var(--line-md) !important;
     color: #263244 !important;
 }
+.rank-html-table th,
+.rank-html-table td,
+.domain-rank-table th,
+.domain-rank-table td {
+    padding: 12px 14px !important;
+    border-left: 1px solid var(--bench-line) !important;
+    box-sizing: border-box !important;
+    overflow: hidden !important;
+    white-space: nowrap !important;
+    text-align: left !important;
+    font-weight: 700 !important;
+}
+.rank-html-table th:first-child,
+.rank-html-table td:first-child,
+.domain-rank-table th:first-child,
+.domain-rank-table td:first-child {
+    border-left: 0 !important;
+}
+.rank-html-table th,
+.domain-rank-table th {
+    background: #eef2f7 !important;
+    color: var(--bench-ink) !important;
+    font-weight: 750 !important;
+}
+.rank-html-table tbody tr:nth-child(odd),
+.domain-rank-table tbody tr:nth-child(odd) {
+    background: #f8fafc !important;
+}
+.rank-html-table tbody tr:nth-child(even),
+.domain-rank-table tbody tr:nth-child(even) {
+    background: #ffffff !important;
+}
+.rank-html-table .rank-fixed-column,
+.domain-rank-table .domain-rank-model-column {
+    width: auto !important;
+    min-width: 0 !important;
+    max-width: none !important;
+}
+.rank-fixed-window,
+.domain-rank-model-window {
+    display: block !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    white-space: nowrap !important;
+    text-overflow: clip !important;
+    box-sizing: border-box !important;
+    scrollbar-width: thin;
+}
+.leaderboard-dataframe .table-wrap .cell-wrap {
+    min-width: 0 !important;
+    max-width: 100% !important;
+    overflow: hidden !important;
+}
+.leaderboard-dataframe .table-wrap th:first-child .cell-wrap,
+.leaderboard-dataframe .table-wrap td:first-child .cell-wrap {
+    width: var(--leaderboard-model-column-width) !important;
+    max-width: var(--leaderboard-model-column-width) !important;
+    min-width: 0 !important;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+}
+.leaderboard-dataframe .table-wrap th:first-child .cell-wrap > span,
+.leaderboard-dataframe .table-wrap td:first-child .cell-wrap > span {
+    display: block !important;
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    white-space: nowrap !important;
+    text-overflow: clip !important;
+}
+.leaderboard-dataframe .table-wrap th:first-child .cell-wrap > span::-webkit-scrollbar,
+.leaderboard-dataframe .table-wrap td:first-child .cell-wrap > span::-webkit-scrollbar {
+    height: 6px;
+}
+.leaderboard-dataframe [role="columnheader"]:first-child,
+.leaderboard-dataframe [role="gridcell"]:first-child {
+    width: var(--leaderboard-model-column-width) !important;
+    min-width: var(--leaderboard-model-column-width) !important;
+    max-width: var(--leaderboard-model-column-width) !important;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    white-space: nowrap !important;
+}
+.dataframe th:first-child::-webkit-scrollbar,
+.dataframe td:first-child::-webkit-scrollbar,
+.dataframe th:first-child > div::-webkit-scrollbar,
+.dataframe td:first-child > div::-webkit-scrollbar,
+.leaderboard-dataframe th:first-child::-webkit-scrollbar,
+.leaderboard-dataframe td:first-child::-webkit-scrollbar,
+.leaderboard-dataframe th:first-child > div::-webkit-scrollbar,
+.leaderboard-dataframe td:first-child > div::-webkit-scrollbar,
+.leaderboard-dataframe [role="columnheader"]:first-child::-webkit-scrollbar,
+.leaderboard-dataframe [role="gridcell"]:first-child::-webkit-scrollbar,
+.leaderboard-dataframe [role="columnheader"]:first-child > div::-webkit-scrollbar,
+.leaderboard-dataframe [role="gridcell"]:first-child > div::-webkit-scrollbar {
+    height: 6px;
+}
 .domain-heading {
     margin-top: 1.75rem;
     margin-bottom: 0.5rem;