From fb800a00084833e785deecdb3b6fde4e35ddf7b8 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Sat, 8 Mar 2025 20:54:48 +0100
Subject: [PATCH] fix(app): improve responsive styles (#2537)

---
 packages/widgets/src/app/component.tsx     | 6 ++++--
 packages/widgets/src/app/ping/ping-dot.tsx | 8 ++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/widgets/src/app/component.tsx b/packages/widgets/src/app/component.tsx
index 34a8dafb6..a89532063 100644
--- a/packages/widgets/src/app/component.tsx
+++ b/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>
           )}
diff --git a/packages/widgets/src/app/ping/ping-dot.tsx b/packages/widgets/src/app/ping/ping-dot.tsx
index d728e8678..b559adc5d 100644
--- a/packages/widgets/src/app/ping/ping-dot.tsx
+++ b/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>