fixed switch variable form when in new dashboard inline layout.

public/app/features/dashboard-scene/settings/variables/components/SwitchVariableForm.tsx

@@ -11,6 +11,7 @@ interface SwitchVariableFormProps {
   disabledValue: string;
   onEnabledValueChange: (value: string) => void;
   onDisabledValueChange: (value: string) => void;
+  inline?: boolean;
 }
 
 const VALUE_PAIR_OPTIONS: Array<ComboboxOption<string>> = [
@@ -25,6 +26,7 @@ export function SwitchVariableForm({
   disabledValue,
   onEnabledValueChange,
   onDisabledValueChange,
+  inline,
 }: SwitchVariableFormProps) {
   const currentValuePairType = getCurrentValuePairType(enabledValue, disabledValue);
   const [isCustomValuePairType, setIsCustomValuePairType] = useState(currentValuePairType === 'custom');
@@ -87,11 +89,15 @@ export function SwitchVariableForm({
     }
   };
 
+  const fieldWidth = inline ? undefined : 30;
+
   return (
     <>
-      <VariableLegend>
-        <Trans i18nKey="dashboard-scene.switch-variable-form.switch-options">Switch options</Trans>
-      </VariableLegend>
+      {!inline && (
+        <VariableLegend>
+          <Trans i18nKey="dashboard-scene.switch-variable-form.switch-options">Switch options</Trans>
+        </VariableLegend>
+      )}
 
       <Stack gap={2} direction="column">
         <Field
@@ -103,7 +109,7 @@ export function SwitchVariableForm({
           )}
         >
           <Combobox
-            width={40}
+            width={fieldWidth}
             value={isCustomValuePairType ? 'custom' : currentValuePairType}
             options={VALUE_PAIR_OPTIONS}
             onChange={onValuePairTypeChange}
@@ -125,7 +131,7 @@ export function SwitchVariableForm({
               invalid={enabledValueInvalid}
             >
               <Input
-                width={40}
+                width={fieldWidth}
                 defaultValue={enabledValue}
                 onChange={(event) => {
                   handleEnabledValueChange(event.currentTarget.value);
@@ -149,7 +155,7 @@ export function SwitchVariableForm({
               invalid={disabledValueInvalid}
             >
               <Input
-                width={40}
+                width={fieldWidth}
                 defaultValue={disabledValue}
                 onChange={(event) => handleDisabledValueChange(event.currentTarget.value)}
                 placeholder={t(

public/app/features/dashboard-scene/settings/variables/editors/SwitchVariableEditor.tsx

@@ -5,9 +5,10 @@ import { SwitchVariableForm } from '../components/SwitchVariableForm';
 
 interface SwitchVariableEditorProps {
   variable: SwitchVariable;
+  inline?: boolean;
 }
 
-export function SwitchVariableEditor({ variable }: SwitchVariableEditorProps) {
+export function SwitchVariableEditor({ variable, inline = false }: SwitchVariableEditorProps) {
   const { value, enabledValue, disabledValue } = variable.useState();
 
   const onEnabledValueChange = (newEnabledValue: string) => {
@@ -36,6 +37,7 @@ export function SwitchVariableEditor({ variable }: SwitchVariableEditorProps) {
       disabledValue={disabledValue}
       onEnabledValueChange={onEnabledValueChange}
       onDisabledValueChange={onDisabledValueChange}
+      inline={inline}
     />
   );
 }
@@ -49,7 +51,7 @@ export function getSwitchVariableOptions(variable: SceneVariable): OptionsPaneIt
   return [
     new OptionsPaneItemDescriptor({
       id: `variable-${variable.state.name}-value`,
-      render: () => <SwitchVariableEditor variable={variable} />,
+      render: () => <SwitchVariableEditor variable={variable} inline={true} />,
     }),
   ];
 }