🔀 Merge Mantine v5.0 into Overseerr-integaration

2026-02-24 15:30:54 +01:00 · 2022-08-07 12:25:23 +02:00
parent 70814d0bc6 6dfda07713
commit 60ef0fe5d6
43 changed files with 1226 additions and 1005 deletions
--- a/src/modules/calendar/CalendarModule.tsx
+++ b/src/modules/calendar/CalendarModule.tsx
@@ -260,54 +260,59 @@ function DayComponent(props: any) {
      )}
      <Popover
        position="bottom"
+        withinPortal
        radius="lg"
        shadow="xl"
        transition="pop"
        styles={{
-          body: {
+          dropdown: {
            boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.1), 0 14px 11px rgba(0, 0, 0, 0.1)',
          },
        }}
        width="auto"
        onClose={() => setOpened(false)}
        opened={opened}
-        target={day}
      >
-        <ScrollArea style={{ height: 400 }}>
-          {sonarrFiltered.map((media: any, index: number) => (
-            <React.Fragment key={index}>
-              <SonarrMediaDisplay media={media} />
-              {index < sonarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
-            </React.Fragment>
-          ))}
-          {radarrFiltered.length > 0 && sonarrFiltered.length > 0 && (
-            <Divider variant="dashed" my="xl" />
-          )}
-          {radarrFiltered.map((media: any, index: number) => (
-            <React.Fragment key={index}>
-              <RadarrMediaDisplay media={media} />
-              {index < radarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
-            </React.Fragment>
-          ))}
-          {sonarrFiltered.length > 0 && lidarrFiltered.length > 0 && (
-            <Divider variant="dashed" my="xl" />
-          )}
-          {lidarrFiltered.map((media: any, index: number) => (
-            <React.Fragment key={index}>
-              <LidarrMediaDisplay media={media} />
-              {index < lidarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
-            </React.Fragment>
-          ))}
-          {lidarrFiltered.length > 0 && readarrFiltered.length > 0 && (
-            <Divider variant="dashed" my="xl" />
-          )}
-          {readarrFiltered.map((media: any, index: number) => (
-            <React.Fragment key={index}>
-              <ReadarrMediaDisplay media={media} />
-              {index < readarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
-            </React.Fragment>
-          ))}
-        </ScrollArea>
+        <Popover.Target>
+          <div>{day}</div>
+        </Popover.Target>
+        <Popover.Dropdown>
+          <ScrollArea style={{ height: 400 }}>
+            {sonarrFiltered.map((media: any, index: number) => (
+              <React.Fragment key={index}>
+                <SonarrMediaDisplay media={media} />
+                {index < sonarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
+              </React.Fragment>
+            ))}
+            {radarrFiltered.length > 0 && sonarrFiltered.length > 0 && (
+              <Divider variant="dashed" my="xl" />
+            )}
+            {radarrFiltered.map((media: any, index: number) => (
+              <React.Fragment key={index}>
+                <RadarrMediaDisplay media={media} />
+                {index < radarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
+              </React.Fragment>
+            ))}
+            {sonarrFiltered.length > 0 && lidarrFiltered.length > 0 && (
+              <Divider variant="dashed" my="xl" />
+            )}
+            {lidarrFiltered.map((media: any, index: number) => (
+              <React.Fragment key={index}>
+                <LidarrMediaDisplay media={media} />
+                {index < lidarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
+              </React.Fragment>
+            ))}
+            {lidarrFiltered.length > 0 && readarrFiltered.length > 0 && (
+              <Divider variant="dashed" my="xl" />
+            )}
+            {readarrFiltered.map((media: any, index: number) => (
+              <React.Fragment key={index}>
+                <ReadarrMediaDisplay media={media} />
+                {index < readarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
+              </React.Fragment>
+            ))}
+          </ScrollArea>
+        </Popover.Dropdown>
      </Popover>
    </Box>
  );
--- a/src/modules/common/MediaDisplay.tsx
+++ b/src/modules/common/MediaDisplay.tsx
@@ -8,8 +8,7 @@ import {
  Anchor,
  ScrollArea,
  createStyles,
-  Tooltip,
-  Button,
+  Stack,
 } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 import { IconLink } from '@tabler/icons';
@@ -58,15 +57,8 @@ export function MediaDisplay(props: { media: IMedia }) {
            alt={media.title}
          />
        )}
-        <Group
-          style={{ minWidth: phone ? 450 : '65vw' }}
-          noWrap
-          mr="md"
-          my="sm"
-          position="apart"
-          className={classes.overview}
-        >
-          <Group direction="column" spacing={0}>
+        <Stack style={{ minWidth: phone ? 450 : '65vw' }}>
+          <Group noWrap mr="sm" className={classes.overview}>
            <Title order={3}>{media.title}</Title>
            {media.artist && <Text color="gray">New release from {media.artist}</Text>}
            {(media.episodeNumber || media.seasonNumber) && (
@@ -101,8 +93,8 @@ export function MediaDisplay(props: { media: IMedia }) {
              </ActionIcon>
            </Anchor>
          )}
-        </Group>
-        <Group direction="column" position="apart">
+        </Stack>
+        <Stack>
          <ScrollArea style={{ height: 280, maxWidth: 700 }}>{media.overview}</ScrollArea>
          <Group align="center" position="center" spacing="xs">
            {media.genres.slice(-5).map((genre: string, i: number) => (
@@ -111,7 +103,7 @@ export function MediaDisplay(props: { media: IMedia }) {
              </Badge>
            ))}
          </Group>
-        </Group>
+        </Stack>
      </Text>
    </Group>
  );
--- a/src/modules/dashdot/DashdotModule.tsx
+++ b/src/modules/dashdot/DashdotModule.tsx
@@ -13,6 +13,10 @@ export const DashdotModule = asModule({
  icon: CalendarIcon,
  component: DashdotComponent,
  options: {
+    url: {
+      name: 'Dash. URL',
+      value: '',
+    },
    cpuMultiView: {
      name: 'CPU Multi-Core View',
      value: false,
@@ -88,12 +92,12 @@ const bytePrettyPrint = (byte: number): string =>
    ? `${(byte / 1024).toFixed(1)} KiB`
    : `${byte.toFixed(1)} B`;

-const useJson = (service: serviceItem | undefined, url: string) => {
+const useJson = (targetUrl: string, url: string) => {
  const [data, setData] = useState<any | undefined>();

  const doRequest = async () => {
    try {
-      const resp = await axios.get(url, { baseURL: service?.url });
+      const resp = await axios.get(`/api/modules/dashdot?url=${url}&base=${targetUrl}`);

      setData(resp.data);
      // eslint-disable-next-line no-empty
@@ -101,10 +105,10 @@ const useJson = (service: serviceItem | undefined, url: string) => {
  };

  useEffect(() => {
-    if (service?.url) {
+    if (targetUrl) {
      doRequest();
    }
-  }, [service?.url]);
+  }, [targetUrl]);

  return data;
 };
@@ -118,8 +122,10 @@ export function DashdotComponent() {
  const dashConfig = config.modules?.[DashdotModule.title]
    .options as typeof DashdotModule['options'];
  const isCompact = dashConfig?.useCompactView?.value ?? false;
-  const dashdotService = config.services.filter((service) => service.type === 'Dash.')[0];
-
+  const dashdotService: serviceItem | undefined = config.services.filter(
+    (service) => service.type === 'Dash.'
+  )[0];
+  const dashdotUrl = dashdotService?.url ?? dashConfig?.url?.value ?? '';
  const enabledGraphs = dashConfig?.graphs?.value ?? ['CPU', 'RAM', 'Storage', 'Network'];
  const cpuEnabled = enabledGraphs.includes('CPU');
  const storageEnabled = enabledGraphs.includes('Storage');
@@ -127,8 +133,8 @@ export function DashdotComponent() {
  const networkEnabled = enabledGraphs.includes('Network');
  const gpuEnabled = enabledGraphs.includes('GPU');

-  const info = useJson(dashdotService, '/info');
-  const storageLoad = useJson(dashdotService, '/load/storage');
+  const info = useJson(dashdotUrl, '/info');
+  const storageLoad = useJson(dashdotUrl, '/load/storage');

  const totalUsed =
    (storageLoad?.layout as any[])?.reduce((acc, curr) => (curr.load ?? 0) + acc, 0) ?? 0;
@@ -166,13 +172,23 @@ export function DashdotComponent() {
    },
  ].filter((g) => g.enabled);

+  if (dashdotUrl === '') {
+    return (
+      <div>
+        <h2 className={classes.heading}>Dash.</h2>
+        <p>
+          No dash. service found. Please add one to your Homarr dashboard or set a dashdot URL in
+          the module options
+        </p>
+      </div>
+    );
+  }
+
  return (
    <div>
      <h2 className={classes.heading}>Dash.</h2>

-      {!dashdotService ? (
-        <p>No dash. service found. Please add one to your Homarr dashboard.</p>
-      ) : !info ? (
+      {!info ? (
        <p>Cannot acquire information from dash. - are you running the latest version?</p>
      ) : (
        <div className={classes.graphsContainer}>
@@ -209,9 +225,7 @@ export function DashdotComponent() {
              }
              key={graph.name}
              title={graph.name}
-              src={`${
-                dashdotService.url
-              }?singleGraphMode=true&graph=${graph.name.toLowerCase()}&theme=${colorScheme}&surface=${(colorScheme ===
+              src={`${dashdotUrl}?singleGraphMode=true&graph=${graph.name.toLowerCase()}&theme=${colorScheme}&surface=${(colorScheme ===
              'dark'
                ? theme.colors.dark[7]
                : theme.colors.gray[0]
--- a/src/modules/date/DateModule.tsx
+++ b/src/modules/date/DateModule.tsx
@@ -34,9 +34,9 @@ export default function DateComponent(props: any) {
  }, []);

  return (
-    <Group p="sm" spacing="xs" direction="column">
+    <Group p="sm" spacing="xs">
      <Title>{dayjs(date).format(formatString)}</Title>
-      <Text size="xl">{dayjs(date).format('dddd, MMMM D')}</Text>
+      <Text size="lg">{dayjs(date).format('dddd, MMMM D')}</Text>
    </Group>
  );
 }
--- a/src/modules/docker/ContainerActionBar.tsx
+++ b/src/modules/docker/ContainerActionBar.tsx
@@ -1,5 +1,4 @@
 import { Button, Group, Modal, Title } from '@mantine/core';
-import { useBooleanToggle } from '@mantine/hooks';
 import { showNotification, updateNotification } from '@mantine/notifications';
 import {
  IconCheck,
@@ -14,6 +13,7 @@ import axios from 'axios';
 import Dockerode from 'dockerode';
 import { tryMatchService } from '../../tools/addToHomarr';
 import { AddAppShelfItemForm } from '../../components/AppShelf/AddAppShelfItem';
+import { useState } from 'react';

 function sendDockerCommand(
  action: string,
@@ -60,7 +60,7 @@ export interface ContainerActionBarProps {
 }

 export default function ContainerActionBar({ selected, reload }: ContainerActionBarProps) {
-  const [opened, setOpened] = useBooleanToggle(false);
+  const [opened, setOpened] = useState<boolean>(false);
  return (
    <Group>
      <Modal
--- a/src/modules/docker/DockerModule.tsx
+++ b/src/modules/docker/DockerModule.tsx
@@ -1,4 +1,4 @@
-import { ActionIcon, Drawer, Group, LoadingOverlay, Text } from '@mantine/core';
+import { ActionIcon, Drawer, Group, LoadingOverlay, Text, Tooltip } from '@mantine/core';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 import Docker from 'dockerode';
@@ -20,7 +20,6 @@ export default function DockerMenuButton(props: any) {
  const [opened, setOpened] = useState(false);
  const [containers, setContainers] = useState<Docker.ContainerInfo[]>([]);
  const [selection, setSelection] = useState<Docker.ContainerInfo[]>([]);
-  const [visible, setVisible] = useState(false);
  const { config } = useConfig();
  const moduleEnabled = config.modules?.[DockerModule.title]?.enabled ?? false;

@@ -32,14 +31,12 @@ export default function DockerMenuButton(props: any) {
    if (!moduleEnabled) {
      return;
    }
-    setVisible(true);
    setTimeout(() => {
      axios
        .get('/api/docker/containers')
        .then((res) => {
          setContainers(res.data);
          setSelection([]);
-          setVisible(false);
        })
        .catch(() =>
          // Send an Error notification
@@ -61,14 +58,16 @@ export default function DockerMenuButton(props: any) {
  if (containers.length < 1) return null;
  return (
    <>
-      <Drawer opened={opened} onClose={() => setOpened(false)} padding="xl" size="full">
-        <ContainerActionBar selected={selection} reload={reload} />
-        <div style={{ position: 'relative' }}>
-          <LoadingOverlay transitionDuration={500} visible={visible} />
-          <DockerTable containers={containers} selection={selection} setSelection={setSelection} />
-        </div>
+      <Drawer
+        opened={opened}
+        onClose={() => setOpened(false)}
+        padding="xl"
+        size="full"
+        title={<ContainerActionBar selected={selection} reload={reload} />}
+      >
+        <DockerTable containers={containers} selection={selection} setSelection={setSelection} />
      </Drawer>
-      <Group position="center">
+      <Tooltip label="Docker">
        <ActionIcon
          variant="default"
          radius="md"
@@ -78,7 +77,7 @@ export default function DockerMenuButton(props: any) {
        >
          <IconBrandDocker />
        </ActionIcon>
-      </Group>
+      </Tooltip>
    </>
  );
 }
--- a/src/modules/docker/DockerTable.tsx
+++ b/src/modules/docker/DockerTable.tsx
@@ -101,7 +101,6 @@ export default function DockerTable({
        onChange={handleSearchChange}
      />
      <Table captionSide="bottom" highlightOnHover sx={{ minWidth: 800 }} verticalSpacing="sm">
-        <caption>your docker containers</caption>
        <thead>
          <tr>
            <th style={{ width: 40 }}>
--- a/src/modules/downloads/DownloadsModule.tsx
+++ b/src/modules/downloads/DownloadsModule.tsx
@@ -9,6 +9,7 @@ import {
  ScrollArea,
  Center,
  Image,
+  Stack,
 } from '@mantine/core';
 import { IconDownload as Download } from '@tabler/icons';
 import { useEffect, useState } from 'react';
@@ -82,10 +83,10 @@ export default function DownloadComponent() {

  if (downloadServices.length === 0) {
    return (
-      <Group direction="column">
+      <Group>
        <Title order={3}>No supported download clients found!</Title>
        <Group>
-          <Text>Add a download service to view your current downloads...</Text>
+          <Text>Add a download service to view your current downloads</Text>
          <AddItemShelfButton />
        </Group>
      </Group>
@@ -187,13 +188,8 @@ export default function DownloadComponent() {
      );
    });

-  const easteregg = (
-    <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-      <Image fit="cover" height={300} src="https://danjohnvelasco.github.io/images/empty.png" />
-    </Center>
-  );
  return (
-    <Group noWrap grow direction="column" mt="xl">
+    <Stack mt="xl">
      <ScrollArea sx={{ height: 300 }}>
        {rows.length > 0 ? (
          <Table highlightOnHover>
@@ -201,9 +197,15 @@ export default function DownloadComponent() {
            <tbody>{rows}</tbody>
          </Table>
        ) : (
-          easteregg
+          <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <Image
+              fit="cover"
+              height={300}
+              src="https://danjohnvelasco.github.io/images/empty.png"
+            />
+          </Center>
        )}
      </ScrollArea>
-    </Group>
+    </Stack>
  );
 }
--- a/src/modules/downloads/TotalDownloadsModule.tsx
+++ b/src/modules/downloads/TotalDownloadsModule.tsx
@@ -1,4 +1,4 @@
-import { Text, Title, Group, useMantineTheme, Box, Card, ColorSwatch } from '@mantine/core';
+import { Text, Title, Group, useMantineTheme, Box, Card, ColorSwatch, Stack } from '@mantine/core';
 import { IconDownload as Download } from '@tabler/icons';
 import { useEffect, useState } from 'react';
 import axios from 'axios';
@@ -43,6 +43,7 @@ export default function TotalDownloadsComponent() {
  const totalDownloadSpeed = torrents.reduce((acc, torrent) => acc + torrent.downloadSpeed, 0);
  const totalUploadSpeed = torrents.reduce((acc, torrent) => acc + torrent.uploadSpeed, 0);
  useEffect(() => {
+    if (downloadServices.length === 0) return;
    const interval = setSafeInterval(() => {
      // Send one request with each download service inside
      axios
@@ -78,12 +79,16 @@ export default function TotalDownloadsComponent() {

  if (downloadServices.length === 0) {
    return (
-      <Group direction="column">
+      <Group>
        <Title order={4}>No supported download clients found!</Title>
-        <Group noWrap>
-          <Text>Add a download service to view your current downloads...</Text>
-          <AddItemShelfButton />
-        </Group>
+        <div>
+          <AddItemShelfButton
+            style={{
+              float: 'inline-end',
+            }}
+          />
+          Add a download service to view your current downloads
+        </div>
      </Group>
    );
  }
@@ -101,9 +106,9 @@ export default function TotalDownloadsComponent() {
  })) as Datum[];

  return (
-    <Group noWrap direction="column" grow>
+    <Stack>
      <Title order={4}>Current download speed</Title>
-      <Group direction="column">
+      <Stack>
        <Group>
          <ColorSwatch size={12} color={theme.colors.green[5]} />
          <Text>Download: {humanFileSize(totalDownloadSpeed)}/s</Text>
@@ -112,7 +117,7 @@ export default function TotalDownloadsComponent() {
          <ColorSwatch size={12} color={theme.colors.blue[5]} />
          <Text>Upload: {humanFileSize(totalUploadSpeed)}/s</Text>
        </Group>
-      </Group>
+      </Stack>
      <Box
        style={{
          height: 200,
@@ -133,7 +138,7 @@ export default function TotalDownloadsComponent() {
              <Card p="sm" radius="md" withBorder>
                <Text size="md">{roundedSeconds} seconds ago</Text>
                <Card.Section p="sm">
-                  <Group direction="column">
+                  <Stack>
                    <Group>
                      <ColorSwatch size={10} color={theme.colors.green[5]} />
                      <Text size="md">Download: {humanFileSize(Download)}</Text>
@@ -142,7 +147,7 @@ export default function TotalDownloadsComponent() {
                      <ColorSwatch size={10} color={theme.colors.blue[5]} />
                      <Text size="md">Upload: {humanFileSize(Upload)}</Text>
                    </Group>
-                  </Group>
+                  </Stack>
                </Card.Section>
              </Card>
            );
@@ -181,6 +186,6 @@ export default function TotalDownloadsComponent() {
          ]}
        />
      </Box>
-    </Group>
+    </Stack>
  );
 }
--- a/src/modules/moduleWrapper.tsx
+++ b/src/modules/moduleWrapper.tsx
@@ -1,4 +1,6 @@
 import {
+  ActionIcon,
+  Box,
  Button,
  Card,
  Group,
@@ -8,6 +10,9 @@ import {
  TextInput,
  useMantineColorScheme,
 } from '@mantine/core';
+import { useHover } from '@mantine/hooks';
+import { IconAdjustments } from '@tabler/icons';
+import { motion } from 'framer-motion';
 import { useConfig } from '../tools/state';
 import { IModule } from './ModuleTypes';

@@ -142,6 +147,8 @@ export function ModuleWrapper(props: any) {
  const enabledModules = config.modules ?? {};
  // Remove 'Module' from enabled modules titles
  const isShown = enabledModules[module.title]?.enabled ?? false;
+  //TODO: fix the hover problem
+  const { hovered, ref } = useHover();

  if (!isShown) {
    return null;
@@ -150,6 +157,8 @@ export function ModuleWrapper(props: any) {
  return (
    <Card
      {...props}
+      key={module.title}
+      ref={ref}
      hidden={!isShown}
      withBorder
      radius="lg"
@@ -161,47 +170,56 @@ export function ModuleWrapper(props: any) {
          ${(config.settings.appOpacity || 100) / 100}`,
      }}
    >
-      <ModuleMenu
-        module={module}
-        styles={{
-          root: {
-            position: 'absolute',
-            top: 12,
-            right: 12,
-          },
-        }}
-      />
-      <module.component />
+      <Group position="apart">
+        <ModuleMenu module={module} hovered={hovered} />
+        <module.component />
+      </Group>
    </Card>
  );
 }

 export function ModuleMenu(props: any) {
-  const { module, styles } = props;
+  const { module, styles, hovered } = props;
  const items: JSX.Element[] = getItems(module);
  return (
    <>
      {module.options && (
        <Menu
-          size="lg"
+          withinPortal
+          width="lg"
          shadow="xl"
+          withArrow
          closeOnItemClick={false}
          radius="md"
          position="left"
          styles={{
-            root: {
-              ...props?.styles?.root,
-            },
-            body: {
+            dropdown: {
              // Add shadow and elevation to the body
              boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.05)',
            },
          }}
        >
-          <Menu.Label>Settings</Menu.Label>
-          {items.map((item) => (
-            <Menu.Item key={item.key}>{item}</Menu.Item>
-          ))}
+          <Menu.Target>
+            <Box
+              style={{
+                position: 'absolute',
+                top: 12,
+                right: 12,
+              }}
+            >
+              <motion.div initial={{ opacity: 0 }} animate={{ opacity: hovered ? 1 : 0 }}>
+                <ActionIcon>
+                  <IconAdjustments />
+                </ActionIcon>
+              </motion.div>
+            </Box>
+          </Menu.Target>
+          <Menu.Dropdown>
+            <Menu.Label>Settings</Menu.Label>
+            {items.map((item) => (
+              <Menu.Item key={item.key}>{item}</Menu.Item>
+            ))}
+          </Menu.Dropdown>
        </Menu>
      )}
    </>
--- a/src/modules/ping/PingModule.tsx
+++ b/src/modules/ping/PingModule.tsx
@@ -56,22 +56,23 @@ export default function PingComponent(props: any) {
    return null;
  }
  return (
-    <Tooltip
-      radius="lg"
+    <motion.div
      style={{ position: 'absolute', bottom: 20, right: 20 }}
-      label={
-        isOnline === 'loading'
-          ? 'Loading...'
-          : isOnline === 'online'
-          ? `Online - ${response}`
-          : `Offline - ${response}`
-      }
+      animate={{
+        scale: isOnline === 'online' ? [1, 0.8, 1] : 1,
+      }}
+      transition={{ repeat: Infinity, duration: 2.5, ease: 'easeInOut' }}
    >
-      <motion.div
-        animate={{
-          scale: isOnline === 'online' ? [1, 0.8, 1] : 1,
-        }}
-        transition={{ repeat: Infinity, duration: 2.5, ease: 'easeInOut' }}
+      <Tooltip
+        withinPortal
+        radius="lg"
+        label={
+          isOnline === 'loading'
+            ? 'Loading...'
+            : isOnline === 'online'
+            ? `Online - ${response}`
+            : `Offline - ${response}`
+        }
      >
        <Indicator
          size={13}
@@ -79,7 +80,7 @@ export default function PingComponent(props: any) {
        >
          {null}
        </Indicator>
-      </motion.div>
-    </Tooltip>
+      </Tooltip>
+    </motion.div>
  );
 }
--- a/src/modules/search/SearchModule.tsx
+++ b/src/modules/search/SearchModule.tsx
@@ -1,6 +1,7 @@
-import { Kbd, createStyles, Autocomplete, ScrollArea, Popover, Divider } from '@mantine/core';
-import { useDebouncedValue, useForm, useHotkeys } from '@mantine/hooks';
-import React, { useEffect, useRef, useState } from 'react';
+import { Kbd, createStyles, Autocomplete } from '@mantine/core';
+import { useDebouncedValue, useHotkeys } from '@mantine/hooks';
+import { useForm } from '@mantine/form';
+import { useEffect, useRef, useState } from 'react';
 import {
  IconSearch as Search,
  IconBrandYoutube as BrandYoutube,
--- a/src/modules/weather/WeatherModule.tsx
+++ b/src/modules/weather/WeatherModule.tsx
@@ -1,4 +1,4 @@
-import { Group, Space, Title, Tooltip, Skeleton } from '@mantine/core';
+import { Group, Space, Title, Tooltip, Skeleton, Stack, Box } from '@mantine/core';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 import {
@@ -124,8 +124,10 @@ export function WeatherIcon(props: any) {
    }
  }
  return (
-    <Tooltip label={data.name}>
-      <data.icon size={50} />
+    <Tooltip withinPortal withArrow label={data.name}>
+      <Box>
+        <data.icon size={50} />
+      </Box>
    </Tooltip>
  );
 }
@@ -160,7 +162,7 @@ export default function WeatherComponent(props: any) {
    return (
      <>
        <Skeleton height={40} width={100} mb="xl" />
-        <Group noWrap direction="row">
+        <Group noWrap>
          <Skeleton height={50} circle />
          <Group>
            <Skeleton height={25} width={70} mr="lg" />
@@ -174,7 +176,7 @@ export default function WeatherComponent(props: any) {
    return isFahrenheit ? `${(value * (9 / 5) + 32).toFixed(1)}°F` : `${value.toFixed(1)}°C`;
  }
  return (
-    <Group p="sm" spacing="xs" direction="column">
+    <Stack p="sm" spacing="xs">
      <Title>{usePerferedUnit(weather.current_weather.temperature)}</Title>
      <Group spacing={0}>
        <WeatherIcon code={weather.current_weather.weathercode} />
@@ -185,6 +187,6 @@ export default function WeatherComponent(props: any) {
        <span>{usePerferedUnit(weather.daily.temperature_2m_min[0])}</span>
        <ArrowDownRight size={16} />
      </Group>
-    </Group>
+    </Stack>
  );
 }