Fix css

fix #2220

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} />

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>
 	)
 }

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"

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>`