chore: Update virtualized horizontal grid (#1460)

Author: dwesolow

web_ui/packages/ui/src/virtualized-horizontal-grid/virtualized-horizontal-grid.tsx

@@ -1,7 +1,7 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 
 import { DimensionValue, View } from '@adobe/react-spectrum';
 import { type Responsive } from '@react-types/shared';
@@ -13,30 +13,37 @@ import classes from './virtualized-horizontal-grid.module.scss';
 
 interface VirtualizedHorizontalGridProps<T> {
     items: T[];
-    size: number;
-    containerHeight?: Responsive<DimensionValue>;
+    height?: Responsive<DimensionValue>;
     renderItem: (item: T) => ReactNode;
     idFormatter: (item: T) => string;
     textValueFormatter: (item: T) => string;
+    layoutOptions: HorizontalLayoutOptions;
+    listBoxItemStyles?: ComponentProps<typeof ListBoxItem>['style'];
 }
 
 export const VirtualizedHorizontalGrid = <T,>({
-    size,
     items,
-    containerHeight,
+    height = '100%',
     renderItem,
     idFormatter,
     textValueFormatter,
+    layoutOptions,
+    listBoxItemStyles,
 }: VirtualizedHorizontalGridProps<T>) => {
     return (
-        <View position={'relative'} width={'100%'} height={`calc(${containerHeight} + 1px)`}>
-            <Virtualizer<HorizontalLayoutOptions> layout={HorizontalLayout} layoutOptions={{ size, gap: 4 }}>
+        <View position={'relative'} width={'100%'} height={height}>
+            <Virtualizer<HorizontalLayoutOptions> layout={HorizontalLayout} layoutOptions={layoutOptions}>
                 <AriaComponentsListBox className={classes.container} orientation='horizontal'>
                     {items.map((item) => {
                         const id = idFormatter(item);
 
                         return (
-                            <ListBoxItem id={id} key={id} textValue={textValueFormatter(item)}>
+                            <ListBoxItem
+                                id={id}
+                                key={id}
+                                textValue={textValueFormatter(item)}
+                                style={listBoxItemStyles}
+                            >
                                 {renderItem(item)}
                             </ListBoxItem>
                         );

web_ui/src/pages/camera-page/components/sidebar/sidebar-thumbnail.component.tsx

@@ -38,27 +38,34 @@ export const SidebarThumbnail = ({ screenshots, isCloseSidebar = false }: Sideba
         return deleteMany([id]);
     };
 
+    const containerHeight = isCloseSidebar ? `size-800` : `size-1250`;
+
     return (
         <>
-            <VirtualizedHorizontalGrid
-                items={screenshots}
-                key={screenshots.map(getId).join('-')}
-                containerHeight={isCloseSidebar ? `size-800` : `size-1250`}
-                size={isCloseSidebar ? 60 : 96}
-                idFormatter={getId}
-                textValueFormatter={getId}
-                renderItem={({ id, dataUrl, labelIds, file }) => (
-                    <AnimatedThumbnail
-                        id={id}
-                        key={id}
-                        url={String(dataUrl)}
-                        labelIds={labelIds}
-                        size={isCloseSidebar ? 'size-800' : 'size-1200'}
-                        isVideo={isVideoFile(file)}
-                        onDeleteItem={handleDeleteItem}
-                    />
-                )}
-            />
+            <View height={containerHeight}>
+                <VirtualizedHorizontalGrid
+                    items={screenshots}
+                    key={screenshots.map(getId).join('-')}
+                    layoutOptions={{
+                        gap: 4,
+                        size: isCloseSidebar ? 60 : 95,
+                    }}
+                    idFormatter={getId}
+                    textValueFormatter={getId}
+                    renderItem={({ id, dataUrl, labelIds, file }) => (
+                        <AnimatedThumbnail
+                            id={id}
+                            key={id}
+                            url={String(dataUrl)}
+                            labelIds={labelIds}
+                            size={isCloseSidebar ? 'size-800' : 'size-1200'}
+                            isVideo={isVideoFile(file)}
+                            onDeleteItem={handleDeleteItem}
+                        />
+                    )}
+                />
+            </View>
+
             <View paddingTop={'size-250'} paddingBottom={isCloseSidebar ? '' : 'size-250'}>
                 <SpectrumLink UNSAFE_style={{ color: 'var(--energy-blue)' }}>
                     <Link