fix: polish widget failure feedback

apps/docs/docs/widgets/timetable/index.mdx

@@ -37,4 +37,4 @@ import streetDepartures from "./img/street-departures.png";
 
 For security, all custom base URLs must resolve to a public IP address whenever Homarr uses them. Private and local hosts are rejected.
 
-If a timetable refresh fails after departures have loaded, the widget keeps the previous departures visible and marks them with their last update time.
+If a timetable refresh fails after departures have loaded, the widget keeps the previous departures visible and marks them as stale. The advanced view also shows their last update time.

packages/widgets/src/common/integration-error-indicator.tsx

@@ -24,7 +24,7 @@ export function IntegrationErrorIndicator({ results }: IntegrationErrorIndicator
   const label = `${t("error")}: ${names}`;
   return (
     <Tooltip label={label} position="left" withArrow>
-      <ActionIcon variant="transparent" color="orange" size={18} aria-label={label} style={{ cursor: "help" }}>
+      <ActionIcon variant="transparent" color="orange" size={28} aria-label={label} style={{ cursor: "help" }}>
         <IconAlertTriangle aria-hidden size={14} />
       </ActionIcon>
     </Tooltip>

packages/widgets/src/rssFeed/component.tsx

@@ -60,8 +60,8 @@ export default function RssFeed({ options, width, displayMode }: WidgetComponent
   return (
     <ScrollArea className="scroll-area-w100" w="100%" h="100%" p={isAdvanced ? "md" : "xs"}>
       {warning && (
-        <Alert role="status" color="orange" icon={<IconAlertTriangle aria-hidden size={16} />} p="xs" mb="xs">
-          {warning}
+        <Alert role="presentation" color="orange" icon={<IconAlertTriangle aria-hidden size={16} />} p="xs" mb="xs">
+          <output>{warning}</output>
         </Alert>
       )}
       <SimpleGrid cols={columns} w="100%" spacing={isAdvanced ? "md" : "xs"} verticalSpacing={isAdvanced ? "md" : "xs"}>

packages/widgets/src/timetable/component.tsx

@@ -51,15 +51,24 @@ const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width }:
   if (error && timetable === undefined) throw error;
 
   const entries = timetable?.entries ?? [];
-  const staleWarning =
-    error && timetable ? t("warning.stale", { time: dayjs(timetable.timestamp).format("HH:mm:ss") }) : undefined;
+  const staleTime = timetable ? dayjs(timetable.timestamp).format("HH:mm:ss") : undefined;
+  const staleWarning = error && staleTime ? t("warning.stale", { time: staleTime }) : undefined;
+  const compactStaleWarning = error && staleTime ? t("warning.staleCompact") : undefined;
 
   return (
     <Stack w="100%" h="100%" gap="xs" p="sm">
       <Text fw="bold">{t("title", { station: station.label })}</Text>
-      {staleWarning && (
-        <Alert role="status" color="orange" icon={<IconAlertTriangle aria-hidden size={16} />} p="xs">
-          {staleWarning}
+      {compactStaleWarning && displayMode === "compact" && (
+        <Group gap={2} wrap="nowrap">
+          <IconAlertTriangle aria-hidden size={12} color="var(--mantine-color-orange-6)" />
+          <Text component="output" size="xs" c="orange" style={{ whiteSpace: "nowrap" }}>
+            {compactStaleWarning}
+          </Text>
+        </Group>
+      )}
+      {staleWarning && displayMode === "advanced" && (
+        <Alert role="presentation" color="orange" icon={<IconAlertTriangle aria-hidden size={16} />} p="xs">
+          <output>{staleWarning}</output>
         </Alert>
       )}
       <ScrollArea style={{ flex: 1, minHeight: 0 }}>