diff --git a/packages/toolpad-studio/src/runtime/toolpadComponents/layoutBox.ts b/packages/toolpad-studio/src/runtime/toolpadComponents/layoutBox.ts
index d7b272db61b..9a2cc841ebf 100644
--- a/packages/toolpad-studio/src/runtime/toolpadComponents/layoutBox.ts
+++ b/packages/toolpad-studio/src/runtime/toolpadComponents/layoutBox.ts
@@ -15,7 +15,7 @@ export const layoutBoxArgTypes: {
     enum: ['start', 'center', 'end', 'space-between', 'space-around', 'space-evenly'],
     default: 'start',
     label: 'Horizontal alignment',
-    control: { type: 'HorizontalAlign', hideLabel: true },
+    control: { type: 'HorizontalAlign', hideLabel: true, bindable: false },
   },
   verticalAlign: {
     helperText: 'Vertical alignment of the component.',
@@ -23,6 +23,6 @@ export const layoutBoxArgTypes: {
     enum: ['start', 'center', 'end', 'space-between', 'space-around', 'space-evenly'],
     default: 'start',
     label: 'Vertical alignment',
-    control: { type: 'VerticalAlign', hideLabel: true },
+    control: { type: 'VerticalAlign', hideLabel: true, bindable: false },
   },
 };
diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/BindableEditor.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/BindableEditor.tsx
index 007ebc820fb..16354442329 100644
--- a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/BindableEditor.tsx
+++ b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/BindableEditor.tsx
@@ -14,6 +14,7 @@ import {
   JsRuntime,
   ScopeMeta,
   EnvAttrValue,
+  ArgTypeDefinition,
 } from '@toolpad/studio-runtime';
 import { WithControlledProp } from '@toolpad/utils/types';
 import { getBindingType } from '../../../runtime/bindings';
@@ -43,7 +44,7 @@ export interface BindableEditorProps<V> extends WithControlledProp<BindableAttrV
   bindable?: boolean;
   disabled?: boolean;
   jsRuntime: JsRuntime;
-  propType: PropValueType;
+  propType: ArgTypeDefinition<any>;
   renderControl?: (params: RenderControlParams<any>) => React.ReactNode;
   liveBinding?: LiveBinding;
   globalScope?: Record<string, unknown>;
