fix(app): improve responsive styles (#2537)

packages/widgets/src/app/component.tsx

@@ -18,7 +18,7 @@ import classes from "./app.module.css";
 import { PingDot } from "./ping/ping-dot";
 import { PingIndicator } from "./ping/ping-indicator";
 
-export default function AppWidget({ options, isEditMode }: WidgetComponentProps<"app">) {
+export default function AppWidget({ options, isEditMode, height, width }: WidgetComponentProps<"app">) {
   const t = useI18n();
   const settings = useSettings();
   const board = useRequiredBoard();
@@ -56,6 +56,8 @@ export default function AppWidget({ options, isEditMode }: WidgetComponentProps<
     [app, options.openInNewTab],
   );
 
+  const tinyText = height < 100 || width < 100;
+
   return (
     <AppLink
       href={app.href ?? undefined}
@@ -78,7 +80,7 @@ export default function AppWidget({ options, isEditMode }: WidgetComponentProps<
           align="center"
         >
           {options.showTitle && (
-            <Text className="app-title" fw={700} ta="center">
+            <Text className="app-title" fw={700} size={tinyText ? "8px" : "sm"} ta="center">
               {app.name}
             </Text>
           )}

packages/widgets/src/app/ping/ping-dot.tsx

@@ -15,17 +15,17 @@ export const PingDot = ({ color, tooltip, ...props }: PingDotProps) => {
 
   return (
     <Box bottom={10} right={10} pos="absolute" display={"flex"}>
-      <Tooltip label={tooltip}>
+      <Tooltip multiline label={tooltip} maw={350}>
         {pingIconsEnabled ? (
-          <props.icon style={{ width: 20, height: 20 }} strokeWidth={5} color={color} />
+          <props.icon style={{ width: 12, height: 12 }} strokeWidth={4} color={color} />
         ) : (
           <Box
             bg={color}
             style={{
               borderRadius: "100%",
             }}
-            w={16}
-            h={16}
+            w={10}
+            h={10}
           ></Box>
         )}
       </Tooltip>