From b2ac817d5b0dd8ca271f577a09e1b2969d7cfc3a Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Thu, 21 Aug 2025 19:59:05 -0500
Subject: [PATCH] Use a more reliable transition method, adjust input styles

---
 app/assets/stylesheets/bar.css             | 10 +++++++---
 app/assets/stylesheets/conversation.css    |  9 ++++++---
 app/assets/stylesheets/search.css          |  9 +++++++--
 app/views/bar/_bar.html.erb                |  4 ++--
 app/views/conversations/_composer.html.erb |  2 +-
 app/views/searches/_form.html.erb          |  2 +-
 6 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/bar.css b/app/assets/stylesheets/bar.css
index 31e102308..de71dbbb4 100644
--- a/app/assets/stylesheets/bar.css
+++ b/app/assets/stylesheets/bar.css
@@ -12,15 +12,19 @@
     padding: var(--block-space) calc(var(--tray-size) + calc(var(--inline-space) * 3)) calc(var(--block-space) + env(safe-area-inset-bottom));
     place-content: center;
     position: fixed;
-    transition: padding-inline 350ms cubic-bezier(0.25, 1.25, 0.5, 1);
     z-index: var(--z-terminal);
 
     @media (prefers-color-scheme: dark) {
       border-block: 1px solid var(--color-ink-lighter);
     }
+  }
 
-    &:has(.bar__placeholder[hidden]) {
-      padding-inline: calc((100dvw - 60ch) / 2);
+  .bar__input {
+    transform: translateX(50%);
+    transition: transform 350ms cubic-bezier(0.25, 1.25, 0.5, 1);
+
+    .bar:has(.bar__placeholder[hidden]) & {
+      transform: translateX(0);
     }
   }
 
diff --git a/app/assets/stylesheets/conversation.css b/app/assets/stylesheets/conversation.css
index b9a027a1f..0856d6d37 100644
--- a/app/assets/stylesheets/conversation.css
+++ b/app/assets/stylesheets/conversation.css
@@ -8,11 +8,14 @@
     position: absolute;
   }
 
-  .conversation__composer-input {
+  .conversation__composer-input.input {
     --focus-ring-size: 0;
+    --input-border-color: var(--color-ink-light);
     --input-border-radius: 0;
-    --input-border-size: 0;
-    --input-padding: 0 0.5em;
+    --input-padding: 0.1em;
+
+    border-width: 0 0 1px;
+    max-inline-size: 40ch;
   }
 
   .conversation__message {
diff --git a/app/assets/stylesheets/search.css b/app/assets/stylesheets/search.css
index 6ae4c0052..3f857822e 100644
--- a/app/assets/stylesheets/search.css
+++ b/app/assets/stylesheets/search.css
@@ -17,10 +17,15 @@
   /* ------------------------------------------------------------------------ */
 
   .search__form-input {
+    --clear-icon-size: 1em;
     --focus-ring-size: 0;
+    --input-border-color: var(--color-ink-light);
     --input-border-radius: 0;
-    --input-border-size: 0;
-    --input-padding: 0 0.5em;
+    --input-padding: 0.1em;
+
+    border-width: 0 0 1px;
+    max-inline-size: 40ch;
+
 
     &::-webkit-search-cancel-button {
       --clear-icon-size: 0.75rem;
diff --git a/app/views/bar/_bar.html.erb b/app/views/bar/_bar.html.erb
index f76e44ea4..87c133be6 100644
--- a/app/views/bar/_bar.html.erb
+++ b/app/views/bar/_bar.html.erb
@@ -28,11 +28,11 @@
     <% end %>
   </div>
 
-  <div data-bar-target="searchInput" hidden>
+  <div class="bar__input" data-bar-target="searchInput" hidden>
     <%= render "searches/form", query_terms: "" %>
   </div>
 
-  <div data-bar-target="askInput" hidden>
+  <div class="bar__input" data-bar-target="askInput" hidden>
     <%= render "conversations/composer" %>
   </div>
 
diff --git a/app/views/conversations/_composer.html.erb b/app/views/conversations/_composer.html.erb
index 3d29c4ad4..8e1935cc0 100644
--- a/app/views/conversations/_composer.html.erb
+++ b/app/views/conversations/_composer.html.erb
@@ -1,5 +1,5 @@
 <%= form_with model: Conversation::Message.new, local: true, 
-      class: "conversation__composer flex align-center position-relative",
+      class: "conversation__composer flex align-center position-relative gap-half",
       data: {
         turbo_frame: "conversation",
         action: "turbo:submit-end->conversation--composer#submitEnd",
diff --git a/app/views/searches/_form.html.erb b/app/views/searches/_form.html.erb
index e5b125516..62094cd47 100644
--- a/app/views/searches/_form.html.erb
+++ b/app/views/searches/_form.html.erb
@@ -1,4 +1,4 @@
-<%= form_with url: search_path, method: :get, class: "search__form flex align-center", data: { turbo_frame: "bar-content" } do |form| %>
+<%= form_with url: search_path, method: :get, class: "search__form flex align-center gap-half", data: { turbo_frame: "bar-content" } do |form| %>
   <%= form.label :q, "Search Fizzy", class: "font-weight-black txt-nowrap" %>
   <%= text_field_tag :q, query_terms,
         class: "search__form-input input",