From b040424e2f93a17c97966e4b2803ef771eb899bd Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Wed, 17 Dec 2025 12:50:36 +0100
Subject: [PATCH] Make search perma mobile friendly

---
 app/assets/stylesheets/search.css | 36 +++++++++++++++++++++++++------
 app/views/searches/show.html.erb  | 17 +++++++++------
 2 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/search.css b/app/assets/stylesheets/search.css
index 96368841e..1b6f5f6aa 100644
--- a/app/assets/stylesheets/search.css
+++ b/app/assets/stylesheets/search.css
@@ -26,7 +26,7 @@ summary {
     max-block-size: 100%;
     overflow-y: auto;
     overscroll-behavior: contain;
-    padding: var(--block-space) calc(var(--block-space-double) + var(--btn-size));
+    padding: var(--block-space);
   }
 
   /* Form
@@ -34,18 +34,22 @@ summary {
 
   .search__input {
     --clear-icon-size: 1em;
-    --focus-ring-size: 0;
-    --input-border-color: var(--color-ink-light);
-    --input-border-radius: 0;
-    --input-padding: 0.1em;
 
-    border-width: 0 0 1px;
     max-inline-size: 50ch;
     position: relative;
 
     &::-webkit-search-cancel-button {
       display: none;
     }
+
+    .bar__input & {
+      --focus-ring-size: 0;
+      --input-border-color: var(--color-ink-light);
+      --input-border-radius: 0;
+      --input-padding: 0.1em;
+
+      border-width: 0 0 1px;
+    }
   }
 
   .search__reset {
@@ -107,4 +111,24 @@ summary {
   .search__title {
     text-decoration: underline;
   }
+
+  /* Perma
+  /* ------------------------------------------------------------------------ */
+
+  .search-perma {
+    margin-block-start: var(--block-space);
+
+    .search__form > label,
+    .search__reset {
+      display: none;
+    }
+
+    .search__input {
+      max-inline-size: min(80ch, 100%);
+    }
+
+    .search {
+      padding-inline: 0;
+    }
+  }
 }
diff --git a/app/views/searches/show.html.erb b/app/views/searches/show.html.erb
index 9c9a2bb14..1c79374fc 100644
--- a/app/views/searches/show.html.erb
+++ b/app/views/searches/show.html.erb
@@ -1,7 +1,12 @@
-<%= turbo_frame_tag "bar_content" do %>
-  <% if @card %>
-    <%= auto_submit_form_with url: card_path(@card), method: :get, data: { turbo_action: "advance", turbo_frame: "_top", search_redirect: true } %>
-  <% else %>
-    <%= render "results", page: @page %>
+<% @page_title = params.has_key?(:q) ? "Search results for \"#{params[:q]}\"" : "Search" %>
+
+<div class="search-perma">
+  <%= render "form", query_terms: params[:q] %>
+  <%= turbo_frame_tag "bar_content" do %>
+    <% if @card %>
+      <%= auto_submit_form_with url: card_path(@card), method: :get, data: { turbo_action: "advance", turbo_frame: "_top", search_redirect: true } %>
+    <% else %>
+      <%= render "results", page: @page %>
+    <% end %>
   <% end %>
-<% end %>
+</div>