fix(overlay): make WidgetHoverOverlay purely visual with pointer-events none

apps/nextjs/src/components/board/items/widget-hover-overlay.module.css

@@ -5,7 +5,7 @@
   bottom: calc(100% - 10px);
   margin-bottom: 1px;
   z-index: 200;
-  pointer-events: auto;
+  pointer-events: none;
   opacity: 0;
   transform: translateY(6px);
   transition:
@@ -13,8 +13,10 @@
     transform 150ms ease;
 }
 
-:global(.grid-stack-item[data-type="item"]:not([data-kind="app"]):hover) .wrapper,
-:global(.grid-stack-item[data-type="item"]:not([data-kind="app"]):focus-within) .wrapper {
+:global(.grid-stack-item[data-type="item"]:not([data-kind="app"]):hover)
+  .wrapper,
+:global(.grid-stack-item[data-type="item"]:not([data-kind="app"]):focus-within)
+  .wrapper {
   opacity: 1;
   transform: translateY(0);
 }
@@ -77,6 +79,8 @@
   gap: 4px;
   min-width: 0;
   margin-left: auto;
+  flex-wrap: nowrap;
+  overflow: hidden;
 }
 
 .metadataItem {

apps/nextjs/src/components/board/items/widget-hover-overlay.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useRef, useState } from "react";
 import { Avatar, Group, Text, Tooltip } from "@mantine/core";
 
 import type { RouterOutputs } from "@homarr/api";
@@ -26,6 +27,19 @@ export const WidgetHoverOverlay = ({ item, integrations }: WidgetHoverOverlayPro
   const { definition } = widgetImports[item.kind];
   const WidgetIcon = definition.icon;
 
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [isCompact, setIsCompact] = useState(false);
+
+  useEffect(() => {
+    const el = wrapperRef.current?.parentElement;
+    if (!el) return;
+    const observer = new ResizeObserver(([entry]) => {
+      setIsCompact((entry?.contentRect.width ?? 999) < 220);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
   const translate = ((key: string) => t(key as never)) as Translator;
   const displayName = resolveWidgetDisplayName(item, settings, translate);
 
@@ -46,7 +60,7 @@ export const WidgetHoverOverlay = ({ item, integrations }: WidgetHoverOverlayPro
   }
 
   return (
-    <div className={classes.wrapper}>
+    <div ref={wrapperRef} className={classes.wrapper}>
       <div className={classes.panel}>
         <div className={classes.nameSection}>
           <WidgetIcon size={14} stroke={1.75} className={classes.widgetIcon} />
@@ -55,7 +69,7 @@ export const WidgetHoverOverlay = ({ item, integrations }: WidgetHoverOverlayPro
           </Text>
         </div>
 
-        {hasIntegrations && (
+        {!isCompact && hasIntegrations && (
           <Avatar.Group spacing="xs" className={classes.integrations}>
             {connectedIntegrations.map((integration) => (
               <Tooltip key={integration.id} label={integration.name} withArrow position="top">
@@ -70,7 +84,7 @@ export const WidgetHoverOverlay = ({ item, integrations }: WidgetHoverOverlayPro
           </Avatar.Group>
         )}
 
-        {hasMetadata && (
+        {!isCompact && hasMetadata && (
           <Group className={classes.metadata} gap={4}>
             {metadataItems.map((metadataItem) => (
               <div key={`${metadataItem.label}-${metadataItem.value}`} className={classes.metadataItem}>