Adjust conversation transcript, improve input entry effect

app/assets/stylesheets/bar.css

@@ -4,16 +4,24 @@
 
     background-color: var(--color-terminal-bg);
     color: var(--color-terminal-text);
+    display: flex;
+    flex-direction: column;
     font-size: 0.9em;
     inset: auto 0 0 0;
     max-block-size: 100%;
     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__modal {
@@ -34,6 +42,7 @@
 
     .btn--plain {
       font-weight: 500;
+      white-space: nowrap;
     }
   }
 }

app/assets/stylesheets/conversation.css

@@ -1,14 +1,10 @@
 @layer components {
-  .conversation {
-    height: 100%;
-  }
-
   .conversation__header {
     align-items: center;
     display: flex;
     inset: 0 0 auto 0;
     justify-content: flex-end;
-    padding: var(--block-space-half);
+    padding: var(--block-space-half) var(--block-space);
     position: absolute;
   }
 
@@ -17,26 +13,6 @@
     --input-border-radius: 0;
     --input-border-size: 0;
     --input-padding: 0 0.5em;
-
-    &::-webkit-search-cancel-button {
-      --clear-icon-size: 0.75rem;
-
-      -webkit-appearance: none;
-      appearance: none;
-      background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m14.3 12.179a.25.25 0 0 1 0-.354l9.263-9.262a1.5 1.5 0 0 0 -2.124-2.121l-9.262 9.258a.25.25 0 0 1 -.354 0l-9.262-9.258a1.5 1.5 0 0 0 -2.122 2.121l9.261 9.262a.25.25 0 0 1 0 .354l-9.261 9.263a1.5 1.5 0 0 0 2.122 2.121l9.262-9.263a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 0 0 2.122-2.121z" fill="%23000"/></svg>');
-      background-repeat: no-repeat;
-      background-size: var(--clear-icon-size);
-      block-size: var(--clear-icon-size);
-      cursor: pointer;
-      inline-size: var(--clear-icon-size);
-      inset: 50% 1ch auto auto;
-      position: absolute;
-      translate: 0 -50%;
-
-      @media (prefers-color-scheme: dark) {
-        background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m14.3 12.179a.25.25 0 0 1 0-.354l9.263-9.262a1.5 1.5 0 0 0 -2.124-2.121l-9.262 9.258a.25.25 0 0 1 -.354 0l-9.262-9.258a1.5 1.5 0 0 0 -2.122 2.121l9.261 9.262a.25.25 0 0 1 0 .354l-9.261 9.263a1.5 1.5 0 0 0 2.122 2.121l9.262-9.263a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 0 0 2.122-2.121z" fill="%23fff"/></svg>');
-      }
-    }
   }
 
   .conversation__message {
@@ -58,6 +34,19 @@
     }
   }
 
+  .conversation__messages {
+    --gap: 4vmin;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+    margin-inline: auto;
+    max-block-size: 75dvh;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: var(--block-space) calc(var(--block-space-double) + var(--btn-size));
+  }
+
   .conversation__message--assistant {
     justify-content: flex-start;
 
@@ -79,7 +68,7 @@
     justify-content: flex-end;
 
     .action-text-content {
-      background-color: var(--color-ink-lightest);
+      background-color: var(--color-selected);
       margin-inline-start: 15%;
       padding: var(--block-space-half) var(--inline-space-double);
       text-align: end;
@@ -91,10 +80,6 @@
     flex-direction: column;
     gap: var(--block-space);
     margin-inline: auto;
-    max-block-size: calc(100dvh - 6em - var(--block-space-double) - 2 * var(--footer-height));
-    max-inline-size: 80ch;
-    overflow-y: auto;
-    padding: var(--block-space) calc(var(--block-space-double) + var(--btn-size));
-    padding-block-end: 10em;
+    max-inline-size: 67ch;
   }
 }

app/assets/stylesheets/search.css

@@ -1,6 +1,7 @@
 @layer components {
   .search {
     --gap: 4vmin;
+    --width: 80ch;
 
     display: flex;
     flex-direction: column;

app/javascript/controllers/conversation/messages_controller.js

@@ -34,7 +34,7 @@ export default class extends Controller {
   }
 
   scrollToBottom() {
-    this.messagesTarget.scrollTop = this.messagesTarget.scrollHeight
+    this.element.scrollTop = this.element.scrollHeight
   }
 
   beforeStreamRender(event) {

app/views/bar/_bar.html.erb

@@ -1,5 +1,5 @@
 <%= tag.div \
-      class: "bar full-width flex flex-column justify-end",
+      class: "bar full-width",
       data: {
         controller: "bar",
         bar_dialog_outlet: "#bar-modal",

app/views/conversations/_composer.html.erb

@@ -11,7 +11,8 @@
   <%= form.label :content, "Ask Fizzy", class: "font-weight-black txt-nowrap" %>
   <%= form.text_field :content,
         autofocus: true,
-        placeholder: "Ask something…",
+        autocomplete: "off",
+        placeholder: "Ask a question…",
         class: "conversation__composer-input input",
         data: {
           action: "

app/views/searches/_form.html.erb

@@ -3,7 +3,7 @@
   <%= text_field_tag :q, query_terms,
         class: "search__form-input input",
         type: "search",
-        placeholder: "Find something in Cards and Comments…",
+        placeholder: "Find something…",
         autocomplete: "off",
         autofocus: true,
         data: {