diff --git a/src/core/MeganavSearchPanel/component.html.erb b/src/core/MeganavSearchPanel/component.html.erb
index a518573bc..40581e631 100644
--- a/src/core/MeganavSearchPanel/component.html.erb
+++ b/src/core/MeganavSearchPanel/component.html.erb
@@ -9,7 +9,7 @@
           <%= render(AblyUi::Core::MeganavSearchAutocomplete.new) %>
         </div>
 
-        <button type="submit" class="ui-btn-secondary ml-8 sm:ml-16 md:ml-24 xl:ml-32">
+        <button type="submit" class="ui-btn-secondary flex-shrink-0 ml-8 sm:ml-16 md:ml-24 xl:ml-32">
           Search
         </button>
       <% end %>
diff --git a/src/core/MeganavSearchPanel/component.jsx b/src/core/MeganavSearchPanel/component.jsx
index 8b51e2a56..7159d94c9 100644
--- a/src/core/MeganavSearchPanel/component.jsx
+++ b/src/core/MeganavSearchPanel/component.jsx
@@ -18,7 +18,7 @@ const MeganavSearchPanel = ({ absUrl }) => {
               <MeganavSearchAutocomplete />
             </div>
 
-            <button type="submit" className="ui-btn-secondary ml-8 sm:ml-16 md:ml-24 xl:ml-32">
+            <button type="submit" className="ui-btn-secondary flex-shrink-0 ml-8 sm:ml-16 md:ml-24 xl:ml-32">
               Search
             </button>
           </form>
diff --git a/src/core/MeganavSearchSuggestions/component.html.erb b/src/core/MeganavSearchSuggestions/component.html.erb
index e3e8a609c..1e51ed374 100644
--- a/src/core/MeganavSearchSuggestions/component.html.erb
+++ b/src/core/MeganavSearchSuggestions/component.html.erb
@@ -1,7 +1,7 @@
 <p class="ui-text-overline2 text-cool-black py-12">Popular pages</p>
 
-<div class="flex justify-between items-center overflow-x-scroll md:overflow-auto">
-  <ul class="flex">
+<div class="flex justify-between items-center overflow-hidden">
+  <ul class="flex transition-transform">
     <li class="py-12 pr-8 flex-shrink-0">
       <%= link_to 'How does Ably work?', abs_url("/docs/how-ably-works"), class: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
     </li>