AO3-6869 Fix extra space in abuse form

[KooShnoo]

Pull Request Checklist

• Have you read "How to write the perfect pull request"?
• Have you read the contributing guidelines?
• Have you added tests for any changed functionality?
• Have you added the Jira issue number
  as the first thing in your pull request title (e.g. AO3-1234 Fix thing)
• Do you have fewer than 5 pull requests already open? If not, please wait
  until they are reviewed and merged before creating new pull requests.

Issue

https://otwarchive.atlassian.net/browse/AO3-6869

Purpose

Fix a layout issue in the abuse report form.

Certain browsers, seemingly a certain version of WebKit browsers, would insert extra space between some of the form inputs and their description footnotes.

I was able to reproduce on desktop Safari Version 17.6 (19618.3.11.11.5) but not on iOS.

As mentioned in the ticket,

It's related to the invisible span that's there to hold the error message. For some reason, that's started taking up space now.

Adding an empty div seems to mitigate this.

Before:
After:

Testing Instructions

Go to https://archiveofourown.org/abuse_reports/new or use the link in the footer.
Verify that there is no wide gap between the footnote "Please ensure this link..." and its associated text box. (link field)
Verify that there is no wide gap between the footnote "Please specify why you are contacting..." and its associated text box. (summary field)

Credit

KooShnoo he/him

[marcus8448]

Hi KooShnoo!

Thank you so much for this pull request. Someone will be along to review it soon.

I've updated the Jira issue status to In Review so no one will mistakenly create a duplicate pull request. If you'd like the ability to comment on, assign, and transition issues in the future, you're welcome to create a Jira account! It makes things a bit easier for us on the organizational side if the Full Name on your Jira account either closely matches the name you'd like us to credit in the release notes or includes it in parentheses, e.g. "Nickname (CREDIT NAME)."

Once you've done that (or if you've already done it -- Jira has been unreliable about showing us new accounts in the admin panel lately), you can either reply here or send an email to [email protected] with both your account name and email address and we'll set up the permissions for you.

Thanks again for contributing! If you have any questions, you can contact us at the same email address listed above.

[KooShnoo]

Oh cool, I set my name in Atlassian to KooShnoo. My email is [email protected]. Thanks!

[sarken]

Hi, KooShnoo! Your Jira account permissions should be all set next time you log in.

Thanks for taking a look at this issue. The fix does work, but I'm not sure it's the right one for the job. It would mean adding extraneous HTML elements to every page where this issue is present (and then hopefully removing them one day when WebKit fixes the issue).

It would be much better if we could confine the fix to one file by using CSS instead.

Would something like this work?

form#new_abuse_report .footnote {
  float: none;
}

If it did, I think sandbox.css would be an okay home for it, and whenever we found another form with the issue (e.g., the account creation page), we could just add another selector to the sandbox stylesheet.

[KooShnoo]

Ah, I see. Yes, that fix works, thanks! I hope it's okay I added some extra code to mimic the functionality of the problematic float property:

  margin-right: 0;
  width: fit-content;

I can revert it if it's no good.

Without extra code:

With extra code:

[sarken]

That extra CSS looks like a good adjustment to me -- thank you!