update

src/display/css_html_js.py

@@ -1,105 +1,136 @@
-custom_css = """
-
-.markdown-text {
+custom_css = """.markdown-text { 
     font-size: 16px !important;
 }
 
-#models-to-add-text {
+#models-to-add-text { 
     font-size: 18px !important;
 }
 
-#citation-button span {
+#citation-button span { 
     font-size: 16px !important;
 }
 
-#citation-button textarea {
+#citation-button textarea { 
     font-size: 16px !important;
 }
 
-#citation-button > label > button {
-    margin: 6px;
+#citation-button > label > button { 
+    margin: 6px; 
     transform: scale(1.3);
 }
 
-#leaderboard-table {
+#leaderboard-table { 
     margin-top: 15px
 }
 
-#leaderboard-table-lite {
+#leaderboard-table-lite { 
     margin-top: 15px
 }
 
-#search-bar-table-box > div:first-child {
-    background: none;
+#search-bar-table-box > div:first-child { 
+    background: none; 
     border: none;
 }
- 
-#search-bar {
+
+#search-bar { 
     padding: 0px;
 }
 
 /* Limit the width of the first AutoEvalColumn so that names don't expand too much */
 table td:first-child,
-table th:first-child {
-    max-width: 400px;
-    overflow: auto;
+table th:first-child { 
+    max-width: 400px; 
+    overflow: auto; 
     white-space: nowrap;
 }
 
-.tab-buttons button {
+.tab-buttons button { 
     font-size: 20px;
 }
 
-#scale-logo {
-    border-style: none !important;
-    box-shadow: none;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
+#scale-logo { 
+    border-style: none !important; 
+    box-shadow: none; 
+    display: block; 
+    margin-left: auto; 
+    margin-right: auto; 
     max-width: 600px;
 }
 
-#scale-logo .download {
+#scale-logo .download { 
     display: none;
 }
-#filter_type{
-    border: 0;
-    padding-left: 0;
+
+#filter_type{ 
+    border: 0; 
+    padding-left: 0; 
     padding-top: 0;
 }
-#filter_type label {
+
+#filter_type label { 
     display: flex;
 }
-#filter_type label > span{
-    margin-top: var(--spacing-lg);
+
+#filter_type label > span{ 
+    margin-top: var(--spacing-lg); 
     margin-right: 0.5em;
 }
-#filter_type label > .wrap{
+
+#filter_type label > .wrap{ 
     width: 103px;
 }
-#filter_type label > .wrap .wrap-inner{  
+
+#filter_type label > .wrap .wrap-inner{ 
     padding: 2px;
 }
-#filter_type label > .wrap .wrap-inner input{
+
+#filter_type label > .wrap .wrap-inner input{ 
     width: 1px
 }
-#filter-columns-type{
-    border:0;
+
+#filter-columns-type{ 
+    border:0; 
     padding:0.5;
 }
-#filter-columns-size{
-    border:0;
+
+#filter-columns-size{ 
+    border:0; 
     padding:0.5;
 }
-#box-filter > .form{
+
+#box-filter > .form{ 
     border: 0
 }
+
+/* New Column Selection Improvements */
+.select-columns-container {
+    max-height: 300px;
+    overflow-y: auto;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 5px;
+}
+
+.select-columns-container label {
+    font-size: 0.9em;
+    padding: 2px;
+    margin: 0;
+}
+
+.column-categories {
+    margin-bottom: 10px;
+}
+
+/* Ensure accordion is properly styled */
+.accordion {
+    margin-bottom: 15px;
+}
 """
 
-get_window_url_params = """
-    function(url_params) {
-        const params = new URLSearchParams(window.location.search);
-        url_params = Object.fromEntries(params);
-        return url_params;
-    }
-    """
+get_window_url_params = """ 
+function(url_params) { 
+    const params = new URLSearchParams(window.location.search); 
+    url_params = Object.fromEntries(params); 
+    return url_params; 
+} 
+"""