Scenes: Fixes layout when the editor is active (#52291)

public/app/features/scenes/components/Scene.tsx

@@ -55,8 +55,10 @@ function SceneRenderer({ model }: SceneComponentProps<Scene>) {
 
   return (
     <Page navId="scenes" layout={PageLayoutType.Dashboard} toolbar={pageToolbar}>
-      <layout.Component model={layout} isEditing={isEditing} />
-      {$editor && <$editor.Component model={$editor} isEditing={isEditing} />}
+      <div style={{ flexGrow: 1, display: 'flex', gap: '8px', overflow: 'auto' }}>
+        <layout.Component model={layout} isEditing={isEditing} />
+        {$editor && <$editor.Component model={$editor} isEditing={isEditing} />}
+      </div>
     </Page>
   );
 }

public/app/features/scenes/components/SceneToolbarButton.tsx

@@ -30,6 +30,7 @@ export class SceneToolbarInput extends SceneObjectBase<SceneToolbarInputState> {
     return (
       <Input
         defaultValue={state.value}
+        width={8}
         onBlur={(evt) => {
           model.state.onChange(parseInt(evt.currentTarget.value, 10));
         }}