From 3d831f7e1cda9c630358a75f65fd01d64156ff92 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Fri, 2 Sep 2022 00:18:10 -0500
Subject: [PATCH] autocomplete: limit width of autocomplete menu.

Limit the width of the autocomplete menu to 480px. This is so that
stupidly long isekai titles don't blow out the size of the menu when
searching for common words.

For example, when searching for "look", one of the results is:

   no_matter_how_you_look_at_it_it's_your_fault_that_i'm_not_popular! -> watashi_ga_motenai_no_wa_dou_kangaetemo_omaera_ga_warui!
---
 .../autocomplete_component/autocomplete_component.html.erb | 2 +-
 app/javascript/src/styles/common/autocomplete.scss         | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/components/autocomplete_component/autocomplete_component.html.erb b/app/components/autocomplete_component/autocomplete_component.html.erb
index 335bad548..1c29a8eb5 100644
--- a/app/components/autocomplete_component/autocomplete_component.html.erb
+++ b/app/components/autocomplete_component/autocomplete_component.html.erb
@@ -13,7 +13,7 @@
         <% end %>
 
         <% if result.post_count %>
-          <%= tag.span humanized_number(result.post_count), class: "post-count", style: "float: right;" %>
+          <%= tag.span humanized_number(result.post_count), class: "post-count" %>
         <% end %>
       </div>
     <% end %>
diff --git a/app/javascript/src/styles/common/autocomplete.scss b/app/javascript/src/styles/common/autocomplete.scss
index d1a818596..dafca55de 100644
--- a/app/javascript/src/styles/common/autocomplete.scss
+++ b/app/javascript/src/styles/common/autocomplete.scss
@@ -2,22 +2,29 @@
   font-size: var(--text-sm);
   border: 1px solid var(--autocomplete-border-color);
   box-shadow: var(--shadow-lg);
+  max-width: 480px;
 
   div.ui-menu-item-wrapper {
     padding: 0.25em 0.4em;
     border: none;
+    display: flex;
 
     &.ui-state-active {
       cursor: pointer;
       background-color: var(--autocomplete-selected-background-color);
     }
 
+    > a {
+      flex-grow: 1;
+    }
+
     span.autocomplete-arrow {
       color: var(--text-color);
     }
 
     span.post-count {
       margin-left: 1em;
+      align-self: center;
     }
   }