From d123249bd2d39ff04ce3e57a5bf6ed261beec976 Mon Sep 17 00:00:00 2001
From: Richard Fogaca Nienkotter
 <63572350+richardfogaca@users.noreply.github.com>
Date: Tue, 11 Nov 2025 05:48:25 -0300
Subject: [PATCH] fix(dashboard): align filter bar elements vertically in
 horizontal mode (#36036)

---
 .../src/components/Loading/index.tsx             |  4 +++-
 .../FilterBar/ActionButtons/index.tsx            |  1 -
 .../FilterBar/FilterControls/FilterControl.tsx   |  4 +++-
 .../FilterBar/FilterControls/FilterValue.tsx     | 16 ++++++++++++++--
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/superset-frontend/packages/superset-ui-core/src/components/Loading/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/Loading/index.tsx
index 92028672942..b8a73ca62d2 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Loading/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Loading/index.tsx
@@ -49,7 +49,9 @@ const LoaderWrapper = styled.div<{
 
   &.inline-centered {
     margin: 0 auto;
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
   &.floating {
     position: absolute;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx
index 7d2db7dec63..61859b3dd7a 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx
@@ -152,7 +152,6 @@ const ActionButtons = ({
       <Button
         disabled={!isClearAllEnabled}
         buttonStyle="link"
-        buttonSize="small"
         className="filter-clear-all-button"
         onClick={onClearAll}
         {...getFilterBarTestId('clear-button')}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
index 0e1af5ade96..da6ab23fca3 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
@@ -53,6 +53,7 @@ const VerticalFilterControlTitle = styled.h4`
 const HorizontalFilterControlTitle = styled(VerticalFilterControlTitle)`
   font-weight: ${({ theme }) => theme.fontWeightNormal};
   color: ${({ theme }) => theme.colorText};
+  margin: 0;
   ${truncationCSS};
 `;
 
@@ -60,6 +61,7 @@ const HorizontalOverflowFilterControlTitle = styled(
   HorizontalFilterControlTitle,
 )`
   max-width: none;
+  margin: ${({ theme }) => `${theme.sizeUnit * 2}px 0 ${theme.sizeUnit}px`};
 `;
 
 const VerticalFilterControlTitleBox = styled.div`
@@ -162,7 +164,7 @@ const HorizontalFormItem = styled(StyledFormItem)<{
     align-items: center;
   }
 
-  .ant-form-item-label {
+  && > .ant-row > .ant-form-item-label {
     display: flex;
     align-items: center;
     overflow: visible;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx
index b08ded73cdc..4c465e6e2dd 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx
@@ -62,7 +62,15 @@ import { useFilterOutlined } from '../useFilterOutlined';
 const HEIGHT = 32;
 
 // Overrides superset-ui height with min-height
-const StyledDiv = styled.div`
+const StyledDiv = styled.div<{
+  orientation: FilterBarOrientation;
+  overflow: boolean;
+}>`
+  padding-bottom: ${({ theme, orientation, overflow }) =>
+    orientation === FilterBarOrientation.Horizontal && !overflow
+      ? 0
+      : (theme?.sizeUnit ?? 4)}px;
+
   & > div {
     height: auto !important;
     min-height: ${HEIGHT}px;
@@ -353,7 +361,11 @@ const FilterValue: FC<FilterControlProps> = ({
   }
 
   return (
-    <StyledDiv data-test="form-item-value">
+    <StyledDiv
+      data-test="form-item-value"
+      orientation={orientation}
+      overflow={overflow}
+    >
       {isLoading ? (
         <Loading position="inline-centered" size="s" muted />
       ) : (