Bug 10190: enhance trigger context display in modal

- improve modal scroll behaviour
- improve modal dimensions
- display contexts as a horizontal list to make better use of the available space
- fully contain dropdowns within the modal body

Signed-off-by: Michaela <michaela.sieber@kit.edu>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Pedro Amorim <pedro.amorim@openfifth.co.uk>

koha-tmpl/intranet-tmpl/prog/js/vue/components/Admin/CirculationTriggers/CirculationTriggersFormAdd.vue

@@ -26,7 +26,7 @@
             </div>
             <fieldset class="rows" v-if="contextInitialized">
                 <legend>{{ $__("Confirm trigger context") }}</legend>
-                <ol>
+                <ol id="confirm-context-list">
                     <li>
                         <label for="library_id" class="required"
                             >{{ $__("Library") }}:</label
@@ -103,7 +103,7 @@
                             name: 'CirculationTriggersSelectOrAdd',
                             query: context,
                         }"
-                        class="btn btn-default btn-xs"
+                        class="btn btn-default btn-xs float-end"
                         ><i class="fa-solid fa-pencil"></i>
                         {{ $__("Confirm context") }}</router-link
                     >
@@ -1001,4 +1001,40 @@ input[type="number"] {
     display: flex;
     justify-content: space-between;
 }
+
+.modal-body {
+    min-height: 280px;
+}
+
+#confirm-context-list {
+    display: flex;
+    gap: 20px;
+    height: fit-content;
+}
+
+#confirm-context-list li {
+    display: flex;
+    flex-direction: column;
+    width: 320px;
+}
+
+#confirm-context-list .v-select {
+    width: 100%;
+}
+
+#confirm-context-list label {
+    width: 100%;
+    text-align: left;
+    padding: 0 0 4px 10px;
+}
+
+#confirm-context-list span {
+    width: 100%;
+    align-content: right;
+    padding-top: 4px;
+}
+
+#confirm-context-list :deep(.v-select ul) {
+    max-height: 120px;
+}
 </style>