Bug 40727

Summary: Minor styling bug in print/email receipt pop-up menu
Product: Koha Reporter: Caroline Cyr La Rose <caroline.cyr-la-rose>
Component: TemplatesAssignee: Laura Escamilla <Laura.escamilla>
Status: Signed Off --- QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: Laura.escamilla
Version: Main   
Hardware: All   
OS: All   
GIT URL: Change sponsored?: ---
Patch complexity: --- Documentation contact:
Documentation submission: Text to go in the release notes:
Version(s) released in:
Circulation function:
Bug Depends on: 33473, 39448    
Bug Blocks:    
Attachments: Bug 40727: Fix minor styling bug
Bug 40727: Fix minor styling bug

Description Caroline Cyr La Rose 2025-08-28 19:50:33 UTC
I was documenting Bug 33473 and noticed a very tiny bug in the styling of the pop-up menu options to print or send a receipt by email.

To recreate:
1. Go to a patron's account
2. Make sure they have an email address in their account
3. Go to their Accounting tab
4. Create a manual invoice
5. Pay the fee
6. Go to the Transactions tab and click the Receipt button
   --> There should be two options: Print and Email
   --> Note that the options are slightly misaligned (the Print is slightly more to the left)
7. Hover the mouse cursor over one option and then the next
   --> The background for the Email option goes over the edge of the pop-up menu on the right
Comment 1 Caroline Cyr La Rose 2025-08-28 20:14:40 UTC
Possibly caused by bug 39448
Comment 2 Laura Escamilla 2025-09-04 15:57:20 UTC
Created attachment 186170 [details] [review]
Bug 40727: Fix minor styling bug

To test:
1. Go to a patron's account
2. Make sure they have an email address in their account
3. Go to their Accounting tab
4. Create a manual invoice
5. Pay the fee
6. Go to the Transactions tab and click the Receipt button
   --> There should be two options: Print and Email
   --> Note that the options are slightly misaligned (the Print is slightly more to the left)
7. Hover the mouse cursor over one option and then the next
   --> The background for the Email option goes over the edge of the pop-up menu on the right
8. Apply the patch. Do a yarn build and then restart_all. Next clear the cache in your local browser and refresh the page.
9. Repeat steps 6 & 7. Email is now properly aligned and when you hover over it the button no longer overflows.
10. Sign off -- have a great day :D
Comment 3 Owen Leonard 2025-09-04 17:39:52 UTC
I think a simpler solution would be to remove these lines from staff-global.scss, starting at line 2220:

td {
    &.actions {
        white-space: nowrap;

        a,
        button {
            display: inline-block;
-            margin-left: .3rem;
-
-
-            &:first-child {
-                margin-left: 0;
-            }
        }
    }

It doesn't appear to be necessary for us to add the left margin manually.
Comment 4 Laura Escamilla 2025-09-04 18:46:49 UTC
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39448 added minor spacing to the action buttons. Without this spacing, the layout can look a bit tight—though that might come down to personal preference. My patch just ensures that "Email" isn’t affected by the spacing applied to the action buttons. I'm open to whatever might work best though
Comment 5 Caroline Cyr La Rose 2025-09-08 16:14:28 UTC
Created attachment 186263 [details] [review]
Bug 40727: Fix minor styling bug

To test:
1. Go to a patron's account
2. Make sure they have an email address in their account
3. Go to their Accounting tab
4. Create a manual invoice
5. Pay the fee
6. Go to the Transactions tab and click the Receipt button
   --> There should be two options: Print and Email
   --> Note that the options are slightly misaligned (the Print is slightly more to the left)
7. Hover the mouse cursor over one option and then the next
   --> The background for the Email option goes over the edge of the pop-up menu on the right
8. Apply the patch. Do a yarn build and then restart_all. Next clear the cache in your local browser and refresh the page.
9. Repeat steps 6 & 7. Email is now properly aligned and when you hover over it the button no longer overflows.
10. Sign off -- have a great day :D

Signed-off-by: Caroline Cyr La Rose <caroline.cyr-la-rose@inlibro.com>
Comment 6 Caroline Cyr La Rose 2025-09-08 16:15:32 UTC
The fix works. I don't have an opinions as to how the change was made, but it does fix the problem that I noticed.

Thank you Laura!