I have an account with an excessively long mail address on a dev instance of Koha. On the patron / circ-menu sidebar I can see the patronbriefinfo ul overflowing the sidebar, and taking the patron image with it as it's width matches the ul. I suspect this is because of the flex-wrap setting on the patroninfo-container div ancestor, or at least when I temporarily disabled that the ul stopped overflowing. The email li is supposed to hide the overflow, but the ul width expanding with it's contents means it doesn't have the chance to do that. To constrain the ul I added "width:inherit" to it's parent div. I also had to add a "max-width" so that the ul wouldn't take up the whole width; thus allowing it to render beside the patron image when possible, instead of always ending up under it. I'm not sure if this is the best solution, but it's one that I found to work. I tried setting the width and max-width on the ul, but that still didn't constrain it to it's parent's width. I'm using Firefox with the browser window at around 1435px width, with an email address of 53 characters. I also observed this ul overflowing in Chrome. I'll attach a patch which adds a "patronbriefinfo-container" class to the div, and adds that class to the staff-global.scss file. This is the first time I've edited a scss file, so I may have made some mistake there.
Created attachment 183680 [details] [review] ug 40288 - constrain patron brief info in patron sidebar to parent width The patron info in the patron / circ-menu sidebar is not constrained to it's parent's width. I found this with a very long email address, where the ul grew to match the email address length, and the patron image container also grew. Both overflowed the sidebar. Test plan: 1. find or make a patron with a very long email address (more tha 50 characters). 2. open the patron details page for that patron. Observe the patron image and patron details overflows the patron sidebar (the email address will be hidden under the contact information panel. 3. Apply patch and rebuild css files 4. open the patron details page for that patron again. Observe the patron image and details does not overflow the patron sidebar.
Created attachment 183681 [details] screenshot Png screenshot showing patron image and email address overflowing sidebar
The flex-related properties on .patroninfo-container don't seem to be useful, and I think if you just remove them it gets you what you want: .patroninfo-container { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: left; margin-left: 1rem; }
Created attachment 183770 [details] [review] Bug 40288 - constrain patron brief info in patron sidebar to parent width [ Alternate patch based on comment #3 from Owen Leonard. This way looks better ] The patron info in the patron / circ-menu sidebar is not constrained to it's parent's width. I found this with a very long email address, where the ul grew to match the email address length, and the patron image container also grew. Both overflowed the sidebar. Test plan: 1. find or make a patron with a very long email address (more tha 50 characters). 2. open the patron details page for that patron. Observe the patron image and patron details overflows the patron sidebar (the email address will be hidden under the contact information panel. 3. Apply patch and rebuild css files. It may be necessary to clear the browser cache. 4. open the patron details page for that patron again. Observe the patron image and details does not overflow the patron sidebar.