fix(indexer-manager): improve responsive styles (#2541)

packages/widgets/src/indexer-manager/component.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Anchor, Button, Card, Container, Flex, Group, ScrollArea, Text } from "@mantine/core";
+import { ActionIcon, Anchor, Button, Card, Flex, Group, ScrollArea, Stack, Text } from "@mantine/core";
 import { IconCircleCheck, IconCircleX, IconReportSearch, IconTestPipe } from "@tabler/icons-react";
 import combineClasses from "clsx";
 
@@ -11,7 +11,12 @@ import { useI18n } from "@homarr/translation/client";
 import type { WidgetComponentProps } from "../definition";
 import classes from "./component.module.css";
 
-export default function IndexerManagerWidget({ options, integrationIds }: WidgetComponentProps<"indexerManager">) {
+export default function IndexerManagerWidget({
+  options,
+  integrationIds,
+  width,
+  height,
+}: WidgetComponentProps<"indexerManager">) {
   const t = useI18n();
   const [indexersData] = clientApi.widget.indexerManager.getIndexersStatus.useSuspenseQuery(
     { integrationIds },
@@ -40,37 +45,60 @@ export default function IndexerManagerWidget({ options, integrationIds }: Widget
     },
   );
 
+  const hasSmallWidth = width < 256;
+  const hasSmallHeight = height < 256;
+
   return (
     <Flex className="indexer-manager-container" h="100%" direction="column" gap="sm" p="sm" align="center">
-      <Flex className="indexer-manager-title" align={"center"} gap={"xs"}>
+      <Group className="indexer-manager-title" align="center" gap="xs" wrap="nowrap">
-        <IconReportSearch className="indexer-manager-title-icon" size={30} />
+        <IconReportSearch
-        <Text size="md" fw={"bold"}>
+          className="indexer-manager-title-icon"
+          size={hasSmallWidth ? 16 : 20}
+          style={{ minWidth: hasSmallWidth ? 16 : 20 }}
+        />
+        <Text size={hasSmallWidth ? "xs" : "md"} fw="bold">
           {t("widget.indexerManager.title")}
         </Text>
-      </Flex>
+        {hasSmallHeight && (
+          <ActionIcon
+            className="indexer-manager-test-action-icon"
+            size="sm"
+            radius={board.itemRadius}
+            variant="light"
+            loading={isPending}
+            loaderProps={{ type: "dots" }}
+            onClick={() => {
+              testAll({ integrationIds });
+            }}
+          >
+            <IconTestPipe size={12} />
+          </ActionIcon>
+        )}
+      </Group>
       <Card
         className={combineClasses("indexer-manager-list-container", classes.card)}
         w="100%"
-        p="sm"
+        p="xs"
         radius={board.itemRadius}
         flex={1}
       >
-        <ScrollArea className="indexer-manager-list-scroll-area" h="100%">
+        <ScrollArea className="indexer-manager-list-scroll-area" h="100%" scrollbars="y">
           {indexersData.map(({ integrationId, indexers }) => (
-            <Container className={`indexer-manager-${integrationId}-list-container`} p={0} key={integrationId}>
+            <Stack gap={4} className={`indexer-manager-${integrationId}-list-container`} p={0} key={integrationId}>
               {indexers.map((indexer) => (
                 <Group
                   className={`indexer-manager-line indexer-manager-${indexer.name}`}
-                  h={30}
                   key={indexer.id}
                   justify="space-between"
+                  gap="xs"
+                  wrap="nowrap"
                 >
                   <Anchor
                     className="indexer-manager-line-anchor"
                     href={indexer.url}
                     target={options.openIndexerSiteInNewTab ? "_blank" : "_self"}
                   >
-                    <Text className="indexer-manager-line-anchor-text" c="dimmed" size="md">
+                    <Text className="indexer-manager-line-anchor-text" c="dimmed" size={hasSmallWidth ? "xs" : "sm"}>
                       {indexer.name}
                     </Text>
                   </Anchor>
@@ -78,35 +106,38 @@ export default function IndexerManagerWidget({ options, integrationIds }: Widget
                     <IconCircleX
                       className="indexer-manager-line-status-icon indexer-manager-line-icon-disabled"
                       color="#d9534f"
-                      size={24}
+                      size={hasSmallWidth ? 12 : 16}
                     />
                   ) : (
                     <IconCircleCheck
                       className="indexer-manager-line-status-icon indexer-manager-line-icon-enabled"
                       color="#2ecc71"
-                      size={24}
+                      size={hasSmallWidth ? 12 : 16}
                     />
                   )}
                 </Group>
               ))}
-            </Container>
+            </Stack>
           ))}
         </ScrollArea>
       </Card>
-      <Button
+      {!hasSmallHeight && (
-        className="indexer-manager-test-button"
+        <Button
-        w="100%"
+          className="indexer-manager-test-button"
-        radius={board.itemRadius}
+          w="100%"
-        variant="light"
+          size="xs"
-        leftSection={<IconTestPipe size={"1rem"} />}
+          radius={board.itemRadius}
-        loading={isPending}
+          variant="light"
-        loaderProps={{ type: "dots" }}
+          leftSection={<IconTestPipe size={"1rem"} />}
-        onClick={() => {
+          loading={isPending}
-          testAll({ integrationIds });
+          loaderProps={{ type: "dots" }}
-        }}
+          onClick={() => {
-      >
+            testAll({ integrationIds });
-        {t("widget.indexerManager.testAll")}
+          }}
-      </Button>
+        >
+          {t("widget.indexerManager.testAll")}
+        </Button>
+      )}
     </Flex>
   );
 }