use pane on items

components/StyledPane.qml

@@ -0,0 +1,19 @@
+import qs.config
+import QtQuick
+import QtQuick.Controls
+
+Pane {
+    padding: 24
+    background: Rectangle {
+        color: "transparent"
+        border.width: Styling.theme.border
+        border.color: Styling.theme.basecontent
+        opacity: 0.33
+        Behavior on border.color {
+            ColorAnimation {
+                duration: Styling.animations.speed.fast
+            }
+        }
+        radius: Styling.theme.radiusBox
+    }
+}

components/StyledTabButton.qml

@@ -12,6 +12,7 @@ TabButton {
         text: control.text
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
+        padding: 6
         color: control.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
         Behavior on color {
             ColorAnimation {

modules/storybook/Fields.qml

@@ -1,29 +1,42 @@
 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
         }
+        StyledPane {
             StyledIconButton {
                 text: Styling.lucide.icons.square
             }
         }
+    }
 
     ColumnLayout {
         StyledText {
             text: "Slider"
             font.pixelSize: 18
         }
+        StyledPane {
             StyledSlider {
                 id: slider
                 from: 0
@@ -31,4 +44,10 @@ GridLayout {
                 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 {}
             }