Style fixes

src/components/WeatherModal/WeatherModal.tsx

@@ -1,4 +1,4 @@
-import { Center, Divider, Group, Modal, Stack } from '@mantine/core';
+import { Box, Center, Divider, Group, Modal, Stack } from '@mantine/core';
 import { useAtom } from 'jotai';
 import { modalClasses } from 'styles';
 import SmallOutlookCard from './SmallOutlookCard';
@@ -17,6 +17,7 @@ export function WeatherModal({
 	setValue,
 	setProviderLabel,
 	setProviderURL,
+	isMobile,
 }: any) {
 	const [theme, _] = useAtom(appTheme);
 	const [hourlyForecast, setHourlyForecast] = useState<any>([]);
@@ -42,6 +43,7 @@ export function WeatherModal({
 	}, [hourlyForecast]);
 	return (
 		<Modal.Root
+			fullScreen={isMobile}
 			size={'60%'}
 			className={modalClasses.helpModal}
 			classNames={modalClasses}
@@ -71,19 +73,23 @@ export function WeatherModal({
 				</Modal.Header>
 				<Modal.Body pb={'2rem'}>
 					<Center w={'100%'}>
-						<Stack>
+						<Stack w={'100%'}>
 							<Group gap={0} w={'100%'} align='center' justify='center'>
 								<Stack gap={0} align='center'>
-									<h3 style={{ padding: 0, margin: 0 }}>Currently</h3>
+									<h3 style={{ padding: 0, margin: 0, color: 'white' }}>Currently</h3>
 									<Stack>
 										<SmallWeatherCard weather={current} />
 									</Stack>
 								</Stack>
-								<Divider orientation='vertical' mx={16} color={theme.accentColor} />
+								<Divider
+									orientation={isMobile ? 'horizontal' : 'vertical'}
+									mx={16}
+									color={theme.accentColor}
+								/>
 								<Group gap={8}>
 									{outlook.map((o: any) => (
 										<Stack key={o.name} gap={0} align='center'>
-											<h3 style={{ padding: 0, margin: 0 }}>{o.name}</h3>
+											<h3 style={{ padding: 0, margin: 0, color: 'white' }}>{o.name}</h3>
 											<Stack>
 												<SmallOutlookCard weather={o} />
 											</Stack>
@@ -102,10 +108,20 @@ export function WeatherModal({
 									borderRadius: '.5rem',
 								}}
 							>
-								{hourlyForecast.length > 0 &&
-									hourlyForecast.map((h: any) => {
-										return <HourlyCard key={h.time} weather={h} />;
-									})}
+								<Box
+									style={{
+										display: 'flex',
+										overflow: 'auto',
+										whiteSpace: 'nowrap',
+										justifyContent: 'space-between',
+										width: '100%',
+									}}
+								>
+									{hourlyForecast.length > 0 &&
+										hourlyForecast.map((h: any) => {
+											return <HourlyCard key={h.time} weather={h} isMobile={isMobile} />;
+										})}
+								</Box>
 							</Group>
 						</Stack>
 					</Center>