[Bug 40288] New: patron details in patron sidebar overflow the sidebar
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Bug ID: 40288 Summary: patron details in patron sidebar overflow the sidebar Change sponsored?: --- Product: Koha Version: 25.05 Hardware: All OS: All Status: NEW Severity: enhancement Priority: P5 - low Component: Staff interface Assignee: koha-bugs@lists.koha-community.org Reporter: michael.hafen@washk12.org QA Contact: testopia@bugs.koha-community.org CC: gmcharlt@gmail.com 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. -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Michael Hafen <michael.hafen@washk12.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Assignee|koha-bugs@lists.koha-commun |michael.hafen@washk12.org |ity.org | Status|NEW |Needs Signoff --- Comment #1 from Michael Hafen <michael.hafen@washk12.org> --- Created attachment 183680 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=183680&action=edit 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. -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 --- Comment #2 from Michael Hafen <michael.hafen@washk12.org> --- Created attachment 183681 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=183681&action=edit screenshot Png screenshot showing patron image and email address overflowing sidebar -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 --- Comment #3 from Owen Leonard <oleonard@myacpl.org> --- 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; } -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Michael Hafen <michael.hafen@washk12.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #183680|0 |1 is obsolete| | --- Comment #4 from Michael Hafen <michael.hafen@washk12.org> --- Created attachment 183770 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=183770&action=edit 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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Biblibre Sandboxes <sandboxes@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #183770|0 |1 is obsolete| | --- Comment #5 from Biblibre Sandboxes <sandboxes@biblibre.com> --- Created attachment 183799 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=183799&action=edit Bug 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. 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. Signed-off-by: George <george@nekls.org> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 George Williams (NEKLS) <george@nekls.org> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |george@nekls.org Status|Needs Signoff |Signed Off --- Comment #6 from George Williams (NEKLS) <george@nekls.org> --- Test plan works as written. As an additional observation, though, it appears that any value in any field that appears in .patroninfo will do the same thing if it doesn't have any spaces in it. If you put a 100 character long word in a patron's address2, for example, it will do the exact same thing that a 100 character long e-mail address will. If this fix could be applied to all fields that appear in .patroninfo, that would be a better fix. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 --- Comment #7 from Michael Hafen <michael.hafen@washk12.org> --- Created attachment 183874 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=183874&action=edit Apply overflow css to all of patronbriefinfo li's, and patroninfo-section li's too. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Lucas Gass (lukeg) <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |lucas@bywatersolutions.com Status|Signed Off |Patch doesn't apply --- Comment #8 from Lucas Gass (lukeg) <lucas@bywatersolutions.com> --- QA tool complains about your commit messages: Processing additional checks * Commit title does not start with 'Bug XXXXX: ' - eaedad358cb * Commit title does not contain 'follow-up' correctly spelt - eaedad358cb * Commit title does not start with 'Bug XXXXX: ' - b9e95d52ff1 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Lucas Gass (lukeg) <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Patch doesn't apply |Failed QA -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Michael Hafen <michael.hafen@washk12.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #183799|0 |1 is obsolete| | --- Comment #9 from Michael Hafen <michael.hafen@washk12.org> --- Created attachment 189135 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=189135&action=edit Bug 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. 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. Signed-off-by: George <george@nekls.org> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Michael Hafen <michael.hafen@washk12.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #183874|0 |1 is obsolete| | --- Comment #10 from Michael Hafen <michael.hafen@washk12.org> --- Created attachment 189136 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=189136&action=edit Bug 40288: Apply overflow css to all of patronbriefinfo li's Apply overflow css to all of patronbriefinfo li's and patroninfo-section li's too. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Michael Hafen <michael.hafen@washk12.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Failed QA |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Patch complexity|--- |Small patch Status|Needs Signoff |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 --- Comment #11 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 189195 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=189195&action=edit Bug 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. 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. Signed-off-by: George <george@nekls.org> Signed-off-by: Owen Leonard <oleonard@myacpl.org> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 --- Comment #12 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 189196 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=189196&action=edit Bug 40288: Apply overflow css to all of patronbriefinfo li's and patroninfo-section li's too. Signed-off-by: Owen Leonard <oleonard@myacpl.org> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |Laura.escamilla@bywatersolu | |tions.com Attachment #189135|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #189136|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Passed QA -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #189195|0 |1 is obsolete| | --- Comment #13 from Laura Escamilla <Laura.escamilla@bywatersolutions.com> --- Created attachment 189323 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=189323&action=edit Bug 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. 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. Signed-off-by: George <george@nekls.org> Signed-off-by: Owen Leonard <oleonard@myacpl.org> Signed-off-by: Laura_Escamilla <laura.escamilla@bywatersolutions.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #189196|0 |1 is obsolete| | --- Comment #14 from Laura Escamilla <Laura.escamilla@bywatersolutions.com> --- Created attachment 189324 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=189324&action=edit Bug 40288: Apply overflow css to all of patronbriefinfo li's and patroninfo-section li's too. Signed-off-by: Owen Leonard <oleonard@myacpl.org> Signed-off-by: Laura_Escamilla <laura.escamilla@bywatersolutions.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- QA Contact|testopia@bugs.koha-communit |Laura.escamilla@bywatersolu |y.org |tions.com -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Lucas Gass (lukeg) <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Version(s)| |25.11.00 released in| | Status|Passed QA |Pushed to main -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 --- Comment #15 from Lucas Gass (lukeg) <lucas@bywatersolutions.com> --- Nice work everyone! Pushed to main for 25.11 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Christopher Brannon <cbrannon@cdalibrary.org> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |cbrannon@cdalibrary.org --- Comment #16 from Christopher Brannon <cbrannon@cdalibrary.org> --- *** Bug 41935 has been marked as a duplicate of this bug. *** -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Wainui Witika-Park <wainuiwitikapark@catalyst.net.nz> changed: What |Removed |Added ---------------------------------------------------------------------------- Version(s)|25.11.00 |25.11.00,25.05.12 released in| | CC| |wainuiwitikapark@catalyst.n | |et.nz Status|Pushed to main |Pushed to stable --- Comment #17 from Wainui Witika-Park <wainuiwitikapark@catalyst.net.nz> --- Applied to 25.05.x for 25.05.12 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Wainui Witika-Park <wainuiwitikapark@catalyst.net.nz> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Pushed to stable |Pushed to oldstable -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Wainui Witika-Park <wainuiwitikapark@catalyst.net.nz> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Pushed to oldstable |Pushed to oldoldstable -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Fridolin Somers <fridolin.somers@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Pushed to oldoldstable |Needs documenting CC| |fridolin.somers@biblibre.co | |m --- Comment #18 from Fridolin Somers <fridolin.somers@biblibre.com> --- Enhancement not pushed to 24.11.x LTS (for UI stability) -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Michael Hafen <michael.hafen@washk12.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs documenting |Pushed to oldoldstable Documentation| |Adjust the CSS for the submission| |patron details in the Paton | |sidebar so it doesn't | |overflow. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=40288 Wainui Witika-Park <wainuiwitikapark@catalyst.net.nz> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Pushed to oldoldstable |Needs documenting -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org