diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/ActionButtons.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/ActionButtons.test.tsx
index c6ce03e0398..2e4a0ad1dda 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/ActionButtons.test.tsx
+++ b/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(, { 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(
- ,
- {
- useRedux: true,
- },
- );
- const container = getByTestId('filterbar-action-buttons');
- expect(container).toHaveStyle({
- width: `${expectedWidth - 1}px`,
- });
- });
-});
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 7c685842946..7b0c671000b 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx
+++ b/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 }>`
- ${({ theme, isVertical, width }) => css`
+const ButtonsContainer = styled.div<{ isVertical: boolean }>`
+ ${({ 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 (