Bug 41647

Summary: Make self-checkin use responsive CSS
Product: Koha Reporter: David Cook <dcook>
Component: Self checkoutAssignee: David Cook <dcook>
Status: Pushed to main --- QA Contact: Testopia <testopia>
Severity: minor    
Priority: P5 - low CC: baptiste.wojtkowski
Version: Main   
Hardware: All   
OS: All   
See Also: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41645
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41646
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41144
GIT URL: Initiative type: ---
Sponsorship status: --- Comma delimited list of Sponsors:
Crowdfunding goal: 0 Patch complexity: ---
Documentation contact: Documentation submission:
Text to go in the release notes:
This change fixes the self check-in (SCI) so that it works with responsive CSS, which makes it more mobile friendly. This is especially useful when providing SCI on a tablet.
Version(s) released in:
26.05.00
Circulation function:
Bug Depends on: 41646    
Bug Blocks:    
Attachments: Bug 41647: Fix self-checkin to use responsive CSS
Bug 41647: Fix self-checkin to use responsive CSS
Bug 41647: Fix self-checkin to use responsive CSS

Description David Cook 2026-01-16 04:31:02 UTC
As per bug 41645, the self-checkin has access to responsive CSS, but can't use it because it's missing 1 line of HTML:

<meta name="viewport" content="width=device-width, initial-scale=1">

Once that line is added, the CSS media queries start to work.
Comment 1 David Cook 2026-01-16 04:39:44 UTC
Created attachment 191542 [details] [review]
Bug 41647: Fix self-checkin to use responsive CSS

Test plan:
0. Apply the patch
1. Enable the SelfCheckInModule system preference
2. Go to http://localhost:8080/cgi-bin/koha/sci/sci-main.pl
3. Enter barcode 39999000004571 into input box, click "Submit",
then click "Check in"
4. Using your F12 dev tools, look at the interface with different
widths
5. Note that the page looks good on both large and small screens
6. Note that the page stays contained to the small screen size
and you don't have to scroll horizontally to see all the content
Comment 2 David Nind 2026-01-16 05:13:20 UTC
Created attachment 191545 [details] [review]
Bug 41647: Fix self-checkin to use responsive CSS

Test plan:
0. Apply the patch
1. Enable the SelfCheckInModule system preference
2. Go to http://localhost:8080/cgi-bin/koha/sci/sci-main.pl
3. Enter barcode 39999000004571 into input box, click "Submit",
then click "Check in"
4. Using your F12 dev tools, look at the interface with different
widths
5. Note that the page looks good on both large and small screens
6. Note that the page stays contained to the small screen size
and you don't have to scroll horizontally to see all the content

Signed-off-by: David Nind <david@davidnind.com>
Comment 3 Baptiste Wojtkowski (bwoj) 2026-02-24 13:57:25 UTC
Created attachment 193767 [details] [review]
Bug 41647: Fix self-checkin to use responsive CSS

Test plan:
0. Apply the patch
1. Enable the SelfCheckInModule system preference
2. Go to http://localhost:8080/cgi-bin/koha/sci/sci-main.pl
3. Enter barcode 39999000004571 into input box, click "Submit",
then click "Check in"
4. Using your F12 dev tools, look at the interface with different
widths
5. Note that the page looks good on both large and small screens
6. Note that the page stays contained to the small screen size
and you don't have to scroll horizontally to see all the content

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Baptiste Wojtkowski <baptiste.wojtkowski@biblibre.com>
Comment 4 David Cook 2026-02-25 00:42:06 UTC
Woo! Mille mercis, Baptiste!
Comment 5 Lucas Gass (lukeg) 2026-02-26 16:07:06 UTC
Nice work everyone!

Pushed to main for 26.05