fix: ensure the give shortcode should display proper title with scroll bar

[kakshak]

Bug Report

User Story

As an admin, I want to show proper title without cutting it if there is a scroll area so that admin will know that for which short-code they are adding the parameters.

Current Behavior

Currently, I am not able to see the proper title while adding a Give shortcode in pages.

Expected Behavior

I expect to see the proper title while adding a Give short-code into pages.

Bug Type

• This bug describes functionality that once worked as expected in version X.X.X.
• This bug describes functionality that never worked as expected.
• I am not sure whether this functionality ever worked as expected.

Steps to Reproduce

1. Add/edit any pages.
2. Add Give shortcode that has drop-downs fields in it.
3. You see if there is a scrollbar then the title is not proper as scroll area is at the bottom side.

Visuals

https://www.useloom.com/share/a33d5b355700481a90097c58cd93a5b5

Possible Solution

If there is a scroll then the scroll area should remain at the top.

Acceptance Criteria

• Make sure that if there is scroll bar then it displays the title properly.
• Make sure admin can read the title while adding a short-code into a page with multiple drop-downs.
• Make sure if there is no scroll area then also admin should be able to read the title properly.

Environment

Operating System

• Platform: Microsoft Windows
• Version: 10

Browser

• Name: Chrome
• Version: 70.0.3538.102

WordPress System Info

### WordPress Environment ###

Home URL: http://give.test
Site URL: http://give.test
WP Version: 4.9.8
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: ✔
WP Cron: ✔
Language: en_US
Permalink Structure: /%postname%/
Show on Front: posts
Table Prefix Length: wp_
Table Prefix Length: 3
Table Prefix Status: Acceptable
Admin AJAX: Accessible
Registered Post Statuses: publish, future, draft, pending, private, trash, auto-draft, inherit, request-pending, request-confirmed, request-failed, request-completed, refunded, failed, revoked, cancelled, abandoned, processing, preapproval

Server Environment

Hosting Provider: DBH: localhost, SRV: give.test
TLS Connection: Connection uses TLS 1.2
TLS Connection: Probably Okay
Server Info: Apache/2.4.10 (Debian)
PHP Version: 7.0.3
PHP Post Max Size: 1,000 MB
PHP Time Limit: 900
PHP Max Input Vars: 3000
PHP Max Upload Size: 1,000 MB
cURL Version: ❌ 7.38.0, OpenSSL/1.0.1t - We recommend a minimum cURL version of 7.40.
SUHOSIN Installed: –
MySQL Version: 5.6.34
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
gzip: ✔
GD Graphics Library: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

Give Configuration

Give Version: 2.4.0
Give Cache: Enabled
Database Updates: All DB Updates Completed.
Give Cache: Enabled
Give Cache: ✔New Donation✔Donation Receipt✔New Offline Donation✔Offline Donation Instructions✔New User Registration✔User Registration Information✔Donor Note✔Email access
Upgraded From: 2.3.0
Test Mode: Enabled
Currency Code: EUR
Currency Position: Before
Decimal Separator: .
Thousands Separator: ,
Success Page: http://give.test/donation-confirmation/
Failure Page: http://give.test/donation-failed/
Donation History Page: http://give.test/donation-history/
Give Forms Slug: /donations/
Enabled Payment Gateways: Test Donation, Offline Donation, PayPal Standard, CCAvenue, Mollie Gateway
Default Payment Gateway: Test Donation
PayPal IPN Verification: Enabled
PayPal IPN Notifications: N/A
Donor Email Access: Enabled

Active Give Add-ons

Give - CCAvenue Gateway: ❌ Unlicensed – by GiveWP – 1.0.3
Give - Mollie Gateway: ❌ Unlicensed – by GiveWP – 1.1.2
Give - Tributes: ❌ Unlicensed – by WordImpress – 1.5.0

Other Active Plugins

Page Builder by SiteOrigin: by SiteOrigin – 2.9.1
SiteOrigin Widgets Bundle: by SiteOrigin – 1.13.2

Inactive Plugins

Contact Form 7: by Takayuki Miyoshi – 5.0.4
Easy Digital Downloads: by Easy Digital Downloads – 2.9.8
Give - Braintree Gateway: by WordImpress – 1.2.2
Give - Currency Switcher: by GiveWP – 1.3.0
Give - Donation Upsells for WooCommerce: by WordImpress – 1.0.4
Give - Form Countdown: by WordImpress – 1.0.1
Give - Gift Aid: by WordImpress – 1.1.6
Give - Manual Donations: by WordImpress – 1.4.2
Give - Recurring Donations: by GiveWP – 1.8.2
Give - Stripe Gateway: by GiveWP – 2.1.2
Invisible reCaptcha: by Mihai Chelaru – 1.2.1
Timetable Responsive Schedule For WordPress: by QuanticaLabs – 3.1
WooCommerce: by Automattic – 3.4.5
WooCommerce Quick Checkout: by WordImpress – 2.0.0
WordPress Reset: by Aristeides Stathopoulos, Matt Martz – 1.4.1

Active MU Plugins

Local by Flywheel Relative URL (for Live Links): by Flywheel – 1.0

Theme

Name: Twenty Seventeen
Version: 1.7
Author URL: https://wordpress.org/
Child Theme: No – If you're modifying Give on a parent theme you didn't build personally, then we recommend using a child theme. See: How to Create a Child Theme

[kevinwhoffman]

I've noticed this only happens when there is not enough vertical height for the controls to fit on screen. If you select a shortcode with fewer options, it does not occur. I investigated this for some time in a past release and was not able to prevent it.

As an improvement I think we can at least allow the modal to use the entire screen height so the controls will be more likely to fit on screen without scrolling. Assigning this one to me.