From ff0d07ddb1fac47ab574f63f5ab34ec906274bab Mon Sep 17 00:00:00 2001
From: Alice Dahan <lilice.dhn@gmail.com>
Date: Fri, 6 Dec 2024 16:53:20 +0100
Subject: [PATCH] style(rgcp): correction du style des options en version
 mobile

---
 .../reduction-generale/components/Mois.tsx    | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/site/source/pages/simulateurs/reduction-generale/components/Mois.tsx b/site/source/pages/simulateurs/reduction-generale/components/Mois.tsx
index d9c0df7e2..36535808c 100644
--- a/site/source/pages/simulateurs/reduction-generale/components/Mois.tsx
+++ b/site/source/pages/simulateurs/reduction-generale/components/Mois.tsx
@@ -9,7 +9,7 @@ import { useEngine } from '@/components/utils/EngineContext'
 import { Button } from '@/design-system/buttons'
 import { FlexCenter } from '@/design-system/global-style'
 import { RotatingChevronIcon } from '@/design-system/icons'
-import { Grid } from '@/design-system/layout'
+import { Grid, Spacing } from '@/design-system/layout'
 import { Body } from '@/design-system/typography/paragraphs'
 
 import {
@@ -157,14 +157,18 @@ export default function RéductionGénéraleMois({
 			</GridContainer>
 
 			{isOptionVisible && (
-				<MonthOptions
-					month={monthName}
-					index={index}
-					options={data.options}
-					onOptionsChange={onOptionsChange}
-				/>
+				<OptionsContainer>
+					<MonthOptions
+						month={monthName}
+						index={index}
+						options={data.options}
+						onOptionsChange={onOptionsChange}
+					/>
+				</OptionsContainer>
 			)}
 
+			<Spacing xs />
+
 			<GridContainer container spacing={2}>
 				<Grid item>
 					<RuleLink dottedName={réductionGénéraleDottedName} />
@@ -207,7 +211,7 @@ export default function RéductionGénéraleMois({
 			{isOptionVisible && (
 				<StyledTableRow>
 					<td />
-					<td colSpan={4}>
+					<td colSpan={3}>
 						<MonthOptions
 							month={monthName}
 							index={index}
@@ -233,6 +237,11 @@ const GridContainer = styled(Grid)`
 const StyledBody = styled(Body)`
 	margin-top: 0;
 `
+const OptionsContainer = styled.div`
+	margin-top: ${({ theme }) => theme.spacings.xs};
+	background-color: ${({ theme }) => theme.colors.bases.primary[200]};
+	padding: ${({ theme }) => theme.spacings.sm};
+`
 
 const StyledTableRow = styled.tr`
 	background-color: ${({ theme }) => theme.colors.bases.primary[200]};