added icon size and gap changes when tile is small

src/widgets/weather/WeatherIcon.tsx

@@ -11,9 +11,11 @@ import {
   Icon,
 } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
+import { useElementSize } from '@mantine/hooks';
 
 interface WeatherIconProps {
   code: number;
+  size?: number;
 }
 
 /**
@@ -21,16 +23,17 @@ interface WeatherIconProps {
  * @param code weather code from api
  * @returns weather tile component
  */
-export const WeatherIcon = ({ code }: WeatherIconProps) => {
+export const WeatherIcon = ({ code, size=50 }: WeatherIconProps) => {
   const { t } = useTranslation('modules/weather');
-
+  const { width, ref } = useElementSize();
+  
   const { icon: Icon, name } =
     weatherDefinitions.find((wd) => wd.codes.includes(code)) ?? unknownWeather;
 
   return (
     <Tooltip withinPortal withArrow label={t(`card.weatherDescriptions.${name}`)}>
       <Box>
-        <Icon style={{ float: 'left' }} size={50} />
+        <Icon style={{ float: 'left' }} size={size} />
       </Box>
     </Tooltip>
   );

src/widgets/weather/WeatherTile.tsx

@@ -85,14 +85,14 @@ function WeatherTile({ widget }: WeatherTileProps) {
   return (
     <Stack
       ref={ref}
-      spacing="xs"
+      spacing={width<120 ? "0.25rem" : "xs"}
       justify="space-around"
       align="center"
       style={{ height: '100%', width: '100%' }}
     >
-      <Flex align="center" gap={'xs'} justify={'center'} direction={width < 200 ? 'column' : 'row'}>
-        <WeatherIcon code={weather.current_weather.weathercode} />
-        <Title size={width < 200 ? 'h4' : 'h2'}>
+      <Flex align="center" gap={width<120 ? '0.25rem' : 'xs'} justify={'center'} direction={width < 200 ? 'column' : 'row'}>
+        <WeatherIcon size={width<300 ? 30 : 50} code={weather.current_weather.weathercode} />
+        <Title size={width < 300 ? 'h4' : 'h2'}>
           {getPerferedUnit(
             weather.current_weather.temperature,
             widget.properties.displayInFahrenheit