Lift className up

frontend/src/metabase/parameters/components/ParameterValueWidget.module.css

@@ -69,3 +69,7 @@
   font-weight: bold;
   color: var(--mb-color-text-secondary);
 }
+
+.widgetStatus {
+  flex: 0 0 auto;
+}

frontend/src/metabase/parameters/components/ParameterValueWidget.tsx

@@ -84,6 +84,7 @@ export const ParameterValueWidget = ({
     ) {
       return (
         <WidgetStatus
+          className={S.widgetStatus}
           highlighted={fieldHasValueOrFocus}
           status="reset"
           onClick={() => setParameterValueToDefault?.(parameter.id)}
@@ -94,6 +95,7 @@ export const ParameterValueWidget = ({
     if (value != null) {
       return (
         <WidgetStatus
+          className={S.widgetStatus}
           highlighted={fieldHasValueOrFocus}
           status="clear"
           onClick={() => {
@@ -105,7 +107,7 @@ export const ParameterValueWidget = ({
     }
 
     if (!hasNoPopover(parameter)) {
-      return <WidgetStatus status="empty" />;
+      return <WidgetStatus className={S.widgetStatus} status="empty" />;
     }
   };
 
@@ -119,6 +121,7 @@ export const ParameterValueWidget = ({
     ) {
       return (
         <WidgetStatus
+          className={S.widgetStatus}
           highlighted={fieldHasValueOrFocus}
           status="reset"
           onClick={() => setParameterValueToDefault?.(parameter.id)}
@@ -139,7 +142,7 @@ export const ParameterValueWidget = ({
 
     if (!icon) {
       // This is required to keep input width constant
-      return <WidgetStatus status="none" />;
+      return <WidgetStatus className={S.widgetStatus} status="none" />;
     }
 
     return icon;

frontend/src/metabase/parameters/components/WidgetStatus/WidgetStatus.module.css

-.root {
-  flex: 0 0 auto;
-}

frontend/src/metabase/parameters/components/WidgetStatus/WidgetStatus.tsx

@@ -3,10 +3,10 @@ import { t } from "ttag";
 
 import { Button, Flex, Icon, rem, Tooltip } from "metabase/ui";
 
-import S from "./WidgetStatus.module.css";
 import type { Status } from "./types";
 
 type Props = {
+  className?: string;
   highlighted?: boolean;
   status: Status;
   onClick?: () => void;
@@ -20,7 +20,12 @@ const COMPACT_BUTTON_PADDING = 4;
  */
 const BUTTON_MARGIN = -COMPACT_BUTTON_PADDING;
 
-export const WidgetStatus = ({ highlighted, status, onClick }: Props) => {
+export const WidgetStatus = ({
+  className,
+  highlighted,
+  status,
+  onClick,
+}: Props) => {
   const handleClick = (event: MouseEvent) => {
     if (onClick) {
       event.stopPropagation();
@@ -31,7 +36,7 @@ export const WidgetStatus = ({ highlighted, status, onClick }: Props) => {
   return (
     <Flex
       align="center"
-      className={S.root}
+      className={className}
       h={0} // trick to prevent this element from affecting parent's height
       ml="auto"
     >