1111 : $t('assetBrowser.ariaLabel.loadingAsset')
1212 "
1313 :tabindex =" loading ? -1 : 0"
14- :class =" containerClasses"
14+ :class ="
15+ cn(
16+ 'flex flex-col overflow-hidden aspect-[100/120] cursor-pointer p-2 transition-colors duration-200 rounded-lg',
17+ 'gap-1 select-none group',
18+ selected
19+ ? 'ring-3 ring-inset ring-modal-card-border-highlighted'
20+ : 'hover:bg-modal-card-background-hovered'
21+ )
22+ "
1523 :data-selected =" selected"
1624 @click.stop =" $emit('click')"
1725 @contextmenu.prevent =" handleContextMenu"
@@ -236,17 +244,6 @@ provide(MediaAssetKey, {
236244 showVideoControls
237245})
238246
239- const containerClasses = computed (() =>
240- cn (
241- // Base styles from CardContainer (mini + ghost variant)
242- ' flex flex-col overflow-hidden aspect-[100/120] cursor-pointer p-2 transition-colors duration-200 rounded-lg' ,
243- ' gap-1 select-none group' ,
244- selected
245- ? ' ring-3 ring-inset ring-modal-card-border-highlighted'
246- : ' hover:bg-modal-card-background-hovered'
247- )
248- )
249-
250247const formattedDuration = computed (() => {
251248 // Check for execution time first (from history API)
252249 const executionTime = asset ?.user_metadata ?.executionTimeInSeconds
@@ -272,11 +269,10 @@ const metaInfo = computed(() => {
272269 return ' '
273270})
274271
275- // Show action overlay when hovered OR selected OR playing
276- const showActionsOverlay = computed (
277- () =>
278- ! loading && !! asset && (isHovered .value || selected || isVideoPlaying .value )
279- )
272+ const showActionsOverlay = computed (() => {
273+ if (loading || ! asset ) return false
274+ return isHovered .value || selected || isVideoPlaying .value
275+ })
280276
281277const handleZoomClick = () => {
282278 if (asset ) {
0 commit comments