Missing "Privacy policy" link from "Public Reports" popup

[softvision-oana-arbuzov]

URL: https://webcompat.com/issues/new

Browser / Version: Firefox Release 26.0 (18099), Chrome 83.0.4103.88, Safari 12 Operating System: iPod touch iOS 12.4.7 (1136 x 640 pixels (~326 ppi pixel density)

Steps to Reproduce:

1. Navigate to https://webcompat.com/issues/new
2. Tap "Learn more" from "All information included in this report will be publicly visible." section.

Expected Behavior: "Privacy policy" link is available.

Actual Behavior: "Privacy policy" link is not available.

Notes:

1. Screenshot attached.
2. The issue is not reproducible on browsers on Android devices.

Affected area:

<div class="popup-modal shadow text is--visible" data-popup-modal="privacy-modal">
	<img class="close popup-modal__close" src="/img/svg/icons/svg-cross-black.svg" title="Close popup" alt="Close popup">
		<div class="popup-text">
			<h2>Public Reports</h2>
    All reports are publicly accessible. 
			<strong>Please do not include any confidential or personal information</strong> in the content of your report.
    
			<br>
			<br>
    If you choose to upload a screenshot or other image, it will be publicly accessible. Please 
			<strong>do not include any confidential or personal information</strong> in the screenshot.
  
		</div>
</div>

Watchers: @softvision-oana-arbuzov @cipriansv

[miketaylr]

Interesting, thanks for the report. I guess a CSS interop issue, perhaps.

[karlcow]

To reproduce.

1. with firefox desktop
2. activate rdm, set the window to be 411 x 300
3. https://webcompat.com/issues/new
4. Click on learn more

the modal pop up displays but can't fit the viewport and is not scrollable.

And

.popup-modal {
	background-color: #fff;
	border-radius: 5px;
	height: var(--popup-height-mobile);
	left: 50%;
	max-height: var(--popup-max-height-mobile);
	max-width: 90%;
	opacity: 0;
	overflow: hidden;
	padding: 0;
	pointer-events: none;
	position: fixed;
	top: 50%;
	transform: translate(-50%,-50%);
	transition: all .3s ease-in-out;
	width: 650px;
	z-index: 1011;
}

.popup-modal.text {
	height: 400px;
	width: 590px;
}

which is indeed not very user friendly. This could be fixed with

/* webcompat.css | https://webcompat.com/dist/webcompat.css */

.popup-modal {
  /* overflow: hidden; */
  overflow: scroll;
}

.popup-modal.text {
  /* height: 400px; */
  /* width: 590px; */
  max-height: 400px;
}

@magsout Do you agree with these changes?

Another way of doing it would be to use flexbox to center horizontally and vertically.

[magsout]

@karlcow yes, I agree with these changes

maybe just:

.popup-modal {
  /* overflow: hidden; */
  overflow-y: auto; /* is enough */
}

[karlcow]

@magsout nope that doesn't work

[magsout]

@karlcow did you test with the max-height?

I mean

.popup-modal {
  /* overflow: hidden; */
  overflow-y: auto;
}

.popup-modal.text {
  /* height: 400px; */
  /* width: 590px; */
  max-height: 400px;
}

[karlcow]

yup this is working with max-height, my initial proposal.

[magsout]

yup this is working with max-height, my initial proposal.

Yes, my comment was about overflow.

overflow: scroll add a scrollbar every time, while overflow-y: auto added a scroll when is needed. I only completed your initial proposal:

.popup-modal {
  /* overflow: hidden; */
  overflow-y: auto;
}

.popup-modal.text {
  /* height: 400px; */
  /* width: 590px; */
  max-height: 400px;
}