diff --git a/.betterer.results b/.betterer.results
index d1b8ef95b28..7f01a7c90a5 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -1750,9 +1750,6 @@ exports[`better eslint`] = {
     "public/app/features/dashboard-scene/panel-edit/PanelOptionsPane.test.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "public/app/features/dashboard-scene/panel-edit/PanelOptionsPane.tsx:5381": [
-      [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "0"]
-    ],
     "public/app/features/dashboard-scene/panel-edit/PanelVizTypePicker.tsx:5381": [
       [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "0"]
     ],
diff --git a/public/app/features/dashboard-scene/panel-edit/PanelEditorRenderer.tsx b/public/app/features/dashboard-scene/panel-edit/PanelEditorRenderer.tsx
index 9aee611d4f0..ee2d74b3513 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelEditorRenderer.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelEditorRenderer.tsx
@@ -15,12 +15,15 @@ import { getDashboardSceneFor, getLibraryPanelBehavior } from '../utils/utils';
 import { PanelEditor } from './PanelEditor';
 import { SaveLibraryVizPanelModal } from './SaveLibraryVizPanelModal';
 import { useSnappingSplitter } from './splitter/useSnappingSplitter';
+import { scrollReflowMediaCondition, useScrollReflowLimit } from './useScrollReflowLimit';
 
 export function PanelEditorRenderer({ model }: SceneComponentProps<PanelEditor>) {
   const dashboard = getDashboardSceneFor(model);
   const { optionsPane } = model.useState();
   const styles = useStyles2(getStyles);
-  const [isCollapsed, setIsCollapsed] = useEditPaneCollapsed();
+  const [isInitiallyCollapsed, setIsCollapsed] = useEditPaneCollapsed();
+
+  const isScrollingLayout = useScrollReflowLimit();
 
   const { containerProps, primaryProps, secondaryProps, splitterProps, splitterState, onToggleCollapse } =
     useSnappingSplitter({
@@ -28,8 +31,9 @@ export function PanelEditorRenderer({ model }: SceneComponentProps<PanelEditor>)
       dragPosition: 'end',
       initialSize: 330,
       usePixels: true,
-      collapsed: isCollapsed,
+      collapsed: isInitiallyCollapsed,
       collapseBelowPixels: 250,
+      disabled: isScrollingLayout,
     });
 
   useEffect(() => {
@@ -80,17 +84,20 @@ function VizAndDataPane({ model }: SceneComponentProps<PanelEditor>) {
   const { controls } = dashboard.useState();
   const styles = useStyles2(getStyles);
 
+  const isScrollingLayout = useScrollReflowLimit();
+
   const { containerProps, primaryProps, secondaryProps, splitterProps, splitterState, onToggleCollapse } =
     useSnappingSplitter({
       direction: 'column',
       dragPosition: 'start',
       initialSize: 0.5,
       collapseBelowPixels: 150,
+      disabled: isScrollingLayout,
     });
 
   containerProps.className = cx(containerProps.className, styles.container);
 
-  if (!dataPane) {
+  if (!dataPane && !isScrollingLayout) {
     primaryProps.style.flexGrow = 1;
   }
 
@@ -102,7 +109,7 @@ function VizAndDataPane({ model }: SceneComponentProps<PanelEditor>) {
         </div>
       )}
       <div {...containerProps}>
-        <div {...primaryProps}>
+        <div {...primaryProps} className={cx(primaryProps.className, isScrollingLayout && styles.fixedSizeViz)}>
           <VizWrapper panel={panel} tableView={tableView} />
         </div>
         {showLibraryPanelSaveModal && libraryPanel && (
@@ -123,7 +130,10 @@ function VizAndDataPane({ model }: SceneComponentProps<PanelEditor>) {
         {dataPane && (
           <>
             <div {...splitterProps} />
-            <div {...secondaryProps}>
+            <div
+              {...secondaryProps}
+              className={cx(secondaryProps.className, isScrollingLayout && styles.fullSizeEditor)}
+            >
               {splitterState.collapsed && (
                 <div className={styles.expandDataPane}>
                   <Button
@@ -163,6 +173,7 @@ function VizWrapper({ panel, tableView }: VizWrapperProps) {
 }
 
 function getStyles(theme: GrafanaTheme2) {
+  const scrollReflowMediaQuery = '@media ' + scrollReflowMediaCondition;
   return {
     pageContainer: css({
       display: 'grid',
@@ -171,6 +182,9 @@ function getStyles(theme: GrafanaTheme2) {
       gridTemplateColumns: `1fr`,
       gridTemplateRows: '1fr',
       height: '100%',
+      [scrollReflowMediaQuery]: {
+        gridTemplateColumns: `100%`,
+      },
     }),
     pageContainerWithControls: css({
       gridTemplateAreas: `
@@ -196,6 +210,14 @@ function getStyles(theme: GrafanaTheme2) {
       width: '100%',
       height: '100%',
       overflow: 'unset',
+      [scrollReflowMediaQuery]: {
+        height: 'auto',
+        display: 'grid',
+        gridTemplateColumns: 'minmax(470px, 1fr) 330px',
+        gridTemplateRows: '1fr',
+        gap: theme.spacing(1),
+        width: '100%',
+      },
     }),
     body: css({
       label: 'body',
@@ -248,5 +270,11 @@ function getStyles(theme: GrafanaTheme2) {
       width: '100%',
       paddingLeft: theme.spacing(2),
     }),
+    fixedSizeViz: css({
+      height: '100vh',
+    }),
+    fullSizeEditor: css({
+      height: 'max-content',
+    }),
   };
 }
diff --git a/public/app/features/dashboard-scene/panel-edit/PanelOptionsPane.tsx b/public/app/features/dashboard-scene/panel-edit/PanelOptionsPane.tsx
index 5540da1f494..a2681526328 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelOptionsPane.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelOptionsPane.tsx
@@ -32,6 +32,7 @@ import { getAllPanelPluginMeta } from 'app/features/panel/state/util';
 import { PanelOptions } from './PanelOptions';
 import { PanelVizTypePicker } from './PanelVizTypePicker';
 import { INTERACTION_EVENT_NAME, INTERACTION_ITEM } from './interaction';
+import { useScrollReflowLimit } from './useScrollReflowLimit';
 
 export interface PanelOptionsPaneState extends SceneObjectState {
   isVizPickerOpen?: boolean;
@@ -132,16 +133,14 @@ function PanelOptionsPaneComponent({ model }: SceneComponentProps<PanelOptionsPa
   const hasFieldConfig = !isSearching && !panel.getPlugin()?.fieldConfigRegistry.isEmpty();
   const [isSearchingOptions, setIsSearchingOptions] = useToggle(false);
   const onlyOverrides = listMode === OptionFilter.Overrides;
+  const isScrollingLayout = useScrollReflowLimit();
 
   return (
     <>
       {!isVizPickerOpen && (
         <>
           <div className={styles.top}>
-            <Field
-              label={t('dashboard.panel-edit.visualization-button-label', 'Visualization')}
-              className={styles.vizField}
-            >
+            <Field label={t('dashboard.panel-edit.visualization-button-label', 'Visualization')} noMargin>
               <Stack gap={1}>
                 <VisualizationButton pluginId={pluginId} onOpen={model.onToggleVizPicker} />
                 <Button
@@ -178,7 +177,7 @@ function PanelOptionsPaneComponent({ model }: SceneComponentProps<PanelOptionsPa
               />
             )}
           </div>
-          <ScrollContainer>
+          <ScrollContainer minHeight={isScrollingLayout ? 'max-content' : 0}>
             <PanelOptions panel={panel} searchQuery={searchQuery} listMode={listMode} data={data} />
           </ScrollContainer>
         </>
@@ -209,9 +208,6 @@ function getStyles(theme: GrafanaTheme2) {
     searchWrapper: css({
       padding: theme.spacing(2, 2, 2, 0),
     }),
-    vizField: css({
-      marginBottom: theme.spacing(0),
-    }),
     rotateIcon: css({
       rotate: '180deg',
     }),
diff --git a/public/app/features/dashboard-scene/panel-edit/splitter/useSnappingSplitter.ts b/public/app/features/dashboard-scene/panel-edit/splitter/useSnappingSplitter.ts
index 67e97e9dac9..f5579074804 100644
--- a/public/app/features/dashboard-scene/panel-edit/splitter/useSnappingSplitter.ts
+++ b/public/app/features/dashboard-scene/panel-edit/splitter/useSnappingSplitter.ts
@@ -16,6 +16,9 @@ export interface UseSnappingSplitterOptions {
   handleSize?: ComponentSize;
   usePixels?: boolean;
   collapseBelowPixels: number;
+
+  /* Disables the splitter, hiding all of its styles */
+  disabled?: boolean;
 }
 
 interface PaneState {
@@ -31,6 +34,7 @@ export function useSnappingSplitter({
   collapsed,
   handleSize,
   usePixels,
+  disabled,
 }: UseSnappingSplitterOptions) {
   const [state, setState] = useState<PaneState>({
     collapsed: collapsed ?? false,
@@ -91,6 +95,26 @@ export function useSnappingSplitter({
     onSizeChanged,
   });
 
+  // This does cause the loss of the adjustment position when toggling disabled on and off again.
+  // Fixing this properly would require changing how useSplitter works to not both pass and
+  // adjust styles directly on the element by ref. That causes a React conflict.
+  if (disabled) {
+    containerProps.className = '';
+    primaryProps.className = '';
+    primaryProps.style = {};
+    secondaryProps.className = '';
+    secondaryProps.style = {};
+    splitterProps.style.display = 'none';
+    return {
+      containerProps,
+      primaryProps,
+      secondaryProps,
+      splitterProps,
+      splitterState: { collapsed: false },
+      onToggleCollapse,
+    };
+  }
+
   // This is to allow resizing it beyond the content dimensions
   secondaryProps.style.overflow = 'hidden';
   secondaryProps.style.minWidth = 'unset';
diff --git a/public/app/features/dashboard-scene/panel-edit/useScrollReflowLimit.ts b/public/app/features/dashboard-scene/panel-edit/useScrollReflowLimit.ts
new file mode 100644
index 00000000000..3f8285fa366
--- /dev/null
+++ b/public/app/features/dashboard-scene/panel-edit/useScrollReflowLimit.ts
@@ -0,0 +1,15 @@
+import { useMedia } from 'react-use';
+
+/**
+ * Media query body "(max-height: 540px)" which matches screens small enough we have zoom reflow
+ * problems.
+ * 540px is one of the round screen size numbers that's about what we want.
+ */
+export const scrollReflowMediaCondition = '(max-height: 540px)';
+
+/**
+ * @returns {boolean} true when the screen is small enough to need zoom reflow handling
+ */
+export function useScrollReflowLimit(): boolean {
+  return useMedia(scrollReflowMediaCondition);
+}
diff --git a/public/app/features/dashboard-scene/scene/DashboardControls.tsx b/public/app/features/dashboard-scene/scene/DashboardControls.tsx
index f5099ba1b95..5bbe9733755 100644
--- a/public/app/features/dashboard-scene/scene/DashboardControls.tsx
+++ b/public/app/features/dashboard-scene/scene/DashboardControls.tsx
@@ -147,10 +147,10 @@ function DashboardControlsRenderer({ model }: SceneComponentProps<DashboardContr
         {editPanel && <PanelEditControls panelEditor={editPanel} />}
       </Stack>
       {!hideTimeControls && (
-        <Stack justifyContent={'flex-end'}>
+        <div className={styles.timeControlStack}>
           <timePicker.Component model={timePicker} />
           <refreshPicker.Component model={refreshPicker} />
-        </Stack>
+        </div>
       )}
       <Stack>
         <DropdownVariableControls dashboard={dashboard} />
@@ -181,7 +181,7 @@ function getStyles(theme: GrafanaTheme2) {
       gap: theme.spacing(1),
       padding: theme.spacing(2),
       flexDirection: 'row',
-      flexWrap: 'nowrap',
+      flexWrap: 'wrap-reverse',
       position: 'relative',
       width: '100%',
       marginLeft: 'auto',
@@ -198,5 +198,12 @@ function getStyles(theme: GrafanaTheme2) {
       background: 'unset',
       position: 'unset',
     }),
+    timeControlStack: css({
+      display: 'flex',
+      flexWrap: 'wrap',
+      justifyContent: 'flex-end',
+      gap: theme.spacing(1),
+      marginLeft: 'auto',
+    }),
   };
 }