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

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

diff --git a/src/js/components/AdvancedSearchForm/index.svelte b/src/js/components/AdvancedSearchForm/index.svelte
index fc0c3ba..120468c 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
@@ -704,6 +704,9 @@
 </div>
 
 <style lang="scss">
+  // .boolean-radios {
+  //   justify-content: start;
+  // }
   .search-input {
     display: flex;
     // border: 0.5px solid var(--color-neutral-500);
@@ -727,10 +730,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 */