From d78a71d6f88307b708b4ab1b20e82bdc58bca0a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Rialland?= <wiinxt@gmail.com>
Date: Mon, 24 Apr 2023 16:46:05 +0200
Subject: [PATCH] Fix progress bar css

---
 site/source/components/ui/Progress.tsx        |  7 ++--
 .../cotisations.tsx                           | 33 +++++++++----------
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/site/source/components/ui/Progress.tsx b/site/source/components/ui/Progress.tsx
index da7478f7b..2af5f17ee 100644
--- a/site/source/components/ui/Progress.tsx
+++ b/site/source/components/ui/Progress.tsx
@@ -53,8 +53,11 @@ const ProgressBar = styled.div`
 	height: ${({ theme }) => theme.spacings.xxs};
 `
 const StyledBody = styled(Body)`
+	position: absolute;
+	top: 0;
+	right: 0;
 	font-size: 0.825rem;
-	padding: 0 1.5rem;
-	margin-bottom: 0;
+	padding: 0.25rem 1.5rem;
+	margin: 0;
 	color: ${({ theme }) => theme.colors.extended.grey[600]}!important;
 `
diff --git a/site/source/pages/assistants/declaration-revenu-independants/cotisations.tsx b/site/source/pages/assistants/declaration-revenu-independants/cotisations.tsx
index a676e7728..028ba45be 100644
--- a/site/source/pages/assistants/declaration-revenu-independants/cotisations.tsx
+++ b/site/source/pages/assistants/declaration-revenu-independants/cotisations.tsx
@@ -79,6 +79,19 @@ export default function Cotisations() {
 										</Body>
 									</div>
 									<Message border={false}>
+										<div
+											css={`
+												position: relative;
+												top: -1px;
+												margin: 0 -1.5rem;
+											`}
+										>
+											<Progress
+												progress={numberCurrentStep}
+												maxValue={numberSteps}
+											/>
+										</div>
+
 										<div
 											css={`
 												margin: -0.75rem 0;
@@ -86,25 +99,11 @@ export default function Cotisations() {
 										>
 											<Conversation
 												customSituationVisualisation={
-													<>
-														<Grid container>
-															<DéclarationRevenu />
-														</Grid>
-													</>
+													<Grid container>
+														<DéclarationRevenu />
+													</Grid>
 												}
 											/>
-											<div
-												css={`
-													position: relative;
-													top: -2px;
-													margin: 0 -1.5rem;
-												`}
-											>
-												<Progress
-													progress={numberCurrentStep}
-													maxValue={numberSteps}
-												/>
-											</div>
 										</div>
 									</Message>
 								</FromTop>