Use a more reliable transition method, adjust input styles

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);
     }
   }
 

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 {

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;

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>
 

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",

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",