fix(beszel): correct unit scaling for system stats and container charts (#5958)

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,17 +1,14 @@
 "use client";
 
-import { Avatar, Group, Text, Tooltip } from "@mantine/core";
+import { Avatar, Text, Tooltip } from "@mantine/core";
 
 import type { RouterOutputs } from "@homarr/api";
 import { useEditMode } from "@homarr/boards/edit-mode";
 import { getIconUrl } from "@homarr/definitions";
-import { useSettings } from "@homarr/settings";
 import { useI18n } from "@homarr/translation/client";
 import { widgetImports } from "@homarr/widgets";
 
 import type { SectionItem } from "~/app/[locale]/boards/_types";
-import type { Translator } from "./widget-hover-metadata";
-import { collectWidgetHoverMetadata, resolveWidgetDisplayName } from "./widget-hover-metadata";
 import classes from "./widget-hover-overlay.module.css";
 
 interface WidgetHoverOverlayProps {
@@ -21,27 +18,17 @@ interface WidgetHoverOverlayProps {
 
 export const WidgetHoverOverlay = ({ item, integrations }: WidgetHoverOverlayProps) => {
   const [isEditMode] = useEditMode();
-  const settings = useSettings();
   const t = useI18n();
   const { definition } = widgetImports[item.kind];
   const WidgetIcon = definition.icon;
 
-  const translate = ((key: string) => t(key as never)) as Translator;
-  const displayName = resolveWidgetDisplayName(item, settings, translate);
+  const displayName = item.advancedOptions.title?.trim() || t(`widget.${item.kind}.name`);
 
   const connectedIntegrations = (integrations ?? []).filter((integration) =>
     item.integrationIds.includes(integration.id),
   );
-  const metadataItems = collectWidgetHoverMetadata(
-    item,
-    settings,
-    connectedIntegrations.map((integration) => integration.kind),
-    translate,
-  );
-  const hasIntegrations = connectedIntegrations.length > 0;
-  const hasMetadata = metadataItems.length > 0;
 
-  if (isEditMode) {
+  if (!isEditMode) {
     return null;
   }
 
@@ -55,13 +42,13 @@ export const WidgetHoverOverlay = ({ item, integrations }: WidgetHoverOverlayPro
           </Text>
         </div>
 
-        {hasIntegrations && (
+        {connectedIntegrations.length > 0 && (
           <Avatar.Group spacing="xs" className={classes.integrations}>
             {connectedIntegrations.map((integration) => (
               <Tooltip key={integration.id} label={integration.name} withArrow position="top">
                 <Avatar
                   src={getIconUrl(integration.kind)}
-                  size={20}
+                  size={18}
                   radius="sm"
                   className={classes.integrationAvatar}
                 />
@@ -69,17 +56,6 @@ export const WidgetHoverOverlay = ({ item, integrations }: WidgetHoverOverlayPro
             ))}
           </Avatar.Group>
         )}
-
-        {hasMetadata && (
-          <Group className={classes.metadata} gap={4}>
-            {metadataItems.map((metadataItem) => (
-              <div key={`${metadataItem.label}-${metadataItem.value}`} className={classes.metadataItem}>
-                <span className={classes.metadataLabel}>{metadataItem.label}</span>
-                <span className={classes.metadataValue}>{metadataItem.value}</span>
-              </div>
-            ))}
-          </Group>
-        )}
       </div>
     </div>
   );