use pane on items

modules/storybook/Fields.qml

@@ -1,21 +1,33 @@
 import qs.components
 import qs.config
 import QtQuick
-import QtQuick.Controls
 import QtQuick.Layouts
 
-GridLayout {
+ColumnLayout {
-    flow: GridLayout.TopToBottom
+
-    columns: 2
+    spacing: Styling.layout.spacing.xl
-    rows: 10
+
+    ColumnLayout {
+        StyledText {
+            text: "Button"
+            font.pixelSize: 18
+        }
+        StyledPane {
+            StyledButton {
+                text: "Button"
+            }
+        }
+    }
 
     ColumnLayout {
         StyledText {
             text: "Icon Button"
             font.pixelSize: 18
         }
-        StyledIconButton {
+        StyledPane {
-            text: Styling.lucide.icons.square
+            StyledIconButton {
+                text: Styling.lucide.icons.square
+            }
         }
     }
 
@@ -24,11 +36,18 @@ GridLayout {
             text: "Slider"
             font.pixelSize: 18
         }
-        StyledSlider {
+        StyledPane {
-            id: slider
+            StyledSlider {
-            from: 0
+                id: slider
-            to: 100
+                from: 0
-            value: 50
+                to: 100
+                value: 50
+            }
         }
     }
+
+    component FieldElement: QtObject {
+        property string title
+        property Component component
+    }
 }

modules/storybook/Storybook.qml

@@ -27,15 +27,17 @@ StyledPanelWindow {
         }
     }
 
-    ColumnLayout {
+    Item {
         id: layout
-
         anchors.fill: parent
-        spacing: 0
 
         StyledTabBar {
             id: tabs
-            Layout.fillWidth: true
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.bottom: stack.top
+
             StyledTabButton {
                 text: "Fields"
             }
@@ -48,20 +50,26 @@ StyledPanelWindow {
         }
 
         StackLayout {
+            id: stack
+
+            anchors.top: tabs.bottom
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+
             currentIndex: tabs.currentIndex
 
             ScrollView {
-                Layout.maximumHeight: 400
+                Layout.fillWidth: true
                 padding: 36
                 Fields {}
             }
             ScrollView {
-                Layout.maximumHeight: 400
                 padding: 36
                 Selectors {}
             }
             ScrollView {
-                Layout.maximumHeight: 400
+                Layout.fillWidth: true
                 padding: 36
                 Components {}
             }