fix(smart-home): improve responsive styles (#2540)

packages/widgets/src/smart-home/entity-state/component.tsx

@@ -13,6 +13,7 @@ export default function SmartHomeEntityStateWidget({
   options,
   integrationIds,
   isEditMode,
+  width,
 }: WidgetComponentProps<"smartHome-entityState">) {
   // It will always have at least one integration as otherwise the NoIntegrationSelectedError would be thrown in item-content.tsx
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -71,6 +72,7 @@ export default function SmartHomeEntityStateWidget({
     ],
     [handleClick, options.clickable, options.displayName, options.entityId],
   );
+  const isTiny = width < 128;
 
   return (
     <UnstyledButton
@@ -86,10 +88,10 @@ export default function SmartHomeEntityStateWidget({
     >
       <Center h="100%" w="100%">
         <Stack align="center" gap="md">
-          <Text ta="center" fw="bold" size="lg">
+          <Text ta="center" fw="bold" size={isTiny ? "sm" : "lg"}>
             {options.displayName}
           </Text>
-          <Text ta="center">
+          <Text ta="center" size={isTiny ? "xs" : "lg"}>
             {entityState}
             {attribute}
           </Text>

packages/widgets/src/smart-home/execute-automation/component.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { ActionIcon, Center, LoadingOverlay, Overlay, Stack, Text, UnstyledButton } from "@mantine/core";
+import { Center, LoadingOverlay, Overlay, Stack, Text, ThemeIcon, UnstyledButton } from "@mantine/core";
 import { useDisclosure, useTimeout } from "@mantine/hooks";
 import { IconAutomation, IconCheck } from "@tabler/icons-react";
 
@@ -15,6 +15,7 @@ export default function SmartHomeTriggerAutomationWidget({
   options,
   integrationIds,
   isEditMode,
+  width,
 }: WidgetComponentProps<"smartHome-executeAutomation">) {
   const [isShowSuccess, { open: showSuccess, close: closeSuccess }] = useDisclosure();
   const { start } = useTimeout(() => {
@@ -59,6 +60,8 @@ export default function SmartHomeTriggerAutomationWidget({
     [handleClick, options.automationId, options.displayName],
   );
 
+  const isTiny = width < 128;
+
   return (
     <UnstyledButton
       onClick={handleClick}
@@ -69,17 +72,19 @@ export default function SmartHomeTriggerAutomationWidget({
       {isShowSuccess && (
         <Overlay>
           <Center w="100%" h="100%">
-            <ActionIcon variant="filled" color="green" size="xl" radius="xl">
+            <ThemeIcon variant="filled" color="green" size="xl" radius="xl">
               <IconCheck style={{ width: "70%", height: "70%" }} stroke={1.5} />
-            </ActionIcon>
+            </ThemeIcon>
           </Center>
         </Overlay>
       )}
       <LoadingOverlay visible={isPending} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
       <Center w="100%" h="100%">
         <Stack align="center" gap="md">
-          <IconAutomation />
+          <IconAutomation size={isTiny ? 16 : undefined} />
-          <Text fw="bold">{options.displayName}</Text>
+          <Text ta="center" fw="bold" fz={isTiny ? "xs" : undefined}>
+            {options.displayName}
+          </Text>
         </Stack>
       </Center>
     </UnstyledButton>