From b286d9be41521def3f252fa03df6ae5eef17dc64 Mon Sep 17 00:00:00 2001
From: Andrew Isherwood <andrew.isherwood@ptfs-europe.com>
Date: Wed, 18 Aug 2021 15:07:54 +0100
Subject: [PATCH] Bug 28879: Fix display of request metadata

This commit adjusts the CSS surrounding the display of request
metadata, it improves the display for metadata with long key names.

Test plan:

- Do not apply patch
- Create a FreeForm ILL request with a custom metadata field with a long
  name
- View the created request
- Observe that the long metadata name breaks the display of the metadata
- Apply the patch
- View the created request
  => TEST: Observe that the display is no longer broken

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
---
 .../opac-tmpl/bootstrap/css/src/opac.scss     | 33 +++++++++++++++++++
 .../bootstrap/en/modules/opac-illrequests.tt  |  6 ++--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index b5bc2a0aea..2f48d69f60 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -2486,6 +2486,39 @@ nav {
         display: block;
     }
 
+    div.rows span.label {
+        float: inherit;
+        width: inherit;
+        text-align: inherit;
+        margin-right: 0;
+    }
+
+    #ill-supplier-metadata {
+        display: flex;
+        flex-flow: column nowrap;
+        flex: 1 1 auto;
+    }
+
+    div[class^='requestattr-'] {
+        width: 100%;
+        display: flex;
+        flex-flow: row nowrap;
+        padding: 5px;
+        &:nth-of-type(even) {
+            background-color: #f2f2f2;
+        }
+        &:nth-of-type(odd) {
+            background-color: #ffffff;
+        }
+    }
+
+    #ill-supplier-metadata > div > span {
+        display: flex;
+        flex-flow: row nowrap;
+        flex-grow: 1;
+        flex-basis: 0;
+    }
+
 }
 
 .ill_availability_sourcename {
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-illrequests.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-illrequests.tt
index e8ccc560ce..c2c445fa99 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-illrequests.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-illrequests.tt
@@ -220,12 +220,12 @@
                                         </li>
                                     </ol>
                                 </fieldset>
-                                <div class="rows">
+                                <div id="ill-supplier-metadata" class="rows">
                                     <legend id="backend_legend">Details from [% request.backend | html %]</legend>
                                     [% FOREACH meta IN request.metadata %]
-                                        <div class="requestattr-[% meta.key | html %]">
+                                        <div class="requestattr-[% meta.key | replace(' ', '_') | html %]">
                                             <span class="label">[% meta.key | html %]:</span>
-                                            [% IF meta.value %][% meta.value | html %][% ELSE %]<span>N/A</span>[% END %]
+                                            <span class="value">[% IF meta.value %][% meta.value | html %][% ELSE %]N/A[% END %]</span>
                                         </div>
                                     [% END %]
                                 </div>
-- 
2.39.5