From fce45b427989da60ec201829ec554a82d48fe4f7 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Wed, 23 Jul 2025 15:06:47 +0000
Subject: [PATCH] Bug 40557: Fix layout of enrollment period fields in
 onboarding

This patch makes updates to CSS and markup in order to fix the layout of
the enrollment period fields during the onboarding process.

To test, apply the patch and rebuild the staff interface CSS.

- Drop and recreate your Koha database.
- Restart all services
- Follow the web installer until you reach the onboarding stage "Create
  a patron category."
- The enrollment period fields should look correct.

Sponsored-by: Athens County Public Libraries
Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Marcel de Rooy <m.de.rooy@rijksmuseum.nl>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
---
 .../intranet-tmpl/prog/css/src/installer.scss | 20 +++++++++++
 .../en/modules/onboarding/onboardingstep2.tt  | 35 +++++++++----------
 2 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss b/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss
index e52280c516..6f6db1781e 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss
@@ -192,6 +192,14 @@ fieldset {
                 margin-left: 1em;
                 width: auto;
             }
+
+            &.form-label {
+                display: block;
+                float: none;
+                margin: 0;
+                text-align: left;
+                width: auto;
+            }
         }
 
         span.label {
@@ -237,6 +245,18 @@ fieldset {
             margin-right: 4em;
             margin-top: .5em;
         }
+
+        .form-control {
+            width: auto;
+        }
+
+        .enrolmentperioddate {
+            float: left;
+
+            + .hint {
+                margin-left: 0;
+            }
+        }
     }
 }
 
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt
index 9fad050e02..fb4d009ef6 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt
@@ -115,25 +115,22 @@
                             </div>
                         </li>
                         <li>
-                            <span class="label">Enrolment period: </span>
-                            <fieldset class="rows">
-                                <ol>
-                                    <li> <span class="label"></span><strong>Choose one</strong> </li>
-                                    <li>
-                                        <label for="enrolmentperiod">In months: </label>
-                                        [% IF category.enrolmentperiod %]
-                                            <input type="text" inputmode="numeric" pattern="[0-9]*" class="enrolmentperiod" name="enrolmentperiod" id="enrolmentperiod" size="3" value="[% category.enrolmentperiod | html %]" />
-                                        [% ELSE %]
-                                            <input type="text" inputmode="numeric" pattern="[0-9]*" class="enrolmentperiod" name="enrolmentperiod" id="enrolmentperiod" size="3" value="" />
-                                        [% END %]
-                                    </li>
-                                    <li>
-                                        <label for="enrolmentperioddate">Until date: </label>
-                                        <input type="text" class="enrolmentperioddate" name="enrolmentperioddate" id="enrolmentperioddate" value="[% category.enrolmentperioddate | html %]" />
-                                        <div class="hint">[% INCLUDE 'date-format.inc' dateformat = Koha.Preference('dateformat') %]</div>
-                                    </li>
-                                </ol>
-                            </fieldset>
+                            <span class="label">Enrolment period (choose one): </span>
+                            <div style="margin-left: 9rem;">
+                                <div class="mb-3">
+                                    <label class="form-label" for="enrolmentperiod">In months</label>
+                                    [% IF category.enrolmentperiod %]
+                                        <input type="text" inputmode="numeric" pattern="[0-9]*" class="enrolmentperiod" name="enrolmentperiod" id="enrolmentperiod" size="3" value="[% category.enrolmentperiod | html %]" />
+                                    [% ELSE %]
+                                        <input type="text" inputmode="numeric" pattern="[0-9]*" class="enrolmentperiod" name="enrolmentperiod" id="enrolmentperiod" size="3" value="" />
+                                    [% END %]
+                                </div>
+                                <div class="mb-3">
+                                    <label class="form-label" for="enrolmentperioddate">Until date</label>
+                                    <input type="text" class="enrolmentperioddate" name="enrolmentperioddate" id="enrolmentperioddate" value="[% category.enrolmentperioddate | html %]" />
+                                    <div class="hint"> [% INCLUDE 'date-format.inc' dateformat = Koha.Preference('dateformat') %] </div>
+                                </div>
+                            </div>
                         </li>
                     </ol>