From dbab6563410669d5a2c9b558afe16d3e775dbcfa Mon Sep 17 00:00:00 2001
From: Caryl Wyatt <carylw@hathitrust.org>
Date: Thu, 20 Jun 2024 14:18:23 -0400
Subject: [PATCH 1/3] decrease search form font size for smaller screens

fixes deque issue 1727499
---
 src/js/components/AdvancedSearchForm/index.svelte | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/js/components/AdvancedSearchForm/index.svelte b/src/js/components/AdvancedSearchForm/index.svelte
index d5c931b..fc0c3ba 100644
--- a/src/js/components/AdvancedSearchForm/index.svelte
+++ b/src/js/components/AdvancedSearchForm/index.svelte
@@ -727,4 +727,10 @@
       margin-left: 0;
     }
   }
+  @media (max-width: 25rem) {
+    .form-select,
+    .form-control {
+      font-size: 0.875rem;
+    }
+  }
 </style>

From 6190e459145864bad2aed3bf12a0c77c44ac233c Mon Sep 17 00:00:00 2001
From: Caryl Wyatt <carylw@hathitrust.org>
Date: Fri, 9 Aug 2024 08:11:46 -0400
Subject: [PATCH 2/3] restrict max height, add scroll for overflow

---
 src/js/components/CookieConsentBanner/index.svelte | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/js/components/CookieConsentBanner/index.svelte b/src/js/components/CookieConsentBanner/index.svelte
index 5c8658b..34f4fff 100644
--- a/src/js/components/CookieConsentBanner/index.svelte
+++ b/src/js/components/CookieConsentBanner/index.svelte
@@ -150,7 +150,14 @@
     border-end-start-radius: 0;
     background: var(--color-primary-200);
     padding: 1.25rem 1rem;
+<<<<<<< HEAD
     max-height: 34rem;
+=======
+    // max-height: 34rem;
+    max-height: 80vh;
+    overflow-y: scroll;
+
+>>>>>>> 12b2702 (restrict max height, add scroll for overflow)
     .h2 {
       font-size: 1.25rem;
       line-height: 120%; /* 1.5rem */

From 321a9cbd277103c8777de2c1bd094cc327ca385f Mon Sep 17 00:00:00 2001
From: Caryl Wyatt <carylw@hathitrust.org>
Date: Mon, 5 Aug 2024 14:47:40 -0400
Subject: [PATCH 3/3] rework layout for reflow

---
 .../AdvancedSearchForm/index.svelte           | 29 +++++++++++++------
 .../CookieConsentBanner/index.svelte          |  4 ---
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/js/components/AdvancedSearchForm/index.svelte b/src/js/components/AdvancedSearchForm/index.svelte
index fc0c3ba..a82e0ea 100644
--- a/src/js/components/AdvancedSearchForm/index.svelte
+++ b/src/js/components/AdvancedSearchForm/index.svelte
@@ -495,7 +495,7 @@
           {#if idx > 0}
             <fieldset class="mb-3">
               <legend class="visually-hidden">Boolean operator for field {idx} and field {idx + 1}</legend>
-              <div class="d-flex gap-3 align-items-center justify-content-start">
+              <div class="d-flex gap-3 align-items-center justify-content-center justify-content-sm-start">
                 {#each booleanOptions as option, bidx}
                   <div class="form-check">
                     <input
@@ -513,9 +513,9 @@
               </div>
             </fieldset>
           {/if}
-          <fieldset class="search-clause mb-3 border border-dark rounded">
-            <div class="d-flex">
-              <legend class="visually-hidden">Search Field {idx + 1}</legend>
+          <fieldset class="search-clause mb-3">
+            <legend class="visually-hidden">Search field {idx + 1}:</legend>
+            <div class="field-container d-flex search-field border border-dark rounded">
               <div class="select-container border border-0 flex-grow-1">
                 <select
                   class="form-select rounded-0 rounded-start"
@@ -601,7 +601,7 @@
               Publication Year must be between 0-9999.
             </div>
           {/if}
-          <div class="d-flex gap-3 mb-1">
+          <div class="d-flex gap-3 mb-1 flex-wrap">
             {#each yopOptions as option, yidx}
               <div class="form-check">
                 <input
@@ -727,10 +727,21 @@
       margin-left: 0;
     }
   }
-  @media (max-width: 25rem) {
-    .form-select,
-    .form-control {
-      font-size: 0.875rem;
+  @media (max-width: 36rem) {
+    .field-container {
+      border:none !important;
+    }
+    .search-field {
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+    .select-container select {
+      border: 1px solid var(--color-neutral-500) !important;
+      border-radius: 0.375rem !important;
+    }
+    .search-input .form-control {
+      border: 1px solid var(--color-neutral-500) !important;
+      border-radius: 0.375rem !important;
     }
   }
 </style>
diff --git a/src/js/components/CookieConsentBanner/index.svelte b/src/js/components/CookieConsentBanner/index.svelte
index 34f4fff..016991c 100644
--- a/src/js/components/CookieConsentBanner/index.svelte
+++ b/src/js/components/CookieConsentBanner/index.svelte
@@ -150,14 +150,10 @@
     border-end-start-radius: 0;
     background: var(--color-primary-200);
     padding: 1.25rem 1rem;
-<<<<<<< HEAD
-    max-height: 34rem;
-=======
     // max-height: 34rem;
     max-height: 80vh;
     overflow-y: scroll;
 
->>>>>>> 12b2702 (restrict max height, add scroll for overflow)
     .h2 {
       font-size: 1.25rem;
       line-height: 120%; /* 1.5rem */