Просмотр исходного кода

bug(modals): Fix Modal padding so Backdrop is clickable on the top edge (#41882)

Update `<Modal>` dialogs so that user can click above the modal to
dismiss it; this is in addition to clicking the Backdrop on the
left/right/bottom sides.

| | Note | Img |
| --- | --- | --- |
| Before | The padding extended 80px to the top of the modal, which
positioned things but also captured clicks. Clicking on any of the green
areas would not close the modal | <img width="797" alt="before"
src="https://user-images.githubusercontent.com/187460/204704879-c87f401d-efff-4c77-9944-eb329b02d8d5.png">
|
| After | The padding extends the same amount on top/bottom, margin is
used to maintain position. Clicking outside of the green area will
dismiss the modal (clicks in the orange will dismiss the modal). | <img
width="794" alt="after"
src="https://user-images.githubusercontent.com/187460/204704881-61992ee8-99d4-48c2-a766-832b67dd6162.png">
|

NB: I went with `margin-top` because `top` itself wasn't working. The
parent node, `<Container>`, is `position: fixed` but the `<Dialog>`
itself isn't positioned. I thought that kind of change is more invasive
and could create collateral issues.

Looks like the `padding: 80px` went in during
https://github.com/getsentry/sentry/pull/25768, I can't tell if it was
done for any reason other than alignment.
Ryan Albrecht 2 лет назад
Родитель
Сommit
4a31b7b905

+ 4 - 2
static/app/components/globalModal/index.tsx

@@ -234,10 +234,12 @@ const Modal = styled(motion.div)`
   max-width: 100%;
   width: 640px;
   pointer-events: auto;
-  padding: 80px ${space(1.5)} ${space(2)} ${space(1.5)};
+  margin-top: 64px;
+  padding: ${space(2)} ${space(1.5)};
 
   @media (min-width: ${p => p.theme.breakpoints.medium}) {
-    padding: 80px ${space(2)} ${space(4)} ${space(2)};
+    margin-top: 50px;
+    padding: ${space(4)} ${space(2)};
   }
 `;
 

+ 0 - 1
static/app/views/performance/transactionSummary/transactionThresholdModal.tsx

@@ -294,7 +294,6 @@ const Instruction = styled('div')`
 export const modalCss = css`
   width: 100%;
   max-width: 650px;
-  margin: 70px auto;
 `;
 
 export default withApi(withProjects(TransactionThresholdModal));