diff --git a/app/assets/stylesheets/bar.css b/app/assets/stylesheets/bar.css
index 101b75bad..31e102308 100644
--- a/app/assets/stylesheets/bar.css
+++ b/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;
}
}
}
diff --git a/app/assets/stylesheets/conversation.css b/app/assets/stylesheets/conversation.css
index 6daae6c9f..1ad465da3 100644
--- a/app/assets/stylesheets/conversation.css
+++ b/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,');
- 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,');
- }
- }
}
.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;
}
}
diff --git a/app/assets/stylesheets/search.css b/app/assets/stylesheets/search.css
index 8bf7f3316..6ae4c0052 100644
--- a/app/assets/stylesheets/search.css
+++ b/app/assets/stylesheets/search.css
@@ -1,6 +1,7 @@
@layer components {
.search {
--gap: 4vmin;
+ --width: 80ch;
display: flex;
flex-direction: column;
diff --git a/app/javascript/controllers/conversation/messages_controller.js b/app/javascript/controllers/conversation/messages_controller.js
index 05ea65979..4d484ee2d 100644
--- a/app/javascript/controllers/conversation/messages_controller.js
+++ b/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) {
diff --git a/app/views/bar/_bar.html.erb b/app/views/bar/_bar.html.erb
index cee2a95dd..3ae980154 100644
--- a/app/views/bar/_bar.html.erb
+++ b/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",
diff --git a/app/views/conversations/_composer.html.erb b/app/views/conversations/_composer.html.erb
index 6b353718b..058174d56 100644
--- a/app/views/conversations/_composer.html.erb
+++ b/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: "
diff --git a/app/views/searches/_form.html.erb b/app/views/searches/_form.html.erb
index 6013cb8a3..e5b125516 100644
--- a/app/views/searches/_form.html.erb
+++ b/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: {