From 59ff0037e8098c2d56a5737ad5925dcb93bdd13e Mon Sep 17 00:00:00 2001
From: jazairi <16103405+jazairi@users.noreply.github.com>
Date: Thu, 6 Jun 2024 12:30:48 -0400
Subject: [PATCH] Fix iOS text wrap bug

Why these changes are being introduced:

SwiftUI/iOS has some unusual behavior for list markers. It adds
line height to them, such that when we increase the font size
for a marker, the line height is dramatically increased. This
is particularly visible when the text next to the marker wraps,
which is common for TIMDEX UI record titles.

Relevant ticket(s):

* [GDT-246](https://mitlibraries.atlassian.net/browse/GDT-246)

How this addresses that need:

This implements a CSS workaround. First, we reset the line height
to 0 on `.result`, enforcing no line height for markers. Then,
we add a div to wrap the rest of the result (`.result-content`),
with a rule that sets the line height to 1.2.

Side effects of this change:

I don't forsee any, but it's a pretty ugly workaround to accommodate
a minor bug in a weird OS.
---
 app/assets/stylesheets/partials/_results.scss | 54 ++++++++++---------
 app/views/search/_result.html.erb             | 42 ++++++++-------
 app/views/search/_result_geo.html.erb         | 50 ++++++++---------
 3 files changed, 77 insertions(+), 69 deletions(-)

diff --git a/app/assets/stylesheets/partials/_results.scss b/app/assets/stylesheets/partials/_results.scss
index fe31c072..f7149296 100644
--- a/app/assets/stylesheets/partials/_results.scss
+++ b/app/assets/stylesheets/partials/_results.scss
@@ -44,46 +44,50 @@
   padding: 2rem;
   border-top: 1px solid $brand-primary;
   font-size: $fs-small;
+  line-height: 0; /* line height needs to be reset so iOS doesn't act weird */
 
   &::marker {
     font-size: 2.5rem;
-    line-height: 1.1;
     font-weight: $fw-bold;
   }
 
-  .record-title {
-    font-size: 2.5rem;
-    line-height: 1.1;
-  }
-
   &:hover,
   &:focus {
     background-color: $gray-l4;
   }
 
-  a:visited {
-    color: $brand-secondary;
-  }
+  .result-content {
+    line-height: 1.2;
 
-  .pub-info {
-    font-size: $fs-base;
-    color:  $gray-d1;
-    span:first-child:after {
-      content: " | ";
+    .record-title {
+      font-size: 2.5rem;
+      line-height: 1.1;
     }
-    margin: 1em 0;
-  }
 
-  .result-summary {
-    margin-bottom: 2.4em;
-  }
+    a:visited {
+      color: $brand-secondary;
+    }
+
+    .pub-info {
+      font-size: $fs-base;
+      color:  $gray-d1;
+      span:first-child:after {
+        content: " | ";
+      }
+      margin: 1em 0;
+    }
+
+    .result-summary {
+      margin-bottom: 2.4em;
+    }
 
-  .result-highlights {
-    margin-top: 1.4em;
-    ul {
-      list-style: none;
-      li {
-        margin-left: 2rem;
+    .result-highlights {
+      margin-top: 1.4em;
+      ul {
+        list-style: none;
+        li {
+          margin-left: 2rem;
+        }
       }
     }
   }
diff --git a/app/views/search/_result.html.erb b/app/views/search/_result.html.erb
index 184b6912..da115f61 100644
--- a/app/views/search/_result.html.erb
+++ b/app/views/search/_result.html.erb
@@ -1,27 +1,29 @@
 <li class="result">
-  <h3 class="record-title">
-    <span class="sr">Title: </span><%= link_to(result['title'], record_path(result['timdexRecordId'])) %>
-  </h3>
+  <div class="result-content">
+    <h3 class="record-title">
+      <span class="sr">Title: </span><%= link_to(result['title'], record_path(result['timdexRecordId'])) %>
+    </h3>
 
-  <p class="pub-info">
-    <span><%= result['contentType']&.each { |type| type['value'] }&.join(' ; ') %></span>
-    <span>
-      <% result['dates']&.each do |date| %>
-        <%= date['value'] if date['kind'] == 'Publication date' %>
-      <% end %>
-    </span>
-  </p>
+    <p class="pub-info">
+      <span><%= result['contentType']&.each { |type| type['value'] }&.join(' ; ') %></span>
+      <span>
+        <% result['dates']&.each do |date| %>
+          <%= date['value'] if date['kind'] == 'Publication date' %>
+        <% end %>
+      </span>
+    </p>
 
-  <span class="sr">Contributors: </span>
-  <ul class="list-inline truncate-list contributors">
-    <%= render partial: 'shared/contributors', locals: { contributors: result['contributors'] } %>
-  </ul>
+    <span class="sr">Contributors: </span>
+    <ul class="list-inline truncate-list contributors">
+      <%= render partial: 'shared/contributors', locals: { contributors: result['contributors'] } %>
+    </ul>
 
-  <div class="result-highlights">
-    <%= render partial: 'search/highlights', locals: { result: result } %>
-  </div>
+    <div class="result-highlights">
+      <%= render partial: 'search/highlights', locals: { result: result } %>
+    </div>
 
-  <div class="result-get">
-    <%= view_online(result) %>
+    <div class="result-get">
+      <%= view_online(result) %>
+    </div>
   </div>
 </li>
diff --git a/app/views/search/_result_geo.html.erb b/app/views/search/_result_geo.html.erb
index fd60331c..a06f9350 100644
--- a/app/views/search/_result_geo.html.erb
+++ b/app/views/search/_result_geo.html.erb
@@ -1,32 +1,34 @@
 <li class="result">
-  <h3 class="record-title">
-    <span class="sr">Title: </span><%= link_to(result_geo['title'], record_path(result_geo['timdexRecordId'])) %>
-  </h3>
+  <div class="result-content">
+    <h3 class="record-title">
+      <span class="sr">Title: </span><%= link_to(result_geo['title'], record_path(result_geo['timdexRecordId'])) %>
+    </h3>
 
-  <div class="data-info">
-    <%= render partial: 'shared/geo_data_info', locals: { metadata: result_geo } %>
-  </div>
+    <div class="data-info">
+      <%= render partial: 'shared/geo_data_info', locals: { metadata: result_geo } %>
+    </div>
 
-  <% if result_geo['contributors'] %> 
-    <span class="sr">Contributors: </span>
-    <ul class="list-inline truncate-list contributors">
-      <%= render partial: 'shared/contributors', locals: { contributors: result_geo['contributors'] } %>
-    </ul>
-  <% end %>
+    <% if result_geo['contributors'] %> 
+      <span class="sr">Contributors: </span>
+      <ul class="list-inline truncate-list contributors">
+        <%= render partial: 'shared/contributors', locals: { contributors: result_geo['contributors'] } %>
+      </ul>
+    <% end %>
 
-  <% if result_geo['summary'] %>
-    <p class="result-summary truncate-list">
-      <span class="sr">Summary: </span><%= result_geo['summary'].join(' ') %>
-    </p>
-  <% end %>
+    <% if result_geo['summary'] %>
+      <p class="result-summary truncate-list">
+        <span class="sr">Summary: </span><%= result_geo['summary'].join(' ') %>
+      </p>
+    <% end %>
 
-  <% if result_geo['highlight'] %>
-    <div class="result-highlights">
-      <%= render partial: 'search/highlights', locals: { result: result_geo } %>
-    </div>
-  <% end %>
+    <% if result_geo['highlight'] %>
+      <div class="result-highlights">
+        <%= render partial: 'search/highlights', locals: { result: result_geo } %>
+      </div>
+    <% end %>
 
-  <div class="result-record">
-    <%= view_record(result_geo['timdexRecordId']) %>
+    <div class="result-record">
+      <%= view_record(result_geo['timdexRecordId']) %>
+    </div>
   </div>
 </li>