minor fixes

Author: mikenewbon

docs/app/components/content/examples/scroll-area/ScrollAreaResponsiveMasonryExample.vue

@@ -27,8 +27,8 @@ const items = Array.from({ length: 30 }, (_, i) => {
       minLanes,
       maxLanes
     }"
-    class="h-[600px] border border-default rounded-lg"
-    style="resize: both; overflow: auto; min-width: 300px; min-height: 300px;"
+    class="h-[600px] w-full border border-default rounded-lg"
+    style="resize: horizontal; overflow: auto; min-width: 300px; min-height: 300px;"
   >
     <template #default="{ item }">
       <UCard :ui="{ body: 'p-0 sm:p-0' }">

docs/content/docs/2.components/scroll-area.md

@@ -65,16 +65,9 @@ options:
   - name: orientation
     label: orientation
     default: vertical
-    items:
-      - vertical
-      - horizontal
 ---
 ::
 
-::note
-Use your mouse to drag the scroll area horizontally or vertically depending on the orientation.
-::
-
 ### Virtualize
 
 Enable virtualization with the `virtualize` prop to efficiently handle large datasets. This renders only visible items, dramatically improving performance with thousands of items.
@@ -130,16 +123,10 @@ Use the `lanes` option to create multi-column masonry layouts. This is perfect f
 ---
 name: 'scroll-area-masonry-example'
 class: 'p-8'
-options:
-  - name: lanes
-    label: lanes
-    default: 3
-  - name: gap
-    label: gap
-    default: 12
-  - name: padding
-    label: padding
-    default: 12
+props:
+  lanes: 3
+  gap: 12
+  padding: 12
 ---
 ::
 
@@ -155,23 +142,13 @@ Use the `laneWidth`, `minLanes`, and `maxLanes` options to create responsive mas
 ---
 name: 'scroll-area-responsive-masonry-example'
 class: 'p-8'
-options:
-  - name: laneWidth
-    label: laneWidth
-    default: 200
-  - name: minLanes
-    label: minLanes
-    default: 1
-  - name: maxLanes
-    label: maxLanes
-    default: 6
+props:
+  laneWidth: 200
+  minLanes: 1
+  maxLanes: 6
 ---
 ::
 
-::note
-The container has `resize: both` applied so you can drag from the bottom-right corner to see the columns adjust automatically as the width changes.
-::
-
 ### With custom virtualization options
 
 The `virtualize` prop accepts all [TanStack Virtual options](https://tanstack.com/virtual/latest/docs/api/virtualizer), plus additional responsive masonry options (`laneWidth`, `minLanes`, `maxLanes`).

src/runtime/components/ScrollArea.vue

@@ -151,6 +151,17 @@ const virtualizerProps = toRef(() => {
     minLanes: 1
   })
 
+  // Ensure numeric props are actually numbers (they may come in as strings from component props)
+  const numericProps = ['estimateSize', 'overscan', 'gap', 'paddingStart', 'paddingEnd', 'scrollMargin', 'lanes', 'minLanes', 'maxLanes', 'laneWidth'] as const
+  for (const key of numericProps) {
+    if (baseProps[key] !== undefined && typeof baseProps[key] !== 'function') {
+      const num = Number(baseProps[key])
+      if (!isNaN(num)) {
+        baseProps[key] = num
+      }
+    }
+  }
+
   // Use responsive lanes if laneWidth is set
   if (baseProps.laneWidth !== undefined) {
     baseProps.lanes = calculateResponsiveLanes()