From b17a16324a8bf310369372aeb616d012db540e43 Mon Sep 17 00:00:00 2001
From: Ben Halpern <bendhalpern@gmail.com>
Date: Mon, 20 May 2024 14:58:08 +0000
Subject: [PATCH] Frontend style tweaks

---
 app/assets/stylesheets/components/header.scss    | 6 ++++++
 app/assets/stylesheets/config/_variables.scss    | 2 +-
 app/javascript/Search/SearchForm.jsx             | 7 ++++---
 app/views/stories/articles_search/index.html.erb | 6 +++---
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/components/header.scss b/app/assets/stylesheets/components/header.scss
index b276543b2760e..b91a4044e4024 100644
--- a/app/assets/stylesheets/components/header.scss
+++ b/app/assets/stylesheets/components/header.scss
@@ -49,6 +49,12 @@
   }  
 }
 
+.main-search-page {
+  .crayons-textfield {
+    padding-left: 40px;
+  }
+}
+
 .crayons-header--search-typeahead {
   border: 1px solid var(--base-20);
   border-radius: var(--radius);
diff --git a/app/assets/stylesheets/config/_variables.scss b/app/assets/stylesheets/config/_variables.scss
index bfc99ef5208ba..beb4a29ab13a8 100644
--- a/app/assets/stylesheets/config/_variables.scss
+++ b/app/assets/stylesheets/config/_variables.scss
@@ -8,7 +8,7 @@
   // by specific value... And that's the value.
 
   --header-height: 56px;
-  --site-width: 1280px;
+  --site-width: 1320px;
 
   ////////////////////////////////////////////////////////////////////////////////////
   // Spacing Units. //////////////////////////////////////////////////////////////////
diff --git a/app/javascript/Search/SearchForm.jsx b/app/javascript/Search/SearchForm.jsx
index 98e31ddc4d12c..68d40a562bc7c 100644
--- a/app/javascript/Search/SearchForm.jsx
+++ b/app/javascript/Search/SearchForm.jsx
@@ -113,9 +113,10 @@ export const SearchForm = forwardRef(
               value={inputValue}
               onChange={handleInputChange}
               onFocus={() => {
-                document
-                  .getElementById('search-typeahead')
-                  .classList.remove('hidden');
+                const typeahead = document.getElementById('search-typeahead');
+                if (typeahead) {
+                  typeahead.classList.remove('hidden');
+                }
                 setShowSuggestions(true);
               }}
               onKeyDown={handleKeyDown}
diff --git a/app/views/stories/articles_search/index.html.erb b/app/views/stories/articles_search/index.html.erb
index 9590ec88d8c64..39cbf10a8aae7 100644
--- a/app/views/stories/articles_search/index.html.erb
+++ b/app/views/stories/articles_search/index.html.erb
@@ -3,7 +3,7 @@
 <% end %>
 <div id="query-wrapper"></div>
 
-<main id="main-content">
+<main id="main-content" class="main-search-page">
   <div id="index-container"
       class="crayons-layout crayons-layout--header-inside crayons-layout--limited-l crayons-layout--2-cols"
       data-params="<%= params.to_json(only: %i[tag username q]) %>" data-which="<%= @list_of %>"
@@ -15,8 +15,8 @@
         <form accept-charset="UTF-8" method="get" action="/search" role="search">
           <div class="crayons-fields crayons-fields--horizontal">
             <div class="crayons-field flex-1 relative">
-              <input class="crayons-textfield" type="text" name="q" placeholder="<%= t("views.search.placeholder") %>" autocomplete="on" />
-              <button type="submit" aria-label="Search" class="crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-rounded absolute right-2 bottom-0 top-0 m-1">
+              <input class="crayons-textfield landing-search-input" type="text" name="q" placeholder="<%= t("views.search.placeholder") %>" autocomplete="on" />
+              <button type="submit" aria-label="Search" class="c-btn c-btn--icon-alone absolute inset-px right-auto mt-0 py-0">
                 <%= crayons_icon_tag(:search, aria_hidden: true, title: t("views.search.icon.title")) %>
               </button>
             </div>