fix(dashboard): Vertical filter bar gradient is extending past the filter bar area (#39204)

Co-authored-by: Mike Bridge <michael.bridge@ext.preset.io>
(cherry picked from commit 8bcc90c766)

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/ActionButtons.test.tsx

@@ -16,7 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { OPEN_FILTER_BAR_WIDTH } from 'src/dashboard/constants';
 import { render, screen, userEvent } from 'spec/helpers/testing-library';
 import ActionButtons from './index';
 
@@ -76,30 +75,3 @@ test('should apply', () => {
   userEvent.click(applyBtn);
   expect(mockedProps.onApply).toHaveBeenCalled();
 });
-
-// eslint-disable-next-line no-restricted-globals -- TODO: Migrate from describe blocks
-describe('custom width', () => {
-  test('sets its default width with OPEN_FILTER_BAR_WIDTH', () => {
-    const mockedProps = createProps();
-    render(<ActionButtons {...mockedProps} />, { useRedux: true });
-    const container = screen.getByTestId('filterbar-action-buttons');
-    expect(container).toHaveStyle({
-      width: `${OPEN_FILTER_BAR_WIDTH - 1}px`,
-    });
-  });
-
-  test('sets custom width', () => {
-    const mockedProps = createProps();
-    const expectedWidth = 423;
-    const { getByTestId } = render(
-      <ActionButtons {...mockedProps} width={expectedWidth} />,
-      {
-        useRedux: true,
-      },
-    );
-    const container = getByTestId('filterbar-action-buttons');
-    expect(container).toHaveStyle({
-      width: `${expectedWidth - 1}px`,
-    });
-  });
-});

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx

@@ -27,13 +27,11 @@ import {
 } from '@superset-ui/core';
 import { css, SupersetTheme, styled } from '@apache-superset/core/theme';
 import { Button, Tooltip, Icons, Flex } from '@superset-ui/core/components';
-import { OPEN_FILTER_BAR_WIDTH } from 'src/dashboard/constants';
 import tinycolor from 'tinycolor2';
 import { FilterBarOrientation } from 'src/dashboard/types';
 import { getFilterBarTestId } from '../utils';
 
 interface ActionButtonsProps {
-  width?: number;
   onApply: () => void;
   onClearAll: () => void;
   dataMaskSelected: DataMaskState;
@@ -44,17 +42,16 @@ interface ActionButtonsProps {
   hasOutOfScopeRequiredFilters?: boolean;
 }
 
-const ButtonsContainer = styled.div<{ isVertical: boolean; width: number }>`
+const ButtonsContainer = styled.div<{ isVertical: boolean }>`
-  ${({ theme, isVertical, width }) => css`
+  ${({ theme, isVertical }) => css`
     display: flex;
 
     ${isVertical
       ? css`
           flex-direction: column;
           align-items: center;
-          position: fixed;
+          position: sticky;
           z-index: 100;
-          width: ${width - 1}px;
           bottom: 0;
           padding: ${theme.sizeUnit * 4}px;
           padding-top: ${theme.sizeUnit * 6}px;
@@ -100,7 +97,6 @@ const clearAllButtonStyle = (theme: SupersetTheme, isVertical: boolean) => css`
 `;
 
 const ActionButtons = ({
-  width = OPEN_FILTER_BAR_WIDTH,
   onApply,
   onClearAll,
   dataMaskApplied,
@@ -143,7 +139,6 @@ const ActionButtons = ({
   return (
     <ButtonsContainer
       isVertical={isVertical}
-      width={width}
       data-test="filterbar-action-buttons"
     >
       <Button

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx

@@ -600,7 +600,6 @@ const FilterBar: FC<FiltersBarProps> = ({
     () => (
       <ActionButtons
         filterBarOrientation={orientation}
-        width={verticalConfig?.width}
         onApply={handleApply}
         onClearAll={handleClearAll}
         dataMaskSelected={dataMaskSelected}
@@ -612,7 +611,6 @@ const FilterBar: FC<FiltersBarProps> = ({
     ),
     [
       orientation,
-      verticalConfig?.width,
       handleApply,
       handleClearAll,
       dataMaskSelected,