Bug 40288 - patron details in patron sidebar overflow the sidebar
Summary: patron details in patron sidebar overflow the sidebar
Status: Needs Signoff
Alias: None
Product: Koha
Classification: Unclassified
Component: Staff interface (show other bugs)
Version: 25.05
Hardware: All All
: P5 - low enhancement
Assignee: Michael Hafen
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2025-07-02 00:17 UTC by Michael Hafen
Modified: 2025-07-03 16:22 UTC (History)
1 user (show)

See Also:
GIT URL:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:


Attachments
ug 40288 - constrain patron brief info in patron sidebar to parent width (2.28 KB, patch)
2025-07-02 00:22 UTC, Michael Hafen
Details | Diff | Splinter Review
screenshot (252.71 KB, image/png)
2025-07-02 00:25 UTC, Michael Hafen
Details
Bug 40288 - constrain patron brief info in patron sidebar to parent width (2.35 KB, patch)
2025-07-03 16:22 UTC, Michael Hafen
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Michael Hafen 2025-07-02 00:17:20 UTC
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.
Comment 1 Michael Hafen 2025-07-02 00:22:56 UTC
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.
Comment 2 Michael Hafen 2025-07-02 00:25:21 UTC
Created attachment 183681 [details]
screenshot

Png screenshot showing patron image and email address overflowing sidebar
Comment 3 Owen Leonard 2025-07-03 11:35:25 UTC
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;
}
Comment 4 Michael Hafen 2025-07-03 16:22:17 UTC
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.