Mobile improvements and packages updates

src/components/WeatherModal/CurrentWeather.tsx

@@ -30,7 +30,6 @@ export default function CurrentWeather({ current }: { current: CW }) {
 			);
 		}
 	}, [sunStateData]);
-
 	return (
 		<>
 			{current ? (
@@ -202,7 +201,7 @@ export default function CurrentWeather({ current }: { current: CW }) {
 										className={themeIconClasses.weatherIcon}
 										classNames={themeIconClasses}
 									>
-										<FaWind size={32} />
+										<FaWind size={28} />
 									</ThemeIcon>
 								</Grid.Col>
 								<Grid.Col

src/components/WeatherModal/ExtendedForecastCard.tsx

@@ -1,4 +1,5 @@
 import { Group, SimpleGrid, Stack, Text } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
 import { textClasses } from 'styles';
 import type { ExtendedForecast } from 'types';
 import WeatherIcon from './WeatherIcon';
@@ -6,6 +7,7 @@ import WeatherIcon from './WeatherIcon';
 export default function ExtendedForecastCard({
 	forecast,
 }: { forecast: ExtendedForecast[] }) {
+	const { isMobile } = useCommonHooks();
 	const day = forecast.slice(2, 14).filter((item: ExtendedForecast) => item.isDaytime);
 	const night = forecast.slice(2, 14).filter((item: ExtendedForecast) => !item.isDaytime);
 	return (
@@ -30,7 +32,7 @@ export default function ExtendedForecastCard({
 					Extended Forecast
 				</Text>
 			</Group>
-			<SimpleGrid w={'100%'} cols={6}>
+			<SimpleGrid w={'100%'} cols={isMobile ? 3 : 6}>
 				{day.map((item: ExtendedForecast, index: number) => {
 					const short = item.shortForecast.includes('And')
 						? item.shortForecast.substring(0, item.shortForecast.indexOf('And'))