feat: add maxColumns prop to VirtualGrid for responsive column capping (#8210)

## Summary

Add `maxColumns` prop to VirtualGrid for responsive column capping.

## Changes

- **VirtualGrid**: Add `maxColumns` prop to cap grid columns; refactor
inline styles to Tailwind classes; extract spacer height computation to
helper function
- **AssetGrid**: Use `useBreakpoints` to set responsive `maxColumns`
(1-5 based on Tailwind breakpoints)

## Review Focus

- `maxColumns` behavior when `Infinity` vs finite: does
`gridTemplateColumns` override work correctly?
- Tailwind scrollbar classes replacing scoped CSS

src/platform/assets/components/AssetGrid.vue

@@ -26,9 +26,10 @@
     <VirtualGrid
       v-else
       :items="assetsWithKey"
-      :grid-style="gridStyle"
+      :grid-style
       :default-item-height="320"
       :default-item-width="240"
+      :max-columns
     >
       <template #item="{ item }">
         <AssetCard
@@ -43,6 +44,7 @@
 </template>
 
 <script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import type { CSSProperties } from 'vue'
 import { computed } from 'vue'
 
@@ -64,7 +66,20 @@ const assetsWithKey = computed(() =>
   assets.map((asset) => ({ ...asset, key: asset.id }))
 )
 
-const gridStyle: Partial<CSSProperties> = {
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const is2Xl = breakpoints.greaterOrEqual('2xl')
+const isXl = breakpoints.greaterOrEqual('xl')
+const isLg = breakpoints.greaterOrEqual('lg')
+const isMd = breakpoints.greaterOrEqual('md')
+const maxColumns = computed(() => {
+  if (is2Xl.value) return 5
+  if (isXl.value) return 4
+  if (isLg.value) return 3
+  if (isMd.value) return 2
+  return 1
+})
+
+const gridStyle: CSSProperties = {
   display: 'grid',
   gridTemplateColumns: 'repeat(auto-fill, minmax(15rem, 1fr))',
   gap: '1rem',