feat: changelist horizontal scrollbar position (#519)

Author: lukasvinclav

README.md

@@ -321,6 +321,9 @@ class CustomAdminClass(ModelAdmin):
     # Display submit button in filters
     list_filter_submit = False
 
+    # Position horizontal scrollbar in changelist at the top
+    list_horizontal_scrollbar_top = False
+
     # Custom actions
     actions_list = []  # Displayed above the results list
     actions_row = []  # Displayed in a table row in results list

src/unfold/admin.py

@@ -227,7 +227,9 @@ class ModelAdmin(ModelAdminMixin, BaseModelAdmin):
     actions_submit_line = ()
     custom_urls = ()
     add_fieldsets = ()
+    list_horizontal_scrollbar_top = False
     list_filter_submit = False
+    compressed_fields = False
     readonly_preprocess_fields = {}
     checks_class = UnfoldModelAdminChecks
 

src/unfold/static/unfold/css/styles.css

@@ -641,3 +641,7 @@ trix-toolbar[id^="trix-toolbar-"] {
 .simplebar-track .simplebar-scrollbar::before {
   @apply bg-gray-900/80  dark:bg-gray-400/80;
 }
+
+.simplebar-horizontal-scrollbar-top .simplebar-track.simplebar-horizontal {
+  @apply top-9
+}

src/unfold/styles.css

@@ -7,7 +7,7 @@
 {% endif %}
 
 {% if results %}
-    <div class="overflow-x-auto lg:border lg:rounded-md lg:shadow-sm lg:dark:border-gray-800" data-simplebar data-simplebar-auto-hide="false">
+    <div class="overflow-x-auto lg:border lg:rounded-md lg:shadow-sm lg:dark:border-gray-800 {% if cl.model_admin.list_horizontal_scrollbar_top %}simplebar-horizontal-scrollbar-top{% endif %}" data-simplebar data-simplebar-auto-hide="false">
         <table id="result_list" class="block border-gray-200 border-spacing-none border-separate text-gray-700 w-full dark:text-gray-400 lg:table">
             <thead>
                 <tr>