From 85309f4e631bd22a101a2d80a884d46992948871 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 15 Jul 2022 02:08:40 +0200
Subject: [PATCH] Scenes: Fixes layout when the editor is active (#52291)

---
 public/app/features/scenes/components/Scene.tsx             | 6 ++++--
 .../app/features/scenes/components/SceneToolbarButton.tsx   | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/public/app/features/scenes/components/Scene.tsx b/public/app/features/scenes/components/Scene.tsx
index 3d2194d967d..11a7f59a7f4 100644
--- a/public/app/features/scenes/components/Scene.tsx
+++ b/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>
   );
 }
diff --git a/public/app/features/scenes/components/SceneToolbarButton.tsx b/public/app/features/scenes/components/SceneToolbarButton.tsx
index a7c588a0e0e..849fbfa1ef6 100644
--- a/public/app/features/scenes/components/SceneToolbarButton.tsx
+++ b/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));
         }}