Use the existing toolbox design

osu.Game.Tests/Visual/Gameplay/TestSceneSkinEditorComponentsList.cs

@@ -14,7 +14,7 @@ namespace osu.Game.Tests.Visual.Gameplay
         [Test]
         public void TestToggleEditor()
         {
-            AddStep("show available components", () => SetContents(() => new SkinComponentToolbox
+            AddStep("show available components", () => SetContents(() => new SkinComponentToolbox(300)
             {
                 Anchor = Anchor.TopCentre,
                 Origin = Anchor.TopCentre,

osu.Game/Rulesets/Edit/ScrollingToolboxGroup.cs

@@ -0,0 +1,32 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Game.Graphics.Containers;
+
+namespace osu.Game.Rulesets.Edit
+{
+    public class ScrollingToolboxGroup : ToolboxGroup
+    {
+        protected readonly OsuScrollContainer Scroll;
+
+        protected override Container<Drawable> Content { get; }
+
+        public ScrollingToolboxGroup(string title, float scrollAreaHeight)
+            : base(title)
+        {
+            base.Content.Add(Scroll = new OsuScrollContainer
+            {
+                RelativeSizeAxes = Axes.X,
+                Height = scrollAreaHeight,
+                Child = Content = new FillFlowContainer
+                {
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Direction = FillDirection.Vertical,
+                },
+            });
+        }
+    }
+}

osu.Game/Skinning/Editor/SkinComponentToolbox.cs

@@ -10,21 +10,22 @@ using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Input.Events;
 using osu.Game.Graphics;
-using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
+using osu.Game.Rulesets.Edit;
 using osu.Game.Screens.Play.HUD;
 using osuTK;
 using osuTK.Graphics;
 
 namespace osu.Game.Skinning.Editor
 {
-    public class SkinComponentToolbox : CompositeDrawable
+    public class SkinComponentToolbox : ScrollingToolboxGroup
     {
         public Action<Type> RequestPlacement;
 
-        public SkinComponentToolbox()
+        public SkinComponentToolbox(float height)
+            : base("Components", height)
         {
-            RelativeSizeAxes = Axes.Y;
+            RelativeSizeAxes = Axes.None;
             Width = 200;
         }
 
@@ -33,16 +34,12 @@ namespace osu.Game.Skinning.Editor
         {
             FillFlowContainer fill;
 
-            InternalChild = new OsuScrollContainer
+            Child = fill = new FillFlowContainer
             {
-                RelativeSizeAxes = Axes.Both,
+                RelativeSizeAxes = Axes.X,
-                Child = fill = new FillFlowContainer
+                AutoSizeAxes = Axes.Y,
-                {
+                Direction = FillDirection.Vertical,
-                    RelativeSizeAxes = Axes.X,
+                Spacing = new Vector2(20)
-                    AutoSizeAxes = Axes.Y,
-                    Direction = FillDirection.Vertical,
-                    Spacing = new Vector2(20)
-                }
             };
 
             var skinnableTypes = typeof(OsuGame).Assembly.GetTypes().Where(t => typeof(ISkinnableComponent).IsAssignableFrom(t)).ToArray();

osu.Game/Skinning/Editor/SkinEditor.cs

@@ -48,11 +48,10 @@ namespace osu.Game.Skinning.Editor
                         RelativeSizeAxes = Axes.X
                     },
                     new SkinBlueprintContainer(target),
-                    new SkinComponentToolbox
+                    new SkinComponentToolbox(600)
                     {
                         Anchor = Anchor.CentreLeft,
                         Origin = Anchor.CentreLeft,
-                        Height = SkinEditorContainer.VISIBLE_TARGET_SCALE,
                         RequestPlacement = placeComponent
                     }
                 }