fix(widgets): restore compact v1 surfaces (#6710)

packages/widgets/src/coolify/component.tsx

@@ -17,7 +17,6 @@ export default function CoolifyWidget({
   options,
   integrationIds,
   width,
-  height,
   displayMode,
 }: WidgetComponentProps<"coolify">) {
   const t = useI18n("widget.coolify");
@@ -38,7 +37,6 @@ export default function CoolifyWidget({
       integrationIds={integrationIds}
       options={{ ...options, ...sectionVisibility }}
       width={width}
-      height={height}
       isAdvanced={isAdvanced}
     />
   );
@@ -48,11 +46,10 @@ interface CoolifyContentProps {
   integrationIds: string[];
   options: WidgetComponentProps<"coolify">["options"];
   width: number;
-  height: number;
   isAdvanced: boolean;
 }
 
-function CoolifyContent({ integrationIds, options, width, height, isAdvanced }: CoolifyContentProps) {
+function CoolifyContent({ integrationIds, options, width, isAdvanced }: CoolifyContentProps) {
   const t = useI18n("common");
   const instancesQuery = clientApi.widget.coolify.getInstancesInfo.useQuery({
     integrationIds,
@@ -64,8 +61,7 @@ function CoolifyContent({ integrationIds, options, width, height, isAdvanced }:
   );
   const failedInstances = instancesData.filter((instance) => instance.instanceInfo === null);
 
-  const isTiny = width < 256 || height < 144;
-  const hideFooter = height < 112;
+  const isTiny = width < 256;
   const [firstInstance] = successfulInstances;
   const widgetKey = createWidgetKey(integrationIds);
 
@@ -100,7 +96,6 @@ function CoolifyContent({ integrationIds, options, width, height, isAdvanced }:
             isTiny={!isAdvanced && isTiny}
             isAdvanced={isAdvanced}
             widgetKey={widgetKey}
-            hideFooter={!isAdvanced && hideFooter}
           />
         </div>
       </Stack>
@@ -120,7 +115,6 @@ function CoolifyContent({ integrationIds, options, width, height, isAdvanced }:
               isTiny={!isAdvanced && isTiny}
               isAdvanced={isAdvanced}
               widgetKey={widgetKey}
-              hideFooter={!isAdvanced && hideFooter}
             />
           ))}
         </SimpleGrid>

packages/widgets/src/coolify/instance-card.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Accordion, Anchor, Badge, Card, Group, Image, Stack, Text, Tooltip } from "@mantine/core";
+import { Accordion, Anchor, Badge, Card, Group, Image, Stack, Text } from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";
 
 import { useTimeAgo } from "@homarr/common";
@@ -22,12 +22,10 @@ interface InstanceCardProps {
   isTiny: boolean;
   isAdvanced: boolean;
   widgetKey: string;
-  hideFooter: boolean;
 }
 
-export function InstanceCard({ instance, options, isTiny, isAdvanced, widgetKey, hideFooter }: InstanceCardProps) {
+export function InstanceCard({ instance, options, isTiny, isAdvanced, widgetKey }: InstanceCardProps) {
   const t = useI18n("widget.coolify");
-  const tCommon = useI18n("common");
   const cardKey = `${widgetKey}-${instance.integrationId}`;
   const [showIp, setShowIp] = useLocalStorage({
     key: `coolify-show-ip-${cardKey}`,
@@ -53,32 +51,10 @@ export function InstanceCard({ instance, options, isTiny, isAdvanced, widgetKey,
   const runningServices = instance.instanceInfo.services.filter(
     (s) => parseStatus(s.status ?? "") === "running",
   ).length;
-  const healthyResources =
-    (options.showServers ? onlineServers : 0) +
-    (options.showApplications ? runningApps : 0) +
-    (options.showServices ? runningServices : 0);
-  const totalResources =
-    (options.showServers ? instance.instanceInfo.servers.length : 0) +
-    (options.showApplications ? instance.instanceInfo.applications.length : 0) +
-    (options.showServices ? instance.instanceInfo.services.length : 0);
-  const resourceSummary = [
-    options.showServers ? `${tCommon("servers")}: ${onlineServers}/${instance.instanceInfo.servers.length}` : null,
-    options.showApplications
-      ? `${tCommon("applications")}: ${runningApps}/${instance.instanceInfo.applications.length}`
-      : null,
-    options.showServices ? `${tCommon("services")}: ${runningServices}/${instance.instanceInfo.services.length}` : null,
-  ]
-    .filter(Boolean)
-    .join(" · ");
 
   return (
     <Card p={0} radius="sm" bg="transparent">
-      <Group
-        p="xs"
-        justify="space-between"
-        wrap="nowrap"
-        className={classes.neutralDividerBottom}
-      >
+      <Group p="xs" justify="space-between" wrap="nowrap" className={classes.neutralDividerBottom}>
         <Group gap={4} wrap="nowrap" miw={0}>
           <Image src={COOLIFY_ICON_URL} alt="Coolify" w={16} h={16} />
           <Stack gap={0} miw={0}>
@@ -102,19 +78,12 @@ export function InstanceCard({ instance, options, isTiny, isAdvanced, widgetKey,
           </Stack>
         </Group>
         <Group gap={4} wrap="nowrap">
-          {isTiny && totalResources > 0 ? (
-            <Tooltip label={resourceSummary}>
-              <Badge variant="dot" color={getBadgeColor(healthyResources, totalResources)} size="xs">
-                {healthyResources}/{totalResources}
-              </Badge>
-            </Tooltip>
-          ) : null}
-          {!isTiny && options.showServers && (
+          {options.showServers && (
             <Badge variant="dot" color={getBadgeColor(onlineServers, instance.instanceInfo.servers.length)} size="xs">
               {onlineServers}/{instance.instanceInfo.servers.length}
             </Badge>
           )}
-          {!isTiny && options.showApplications && (
+          {options.showApplications && (
             <Badge
               variant="dot"
               color={getBadgeColor(runningApps, instance.instanceInfo.applications.length)}
@@ -123,7 +92,7 @@ export function InstanceCard({ instance, options, isTiny, isAdvanced, widgetKey,
               {runningApps}/{instance.instanceInfo.applications.length}
             </Badge>
           )}
-          {!isTiny && options.showServices && (
+          {options.showServices && (
             <Badge
               variant="dot"
               color={getBadgeColor(runningServices, instance.instanceInfo.services.length)}
@@ -168,7 +137,7 @@ export function InstanceCard({ instance, options, isTiny, isAdvanced, widgetKey,
         )}
       </Accordion>
 
-      {!hideFooter && <InstanceFooter version={instance.instanceInfo.version} updatedAt={instance.updatedAt} />}
+      <InstanceFooter version={instance.instanceInfo.version} updatedAt={instance.updatedAt} />
     </Card>
   );
 }

packages/widgets/src/coolify/resource-row.tsx

@@ -114,7 +114,7 @@ export function ResourceRow({ item, baseUrl, isTiny, resourceType }: ResourceRow
             <IconLink size="var(--mantine-font-size-xs)" />
           </ActionIcon>
         )}
-        {!isTiny && logsUrl && (
+        {logsUrl && (
           <ActionIcon
             className={actionTargetClasses.root}
             component="a"
@@ -129,12 +129,10 @@ export function ResourceRow({ item, baseUrl, isTiny, resourceType }: ResourceRow
             <IconFileText size="var(--mantine-font-size-xs)" />
           </ActionIcon>
         )}
-        {!isTiny && (
-          <Text fz="10px" c="dimmed" lineClamp={1}>
-            {item.projectName ?? "-"} / {item.environmentName ?? "-"}
-          </Text>
-        )}
-        {!isTiny && resourceTimestamp && (
+        <Text fz="10px" c="dimmed" lineClamp={1}>
+          {item.projectName ?? "-"} / {item.environmentName ?? "-"}
+        </Text>
+        {resourceTimestamp && (
           <Text fz="10px" c="dimmed" ml="auto">
             {resourceTimestamp}
           </Text>

packages/widgets/src/coolify/single-instance-layout.tsx

@@ -22,17 +22,9 @@ interface SingleInstanceLayoutProps {
   isTiny: boolean;
   isAdvanced: boolean;
   widgetKey: string;
-  hideFooter: boolean;
 }
 
-export function SingleInstanceLayout({
-  instance,
-  options,
-  isTiny,
-  isAdvanced,
-  widgetKey,
-  hideFooter,
-}: SingleInstanceLayoutProps) {
+export function SingleInstanceLayout({ instance, options, isTiny, isAdvanced, widgetKey }: SingleInstanceLayoutProps) {
   const t = useI18n("widget.coolify");
   const [showIp, setShowIp] = useLocalStorage({
     key: `coolify-show-ip-${widgetKey}`,
@@ -115,7 +107,7 @@ export function SingleInstanceLayout({
           )}
         </Accordion>
 
-        {!hideFooter && <InstanceFooter version={instance.instanceInfo.version} updatedAt={instance.updatedAt} />}
+        <InstanceFooter version={instance.instanceInfo.version} updatedAt={instance.updatedAt} />
       </Stack>
     </ScrollArea>
   );