From 95626d821d78f95c435e3d80a973e4883946e60f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Rialland?= <wiinxt@gmail.com>
Date: Mon, 25 Jul 2022 20:00:12 +0200
Subject: [PATCH] Fix css fix #2220

---
 site/source/components/PaySlip.tsx            |  6 ++--
 .../components/conversation/Explicable.tsx    | 33 +++++++++----------
 .../design-system/buttons/ButtonHelp.tsx      |  4 ++-
 site/source/design-system/layout/Grid.tsx     |  4 ++-
 4 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/site/source/components/PaySlip.tsx b/site/source/components/PaySlip.tsx
index 033c4f301..c439be951 100644
--- a/site/source/components/PaySlip.tsx
+++ b/site/source/components/PaySlip.tsx
@@ -143,10 +143,8 @@ export default function PaySlip() {
 					return (
 						<Fragment key={section.dottedName}>
 							<H5 className="payslip__cotisationTitle">
-								{section.title}{' '}
-								<em className="print-hidden">
-									<ExplicableRule light dottedName={section.dottedName} />
-								</em>
+								{section.title}
+								<ExplicableRule light dottedName={section.dottedName} />
 							</H5>
 							{cotisations.map((cotisation) => (
 								<Cotisation key={cotisation} dottedName={cotisation} />
diff --git a/site/source/components/conversation/Explicable.tsx b/site/source/components/conversation/Explicable.tsx
index 06035e0ae..bbe723447 100644
--- a/site/source/components/conversation/Explicable.tsx
+++ b/site/source/components/conversation/Explicable.tsx
@@ -30,22 +30,21 @@ export function ExplicableRule<Names extends string = DottedName>({
 	// TODO montrer les variables de type 'une possibilité'
 
 	return (
-		<span className="print-hidden">
-			<ButtonHelp
-				key={rule.dottedName}
-				type="info"
-				title={rule.title}
-				light={light}
-				bigPopover={bigPopover}
-			>
-				<Markdown>{rule.rawNode.description}</Markdown>
-				{rule.rawNode.références && (
-					<>
-						<H3>Liens utiles</H3>
-						<References references={rule.rawNode.références} />
-					</>
-				)}
-			</ButtonHelp>
-		</span>
+		<ButtonHelp
+			key={rule.dottedName}
+			type="info"
+			title={rule.title}
+			light={light}
+			bigPopover={bigPopover}
+			className="print-hidden"
+		>
+			<Markdown>{rule.rawNode.description}</Markdown>
+			{rule.rawNode.références && (
+				<>
+					<H3>Liens utiles</H3>
+					<References references={rule.rawNode.références} />
+				</>
+			)}
+		</ButtonHelp>
 	)
 }
diff --git a/site/source/design-system/buttons/ButtonHelp.tsx b/site/source/design-system/buttons/ButtonHelp.tsx
index e703b6cbf..cfb4a10d3 100644
--- a/site/source/design-system/buttons/ButtonHelp.tsx
+++ b/site/source/design-system/buttons/ButtonHelp.tsx
@@ -10,6 +10,7 @@ type ButtonHelpProps = {
 	children: React.ReactNode
 	light?: boolean
 	bigPopover?: boolean
+	className?: string
 }
 
 export default function ButtonHelp({
@@ -18,11 +19,12 @@ export default function ButtonHelp({
 	type,
 	light,
 	bigPopover,
+	className,
 }: ButtonHelpProps) {
 	return (
 		<PopoverWithTrigger
 			trigger={(buttonProps) => (
-				<StyledButton $light={light} {...buttonProps}>
+				<StyledButton $light={light} className={className} {...buttonProps}>
 					<CircleIcon
 						aria-hidden="true"
 						width="24"
diff --git a/site/source/design-system/layout/Grid.tsx b/site/source/design-system/layout/Grid.tsx
index 179b86d76..bc488318c 100644
--- a/site/source/design-system/layout/Grid.tsx
+++ b/site/source/design-system/layout/Grid.tsx
@@ -66,7 +66,9 @@ const StyledGridContainer = styled.div<GridContainerProps>`
 	flex-direction: row;
 	margin-left: -${({ theme, columnSpacing }) => theme.spacing[columnSpacing ?? 0]};
 	margin-top: -${({ theme, rowSpacing }) => theme.spacing[rowSpacing ?? 0]};
-	width: calc(100% + 0.75rem);
+	width: calc(
+		100% + ${({ theme, rowSpacing }) => theme.spacing[rowSpacing ?? 0]}
+	);
 `
 
 const StyledGridItem = styled.div<GridItemProps & ContainerContext>`