fix(filters): remove gap in horizontal filter bar and fix loading screen theming and sorting

eschutho · claude · eschutho · commit 9f596a9313af · 2025-09-12T16:28:59.000-07:00
- Remove top padding from horizontal filter bar to eliminate visual gap - Set themed background color on loading screen to respect dark mode - Remove fallback "Loading..." text to prevent Times New Roman display - Use colorBgBase theme token for proper light/dark mode support - Fix filter value sorting to preserve backend metric-based order when sortMetric is specified 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx
@@ -32,7 +32,7 @@ import crossFiltersSelector from './CrossFilters/selectors';
 
 const HorizontalBar = styled.div`
   ${({ theme }) => `
-    padding: ${theme.sizeUnit * 3}px ${theme.sizeUnit * 2}px ${
+    padding: 0 ${theme.sizeUnit * 2}px ${
       theme.sizeUnit * 3
     }px ${theme.sizeUnit * 4}px;
     background: ${theme.colorBgBase};
diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
@@ -317,13 +317,20 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
 
   const sortComparator = useCallback(
     (a: LabeledValue, b: LabeledValue) => {
+      // When sortMetric is specified, the backend already sorted the data correctly
+      // Don't override the backend's metric-based sorting with frontend alphabetical sorting
+      if (formData.sortMetric) {
+        return 0; // Preserve the original order from the backend
+      }
+
+      // Only apply alphabetical sorting when no sortMetric is specified
       const labelComparator = propertyComparator('label');
       if (formData.sortAscending) {
         return labelComparator(a, b);
       }
       return labelComparator(b, a);
     },
-    [formData.sortAscending],
+    [formData.sortAscending, formData.sortMetric],
   );
 
   // Use effect for initialisation for filter plugin
diff --git a/superset/templates/superset/spa.html b/superset/templates/superset/spa.html
@@ -69,7 +69,7 @@
     {% endblock %}
   </head>
 
-  <body {% if standalone_mode %}class="standalone"{% endif %}>
+  <body {% if standalone_mode %}class="standalone"{% endif %} style="margin: 0; padding: 0; background-color: {{ tokens.get('colorBgBase', '#ffffff') }};">
 
     {% block body %}
       <div id="app" data-bootstrap="{{ bootstrap_data }}">
@@ -85,14 +85,10 @@
           <!-- Custom URL from theme -->
           <img
             src="{{ tokens.brandSpinnerUrl }}"
-            alt="Loading..."
+            alt=""
             style="{{ spinner_style }}"
           />
-        {% else %}
-          <!-- Fallback: This should rarely happen with new logic -->
-          <div style="{{ spinner_style }}">
-            Loading...
-          </div>
+        {# Remove fallback text - let React app handle loading state #}
         {% endif %}
       </div>
     {% endblock %}
