Fix advanced search mobile overflow (#12308)

Author: KevinSailema

openlibrary/templates/search/advancedsearch.html

@@ -4,7 +4,7 @@ <h1>$_('Advanced Search')</h1>
 
 <div id="contentBody">
   $:macros.SearchNavigation()
-  <form method="get" action="/search" class="siteSearch olform">
+  <form method="get" action="/search" class="siteSearch olform siteSearch--advanced">
     <fieldset class="home">
       <legend>$_('Advanced Search')</legend>
       <input type="hidden" name="q" id="qtop">
@@ -13,31 +13,31 @@ <h1>$_('Advanced Search')</h1>
       <legend>$_('Advanced Search')</legend>
       <div class="formElement">
         <label for="qtop-title">$_('Title')</label><br>
-        <input type="text" name="title" id="qtop-title" placeholder="" size="35">
+        <input type="text" class="siteSearch--advanced-input" name="title" id="qtop-title" placeholder="" size="35">
       </div>
       <div class="formElement">
         <label for="qtop-author">$_('Author')</label><br>
-        <input type="text" name="author" id="qtop-author" placeholder="" size="35">
+        <input type="text" class="siteSearch--advanced-input" name="author" id="qtop-author" placeholder="" size="35">
       </div>
       <div class="formElement">
         <label for="qtop-isbn">$_('ISBN')</label><br>
-        <input type="text" name="isbn" id="qtop-isbn" placeholder="" size="35">
+        <input type="text" class="siteSearch--advanced-input" name="isbn" id="qtop-isbn" placeholder="" size="35">
       </div>
       <div class="formElement">
         <label for="qtop-subject">$_('Subject')</label><br>
-        <input type="text" name="subject" id="qtop-subject" placeholder="" size="35">
+        <input type="text" class="siteSearch--advanced-input" name="subject" id="qtop-subject" placeholder="" size="35">
       </div>
       <div class="formElement">
         <label for="qtop-place">$_('Place')</label><br>
-        <input type="text" name="place" id="qtop-place" placeholder="" size="35">
+        <input type="text" class="siteSearch--advanced-input" name="place" id="qtop-place" placeholder="" size="35">
       </div>
       <div class="formElement">
         <label for="qtop-person">$_('Person')</label><br>
-        <input type="text" name="person" id="qtop-person" placeholder="" size="35">
+        <input type="text" class="siteSearch--advanced-input" name="person" id="qtop-person" placeholder="" size="35">
       </div>
       <div class="formElement">
         <label for="qtop-publisher">$_('Publisher')</label><br>
-        <input type="text" name="publisher" id="qtop-publisher" placeholder="" size="35">
+        <input type="text" class="siteSearch--advanced-input" name="publisher" id="qtop-publisher" placeholder="" size="35">
       </div>
     </fieldset>
     <button type="submit" class="cta-btn cta-btn--search">$_('Search')</button>

static/css/legacy.css

@@ -713,6 +713,18 @@ div.siteSearch input[type="text"] {
   margin-right: 20px;
 }
 
+/* openlibrary/templates/search/advancedsearch.html */
+@media screen and (max-width: 768px) {
+  .siteSearch--advanced {
+    width: 100%;
+  }
+
+  .siteSearch--advanced-input {
+    width: 100%;
+    margin-right: 0;
+  }
+}
+
 /* DIALOGS */
 
 /* openlibrary/macros/EditButtons.html */