Updated names for uniformity

src/components/WeatherModal/ExtendedForecastCard.tsx

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