Long Patron Names Hide Top Portion of Patron Account Screens

[John Amundson]

Seen in Evergreen 3.0.13 and 3.2.2.
Occurs in both Firefox and Chrome.
Screen resolution 1920x1080

When a patron's name is long, it has the potential of hiding the top portion of patron account screens. The amount hidden depends on the length of the name and screen resolution. With shorter "long" names, only the top portion of the summary will be hidden, (i.e. any alert messages). However, if it is long enough, the name creates white space that covers the rest of the screen.

On the Checkout tab this equates to the barcode box not being visible, (see attached screenshot). A report of a "missing" checkout box was how we determined this issue.

The white space also exists on other pages. On the Edit screen, for example, it hides the barcode box and part of the username box.

The amount of white space differs depending on the length of name and resolution of the screen. The hiding information can be seen by decreasing the zoom level on page, (ctrl and minus sign), until it becomes visible. In my testing, the alert message was only visible at 50% zoom and lower, (see attached screenshot).

[Dan Scott (denials)]

Still seeing this as of:

* Evergreen 3.4
* Firefox 71.0 and Chrome 79.0.3945.88

Our system includes some ridiculously long patron names, representing libraries to which we make ILL loans. I'm talking 175 characters for the first_given_name field.

The problem in the web staff client is that, while the name wraps nicely in the first column (based on the .col-md-3 class that sets a width of 25%), the effect is that the rest of the wrapped row obscures anything in the right-hand 75% of the screen.

Setting a z-index of 2 on #patron-fixed-tabs mitigates the problem by making the input fields visible and able to be interacted with, although then the text of the wrapped name interferes to a certain extent with the rest of the information presented in the left-hand column (such as Profile, Home Library, etc).

Making the #patron-fixed-tabs non-fixed, and reducing the .top-content-container padding-top back to 70px (inline CSS increases it from the circ.css value to 120px) seems to resolve the problem in standard desktop resolutions, and arguably improves the display in tablet and phone resolutions. I'll try and put together a patch accordingly.

[Dan Scott (denials)]

I found that reducing the padding-top of .top-content-container didn't work well for all browser widths, so I posted a branch that removes the fixed position for #patron-fixed-tabs

There is a trade-off, in that you get increased whitespace between the top menu and the patron name / menu items on browser windows that are wide enough to display the entire top menu on a single line, but the advantage is that it displays long names and even short patron names and the associated input fields & menu items on browsers of any width (whereas even short patron names & the menu items can be obscured on browsers that are not wide enough to display the entire top menu on a single line).

So, really, this isn't just about long patron names; it's about better responsiveness of the patron screens in general.

Working branch at user/dbs/lp1805860_handle_long_patron_names / https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/dbs/lp1805860_handle_long_patron_names

[Dawn Dale (ddale)]

This still appears not to be fixed. The long patron name still covers the patron barcode and user name. See attached screen shot.

[Terran McCanna (tmccanna)]

Dawn had tested while there was a problem with the server - after the server was refreshed, the New Developers Group tested and it looks great. Sign off is here:

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mccanna/lp1805860_handle_long_patron_names_signoff

[Galen Charlton (gmc)]

Pushed all the way to rel_3_3. Thanks, Dan and Terran!