fix(widgets): restore readable summary text and icons (#7068)

* fix(widgets): restore readable summary text and icons

* fix: size Bazarr columns using displayed dimensions

* Revert "fix: size Bazarr columns using displayed dimensions"

This reverts commit 02e28a964faa191a91f840b7b45d79ea937dac5d.

packages/widgets/src/bazarr/component.module.css

@@ -35,11 +35,16 @@
 
 .grid[data-short] .statTile {
   flex-direction: row;
-  gap: 3px;
+  gap: calc(3px * var(--board-canvas-ui-scale, 1));
   padding: 3px 4px;
 }
 
+.grid[data-short] .statValue {
+  flex-shrink: 0;
+}
+
 .grid[data-short] .statLabel {
+  min-width: 0;
   text-align: left;
 }
 
@@ -55,7 +60,7 @@
 }
 
 .statLabel {
-  font-size: clamp(8px, 2.5cqi, 12px);
+  font-size: clamp(var(--mantine-font-size-xs), 2.5cqi, var(--mantine-font-size-sm));
   color: var(--mantine-color-dimmed);
   line-height: 1.2;
   text-align: center;
@@ -66,7 +71,7 @@
 }
 
 .statValue {
-  font-size: clamp(14px, 5.5cqi, 24px);
+  font-size: clamp(var(--mantine-font-size-lg), 5.5cqi, var(--mantine-font-size-2xl));
   font-weight: 700;
   color: var(--mantine-primary-color-filled);
   line-height: 1.1;

packages/widgets/src/bazarr/component.tsx

@@ -61,6 +61,7 @@ export default function BazarrWidget({
   width,
   height,
   displayMode,
+  displayScale = 1,
 }: WidgetComponentProps<"bazarr">) {
   const t = useI18n("widget.bazarr");
   const { data: badges, error } = clientApi.widget.bazarr.getBadges.useQuery(
@@ -84,7 +85,9 @@ export default function BazarrWidget({
   const visibleStatKeys = getVisibleBazarrStatKeys(options, displayMode);
 
   const gridCols = getGridCols(width, height, visibleStatKeys.length);
-  const iconSize = getIconSize(Math.min(width, height));
+  const iconSize = Math.max(20, getIconSize(Math.min(width, height)));
+  let responsiveHeight = height;
+  if (displayMode !== "advanced") responsiveHeight *= displayScale;
 
   if (visibleStatKeys.length === 0) {
     return (
@@ -102,7 +105,7 @@ export default function BazarrWidget({
     <div className={classes.root}>
       <div
         className={classes.grid}
-        data-short={height < 120 || undefined}
+        data-short={(responsiveHeight < 120 && gridCols < visibleStatKeys.length) || undefined}
         style={{ "--stat-cols": gridCols } as CSSProperties}
       >
         {visibleStatKeys.map((statKey) => {

packages/widgets/src/notifications/component.tsx

@@ -169,7 +169,7 @@ export default function NotificationsWidget({
                           aria-label={t("openService")}
                           title={t("openService")}
                         >
-                          <IconExternalLink size={16} />
+                          <IconExternalLink style={iconSizes.md} />
                         </ActionIcon>
                       )}
                       {notification.integrationKind === "gotify" &&
@@ -187,7 +187,7 @@ export default function NotificationsWidget({
                               })
                             }
                           >
-                            <IconTrash size={16} />
+                            <IconTrash style={iconSizes.md} />
                           </ActionIcon>
                         )}
                     </Stack>

packages/widgets/src/uptime-kuma/component.module.css

@@ -36,7 +36,7 @@
 }
 
 .heroTextOnly .heroValue {
-  font-size: clamp(22px, 10cqmin, 36px);
+  font-size: clamp(var(--mantine-font-size-2xl), 10cqmin, var(--mantine-font-size-4xl));
 }
 
 .heroText {
@@ -48,13 +48,13 @@
 }
 
 .heroLabel {
-  font-size: clamp(9px, 2.8cqmin, 13px);
+  font-size: clamp(var(--mantine-font-size-xs), 2.8cqmin, var(--mantine-font-size-sm));
   color: var(--mantine-color-dimmed);
   line-height: 1.2;
 }
 
 .heroValue {
-  font-size: clamp(18px, 8cqmin, 32px);
+  font-size: clamp(var(--mantine-font-size-xl), 8cqmin, var(--mantine-font-size-4xl));
   font-weight: 700;
   line-height: 1.1;
 }
@@ -88,19 +88,32 @@
   overflow: hidden;
 }
 
+.root[data-short] .statTile {
+  flex-direction: row;
+}
+
+.root[data-short] .statValue {
+  flex-shrink: 0;
+}
+
+.root[data-short] .statLabel {
+  min-width: 0;
+  text-align: left;
+}
+
 .statIcon {
   flex-shrink: 0;
 }
 
 .statValue {
-  font-size: clamp(14px, 5.5cqmin, 24px);
+  font-size: clamp(var(--mantine-font-size-lg), 5.5cqmin, var(--mantine-font-size-2xl));
   font-weight: 700;
   line-height: 1.1;
   text-align: center;
 }
 
 .statLabel {
-  font-size: clamp(8px, 2.5cqmin, 12px);
+  font-size: clamp(var(--mantine-font-size-xs), 2.5cqmin, var(--mantine-font-size-sm));
   color: var(--mantine-color-dimmed);
   line-height: 1.2;
   text-align: center;

packages/widgets/src/uptime-kuma/component.tsx

@@ -85,6 +85,7 @@ export default function UptimeKumaWidget({
   width,
   height,
   displayMode = "compact",
+  displayScale = 1,
 }: WidgetComponentProps<"uptimeKuma">) {
   if (integrationIds.length === 0) {
     throw new NoIntegrationDataError();
@@ -97,6 +98,7 @@ export default function UptimeKumaWidget({
       width={width}
       height={height}
       displayMode={displayMode}
+      displayScale={displayScale}
     />
   );
 }
@@ -107,9 +109,17 @@ interface UptimeKumaContentProps {
   width: number;
   height: number;
   displayMode: "compact" | "advanced";
+  displayScale: number;
 }
 
-function UptimeKumaContent({ integrationIds, options, width, height, displayMode }: UptimeKumaContentProps) {
+function UptimeKumaContent({
+  integrationIds,
+  options,
+  width,
+  height,
+  displayMode,
+  displayScale,
+}: UptimeKumaContentProps) {
   const t = useI18n("widget.uptimeKuma");
   const dashboardQuery = clientApi.widget.uptimeKuma.getDashboard.useQuery({ integrationIds });
   const dashboardData = getUsableWidgetQueryData(dashboardQuery);
@@ -129,11 +139,17 @@ function UptimeKumaContent({ integrationIds, options, width, height, displayMode
   );
   const uptimeValue = clampPercent(combined.averageUptimePercent);
   const uptimeColor = getUptimeColor(uptimeValue);
-  const visualScale = Math.min(width, height);
-  const ringSize = getRingSize(visualScale);
-  const iconSize = getIconSize(visualScale);
-  const gridCols = getGridCols(width);
   const isAdvanced = displayMode === "advanced";
+  let responsiveWidth = width;
+  let responsiveHeight = height;
+  if (!isAdvanced) {
+    responsiveWidth *= displayScale;
+    responsiveHeight *= displayScale;
+  }
+  const visualScale = Math.min(responsiveWidth, responsiveHeight);
+  const ringSize = getRingSize(visualScale);
+  const iconSize = getIconSize(Math.min(width, height));
+  const gridCols = getGridCols(responsiveWidth);
 
   const enabledStatKeys = Object.entries(statVisibilityByOption)
     .filter(([optionKey]) => isAdvanced || options[optionKey as keyof typeof options])
@@ -149,7 +165,7 @@ function UptimeKumaContent({ integrationIds, options, width, height, displayMode
   const heroRingClass = heroVariantByRing[String(showRing) as keyof typeof heroVariantByRing];
 
   const summaryContent = (
-    <div className={classes.root}>
+    <div className={classes.root} data-short={responsiveHeight < 240 || undefined}>
       {showHero && (
         <div className={`${classes.hero} ${heroLayoutClass} ${heroRingClass}`}>
           <div className={classes.heroText}>
@@ -195,7 +211,9 @@ function UptimeKumaContent({ integrationIds, options, width, height, displayMode
                   color={`var(--mantine-color-${color}-6)`}
                 />
                 <span className={classes.statValue}>{formatNumber(combined[statKey], 0)}</span>
-                <span className={classes.statLabel}>{t(`stats.${statKey}`)}</span>
+                <span className={classes.statLabel} title={t(`stats.${statKey}`)}>
+                  {t(`stats.${statKey}`)}
+                </span>
               </div>
             );
           })}