From af7b2f87fccf2defb0a62b829228886121b0df3a Mon Sep 17 00:00:00 2001
From: Johan Girod <dev@johangirod.com>
Date: Wed, 6 Jan 2021 11:20:16 +0100
Subject: [PATCH] =?UTF-8?q?:art:=20Am=C3=A9liore=20la=20modale=20(r=C3=A9p?=
 =?UTF-8?q?are=20le=20bug=20sur=20iframe)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix #1217 et #1326
---
 modele-social/règles/salarié.yaml            |  3 +-
 mon-entreprise/source/components/Overlay.tsx | 20 +++++++++-----
 publicodes/ui-react/source/Overlay.tsx       | 29 ++++++++++++--------
 3 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/modele-social/règles/salarié.yaml b/modele-social/règles/salarié.yaml
index 4a25235a6..df52e5054 100644
--- a/modele-social/règles/salarié.yaml
+++ b/modele-social/règles/salarié.yaml
@@ -1610,7 +1610,8 @@ contrat salarié . plafond sécurité sociale . renonciation proratisation:
     D'un commun accord, l'employeur et l'employé peuvent renoncer à la réduction
     du plafond de la sécurité sociale (applicable pour les salariés à temps
     partiel), notamment afin d'augmenter le montant des cotisations vieillesse.
-  par défaut: non
+  formule: non
+  # TODO : ajouter une question non prioritaire
   applicable si: temps de travail . quotité de travail < 100%
   remplace:
     - règle: plafond sécurité sociale
diff --git a/mon-entreprise/source/components/Overlay.tsx b/mon-entreprise/source/components/Overlay.tsx
index d0d283ddd..e9a78b082 100644
--- a/mon-entreprise/source/components/Overlay.tsx
+++ b/mon-entreprise/source/components/Overlay.tsx
@@ -39,11 +39,12 @@ export default function Overlay({
 		}
 	}, [])
 	const offsetTop = useIFrameOffset()
+
 	if (offsetTop === null) {
 		return null
 	}
 	return (
-		<StyledOverlayWrapper offsetTop={offsetTop}>
+		<StyledOverlayWrapper offsetTop={Math.max(0, offsetTop)}>
 			<div className="overlayContent">
 				<animate.fromBottom>
 					<FocusTrap
@@ -97,14 +98,18 @@ const StyledOverlayWrapper = styled.div<{ offsetTop: number | null }>`
 		position: absolute;
 	}
 	.overlayCloseButton {
-		position: absolute;
-		bottom: 0rem;
+		position: fixed;
+		background-color: white;
+		border-top-left-radius: 100%;
 		text-decoration: none;
-		font-size: 3rem;
+		font-size: 2.5rem;
+		border-top: 0.5rem solid white;
+		border-left: 0.5rem solid white;
+		bottom: 0;
+		right: 0;
 		color: rgba(0, 0, 0, 0.6);
 		color: var(--lighterTextColor);
-		padding: 0 0.5rem;
-		right: 0;
+		padding: 0 1rem;
 	}
 	.ui__.card[aria-modal='true'] {
 		padding-bottom: 4rem;
@@ -116,11 +121,12 @@ const StyledOverlayWrapper = styled.div<{ offsetTop: number | null }>`
 		.overlayCloseButton {
 			top: 0;
 			bottom: auto;
+			padding: 0 0.5rem;
 			font-size: 2rem;
 		}
 		.overlayContent {
 			transform: translateX(-50%)
-				translateY(calc(${({ offsetTop }) => offsetTop}px + 10rem));
+				translateY(calc(${({ offsetTop }) => offsetTop}px + 5rem));
 			left: 50%;
 			width: 80%;
 			bottom: auto;
diff --git a/publicodes/ui-react/source/Overlay.tsx b/publicodes/ui-react/source/Overlay.tsx
index c1126741e..e95ab174c 100644
--- a/publicodes/ui-react/source/Overlay.tsx
+++ b/publicodes/ui-react/source/Overlay.tsx
@@ -20,7 +20,7 @@ const useIFrameOffset = () => {
 			setOffset(0)
 			return
 		}
-		window.parentIFrame.getPageInfo(({ scrollTop, offsetTop }) => {
+		window.parentIFrame.getPageInfo(({ scrollTop, offsetTop }: PageInfo) => {
 			setOffset(scrollTop - offsetTop)
 			window.parentIFrame.getPageInfo(false)
 		})
@@ -42,11 +42,12 @@ export default function Overlay({
 		}
 	}, [])
 	const offsetTop = useIFrameOffset()
+
 	if (offsetTop === null) {
 		return null
 	}
 	return (
-		<StyledOverlayWrapper offsetTop={offsetTop}>
+		<StyledOverlayWrapper offsetTop={Math.max(0, offsetTop)}>
 			<div className="overlayContent">
 				<FocusTrap
 					focusTrapOptions={{
@@ -98,14 +99,18 @@ const StyledOverlayWrapper = styled.div<{ offsetTop: number | null }>`
 		position: absolute;
 	}
 	.overlayCloseButton {
-		position: absolute;
-		bottom: 0rem;
+		position: fixed;
+		background-color: white;
+		border-top-left-radius: 100%;
 		text-decoration: none;
-		font-size: 3rem;
+		font-size: 2.5rem;
+		border-top: 0.5rem solid white;
+		border-left: 0.5rem solid white;
+		bottom: 0;
+		right: 0;
 		color: rgba(0, 0, 0, 0.6);
 		color: var(--lighterTextColor);
-		padding: 0 0.5rem;
-		right: 0;
+		padding: 0 1rem;
 	}
 	.ui__.card[aria-modal='true'] {
 		padding-bottom: 4rem;
@@ -117,11 +122,12 @@ const StyledOverlayWrapper = styled.div<{ offsetTop: number | null }>`
 		.overlayCloseButton {
 			top: 0;
 			bottom: auto;
+			padding: 0 0.5rem;
 			font-size: 2rem;
 		}
 		.overlayContent {
 			transform: translateX(-50%)
-				translateY(calc(${({ offsetTop }) => offsetTop}px + 10rem));
+				translateY(calc(${({ offsetTop }) => offsetTop}px + 5rem));
 			left: 50%;
 			width: 80%;
 			bottom: auto;
@@ -129,8 +135,9 @@ const StyledOverlayWrapper = styled.div<{ offsetTop: number | null }>`
 			max-width: 40em;
 			min-height: 6em;
 		}
-	.ui__.card[aria-modal='true'] {
-		padding-bottom: 2rem;
-		margin-bottom: 2rem;
+		.ui__.card[aria-modal='true'] {
+			padding-bottom: 2rem;
+			margin-bottom: 2rem;
+		}
 	}
 `