@@ -103,14 +104,14 @@ export default function BindableEditor<V>({
 
   return (
     <EditorRoot sx={sx}>
-      <React.Fragment>
-        {renderControl({
-          label,
-          propType,
-          disabled: disabled || !!hasBinding,
-          value: constValue,
-          onChange: handlePropConstChange,
-        })}
+      {renderControl({
+        label,
+        propType,
+        disabled: disabled || !!hasBinding,
+        value: constValue,
+        onChange: handlePropConstChange,
+      })}
+      {propType.control?.bindable === false ? null : (
         <BindingEditor<V>
           globalScope={globalScope}
           globalScopeMeta={globalScopeMeta}
@@ -125,7 +126,7 @@ export default function BindableEditor<V>({
           env={env}
           declaredEnvKeys={declaredEnvKeys}
         />
-      </React.Fragment>
+      )}
     </EditorRoot>
   );
 }
diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx
index 5ecd8374695..0a37692ac97 100644
--- a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx
+++ b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx
@@ -11,6 +11,7 @@ import {
 } from '@toolpad/studio-runtime';
 import { ExactEntriesOf } from '@toolpad/utils/types';
 import * as appDom from '@toolpad/studio-runtime/appDom';
+import Box from '@mui/system/Box';
 import NodeAttributeEditor from './NodeAttributeEditor';
 import { usePageEditorState } from './PageEditorProvider';
 import { useToolpadComponent } from '../toolpadComponents';
@@ -106,7 +107,15 @@ function ComponentPropsEditor<P extends object>({
 
           <div className={classes.control}>
             <Typography variant="body2">Alignment:</Typography>
-            <Stack direction="row">
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                flexWrap: 'wrap',
+                gap: 1,
+              }}
+            >
               {hasLayoutHorizontalControls ? (
                 <NodeAttributeEditor
                   node={node}
@@ -124,7 +133,7 @@ function ComponentPropsEditor<P extends object>({
                   argType={layoutBoxArgTypes.verticalAlign}
                 />
               ) : null}
-            </Stack>
+            </Box>
           </div>
 
           <Divider sx={{ mt: 1 }} />
diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx
index 4c774039c77..fb3840d5120 100644
--- a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx
+++ b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx
@@ -96,7 +96,7 @@ export default function NodeAttributeEditor<P extends object>({
       propType={argType}
       jsRuntime={jsBrowserRuntime}
       renderControl={(params) => (
-        <Box sx={{ flex: 1, maxWidth: '100%' }}>
+        <Box sx={{ flex: 1, minWidth: 0 }}>
           <Control nodeId={node.id} {...params} propType={argType} />
         </Box>
       )}
diff --git a/packages/toolpad-studio/src/toolpadDataSources/TranformInput.tsx b/packages/toolpad-studio/src/toolpadDataSources/TranformInput.tsx
index 4e52c9857fa..1224ccc93a5 100644
--- a/packages/toolpad-studio/src/toolpadDataSources/TranformInput.tsx
+++ b/packages/toolpad-studio/src/toolpadDataSources/TranformInput.tsx
@@ -1,4 +1,4 @@
-import { Stack, Grid, Checkbox, FormControlLabel, IconButton } from '@mui/material';
+import { Stack, Checkbox, FormControlLabel, IconButton } from '@mui/material';
 import * as React from 'react';
 import AutorenewIcon from '@mui/icons-material/Autorenew';
 import JsonView from '../components/JsonView';
@@ -31,72 +31,70 @@ export default function TransformInput({
   );
 
   return (
-    <Grid item xs={6} md={12}>
-      <Stack>
-        <FormControlLabel
-          label="Transform response"
+    <Stack>
+      <FormControlLabel
+        label="Transform response"
+        sx={{
+          '& .MuiFormControlLabel-label': { fontSize: 12 },
+        }}
+        control={
+          <Checkbox
+            checked={enabled}
+            sx={{ p: 0.25, pl: 1 }}
+            onChange={handleTransformEnabledChange}
+            inputProps={{ 'aria-label': 'controlled' }}
+          />
+        }
+      />
+
+      <Stack direction={'row'} spacing={2} width={'100%'}>
+        <JsonView
+          src={globalScope}
+          disabled={loading || !enabled}
           sx={{
-            '& .MuiFormControlLabel-label': { fontSize: 12 },
+            width: '300px',
+            maxWidth: '600px',
+            maxHeight: '150px',
           }}
-          control={
-            <Checkbox
-              checked={enabled}
-              sx={{ p: 0.25, pl: 1 }}
-              onChange={handleTransformEnabledChange}
-              inputProps={{ 'aria-label': 'controlled' }}
-            />
-          }
         />
 
-        <Stack direction={'row'} spacing={2} width={'100%'}>
-          <JsonView
-            src={globalScope}
-            disabled={loading || !enabled}
-            sx={{
-              width: '300px',
-              maxWidth: '600px',
-              maxHeight: '150px',
-            }}
-          />
-
-          {onUpdatePreview ? (
-            <IconButton
-              disabled={!enabled}
-              onClick={onUpdatePreview}
-              sx={{ alignSelf: 'self-start' }}
-            >
-              <AutorenewIcon
-                sx={{
-                  animation: 'spin 1500ms linear infinite',
-                  animationPlayState: loading ? 'running' : 'paused',
-                  '@keyframes spin': {
-                    '0%': {
-                      transform: 'rotate(0deg)',
-                    },
-                    '100%': {
-                      transform: 'rotate(360deg)',
-                    },
+        {onUpdatePreview ? (
+          <IconButton
+            disabled={!enabled}
+            onClick={onUpdatePreview}
+            sx={{ alignSelf: 'self-start' }}
+          >
+            <AutorenewIcon
+              sx={{
+                animation: 'spin 1500ms linear infinite',
+                animationPlayState: loading ? 'running' : 'paused',
+                '@keyframes spin': {
+                  '0%': {
+                    transform: 'rotate(0deg)',
                   },
-                }}
-                fontSize="inherit"
-              />
-            </IconButton>
-          ) : null}
-          <JsExpressionEditor
-            globalScope={globalScope}
-            globalScopeMeta={SCOPE_META}
-            autoFocus
-            value={value}
-            sx={{
-              minWidth: '300px',
-              flex: 1,
-            }}
-            functionBody
-            onChange={onChange}
-            disabled={!enabled || loading}
-          />
-        </Stack>
+                  '100%': {
+                    transform: 'rotate(360deg)',
+                  },
+                },
+              }}
+              fontSize="inherit"
+            />
+          </IconButton>
+        ) : null}
+        <JsExpressionEditor
+          globalScope={globalScope}
+          globalScopeMeta={SCOPE_META}
+          autoFocus
+          value={value}
+          sx={{
+            minWidth: '300px',
+            flex: 1,
+          }}
+          functionBody
+          onChange={onChange}
+          disabled={!enabled || loading}
+        />
       </Stack>
-    </Grid>
+    </Stack>
   );
 }
diff --git a/packages/toolpad-studio/src/toolpadDataSources/local/client.tsx b/packages/toolpad-studio/src/toolpadDataSources/local/client.tsx
index b9b2bc5a225..5974135d741 100644
--- a/packages/toolpad-studio/src/toolpadDataSources/local/client.tsx
+++ b/packages/toolpad-studio/src/toolpadDataSources/local/client.tsx
@@ -340,35 +340,43 @@ function QueryEditor({
 
                 <Divider sx={{ mb: 1.5 }} />
                 <TabPanel value="parameters" disableGutters sx={{ ml: 1 }}>
-                  <Grid display="grid" gridTemplateColumns={'1fr 1fr 1fr'} gap={2}>
+                  <Grid container spacing={1}>
                     {Object.entries(parameterDefs).map(([name, definiton]) => {
                       const Control = getDefaultControl(propTypeControls, definiton, liveBindings);
-                      return Control ? (
-                        <BindableEditor
-                          key={name}
-                          liveBinding={liveBindings[name]}
-                          globalScope={globalScope}
-                          globalScopeMeta={globalScopeMeta}
-                          label={name}
-                          propType={definiton}
-                          jsRuntime={jsBrowserRuntime}
-                          renderControl={(renderControlParams) => (
-                            <Control {...renderControlParams} propType={definiton} />
-                          )}
-                          value={paramsObject[name]}
-                          onChange={(newValue) => {
-                            const paramKeys = Object.keys(parameterDefs);
-                            const newParams: BindableAttrEntries = paramKeys.flatMap((key) => {
-                              const paramValue = key === name ? newValue : paramsObject[key];
-                              return paramValue ? [[key, paramValue]] : [];
-                            });
-                            appStateApi.updateQueryDraft((draft) => ({
-                              ...draft,
-                              params: newParams,
-                            }));
-                          }}
-                        />
-                      ) : null;
+                      if (!Control) {
+                        return (
+                          <Grid xs={4} key={name} sx={{ display: 'flex', alignItems: 'center' }}>
+                            <Typography>Can&apos;t configure {name}</Typography>
+                          </Grid>
+                        );
+                      }
+                      return (
+                        <Grid xs={4} key={name}>
+                          <BindableEditor
+                            liveBinding={liveBindings[name]}
+                            globalScope={globalScope}
+                            globalScopeMeta={globalScopeMeta}
+                            label={name}
+                            propType={definiton}
+                            jsRuntime={jsBrowserRuntime}
+                            renderControl={(renderControlParams) => (
+                              <Control {...renderControlParams} propType={definiton} />
+                            )}
+                            value={paramsObject[name]}
+                            onChange={(newValue) => {
+                              const paramKeys = Object.keys(parameterDefs);
+                              const newParams: BindableAttrEntries = paramKeys.flatMap((key) => {
+                                const paramValue = key === name ? newValue : paramsObject[key];
+                                return paramValue ? [[key, paramValue]] : [];
+                              });
+                              appStateApi.updateQueryDraft((draft) => ({
+                                ...draft,
+                                params: newParams,
+                              }));
+                            }}
+                          />
+                        </Grid>
+                      );
                     })}
                   </Grid>
                 </TabPanel>