[Dashboard] Make apply button aligned with fields on small screens (#35062)

frontend/src/metabase/dashboard/components/Dashboard/Dashboard.styled.tsx

@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import type { ComponentPropsWithoutRef } from "react";
 import { color } from "metabase/lib/colors";
-import { space } from "metabase/styled-components/theme";
+import { breakpointMaxSmall, space } from "metabase/styled-components/theme";
 
 import { FullWidthContainer } from "metabase/styled-components/layout/FullWidthContainer";
 
@@ -117,6 +117,10 @@ export const ParametersWidgetContainer = styled(FullWidthContainer)<{
   top: 0;
   left: 0;
 
+  ${breakpointMaxSmall} {
+    flex-direction: column;
+  }
+
   ${({ isEditing }) =>
     isEditing &&
     css`

frontend/src/metabase/parameters/components/FilterApplyButton/FilterApplyButton.styled.ts

 import styled from "@emotion/styled";
 
-import { space } from "metabase/styled-components/theme";
+import { breakpointMaxSmall, space } from "metabase/styled-components/theme";
 import Button from "metabase/core/components/Button/Button";
 
 export const ApplyButton = styled(Button)`
   margin-left: auto;
   margin-top: ${space(1)};
+
+  ${breakpointMaxSmall} {
+    width: 100%;
+    /* make button same height as fields on small screens */
+    padding-top: 11px;
+    padding-bottom: 11px;
+  }
 `;