diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css
index ab390d71e..f5b592485 100644
--- a/app/assets/stylesheets/bubbles.css
+++ b/app/assets/stylesheets/bubbles.css
@@ -351,31 +351,42 @@
}
.bubble__title {
- -webkit-line-clamp: var(--lines, 4);
- -webkit-box-orient: vertical;
- display: -webkit-box;
- font-size: 9cqi;
- line-height: 1.2;
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
margin: auto;
- max-block-size: 60cqi;
- max-inline-size: 60cqi;
- overflow: hidden;
- text-overflow: clip;
- white-space: normal;
-
+ max-block-size: 90cqi;
+ max-inline-size: 70cqi;
+
.windshield & {
pointer-events: none;
}
a {
color: var(--splat-color);
+
+ &.bubble__title-rendered {
+ -webkit-line-clamp: var(--lines, 4);
+ -webkit-box-orient: vertical;
+ display: -webkit-box;
+ font-size: 9cqi;
+ font-weight: 800;
+ line-height: 1.2;
+ overflow: hidden;
+ text-overflow: clip;
+ white-space: normal;
+ }
}
textarea {
--input-color: var(--bubble-color);
+ --input-border-radius: 0;
+
+ font-size: 9cqi;
+ font-weight: 800;
+ line-height: 1.2;
- hyphens: none;
-
&::selection {
background-color: var(--bubble-color);
color: var(--color-ink-reversed);
diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index a151fd241..35a53dec5 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -12,10 +12,13 @@
}
.comment {
- max-inline-size: 66ch;
margin-block: calc(var(--comment-padding-block) * 0.3);
margin-inline: 0 auto;
position: relative;
+
+ &:not(.comment--new) {
+ max-inline-size: 66ch;
+ }
}
.comment--new {
diff --git a/app/views/bubbles/_bubble.html.erb b/app/views/bubbles/_bubble.html.erb
index f45b98c41..134b83352 100644
--- a/app/views/bubbles/_bubble.html.erb
+++ b/app/views/bubbles/_bubble.html.erb
@@ -10,17 +10,17 @@
<% if bubble.creating? %>
<%= form_with model: bubble, url: bucket_bubble_path(bubble.bucket, bubble), data: { controller: "auto-save" } do |form| %>
- <%= form.text_area :title, placeholder: "Name it…", class: "input txt-align-center full-width borderless", autofocus: bubble.title.blank?, data: { action: "auto-save#change blur->auto-save#submit keydown.enter->auto-save#submit:prevent keydown.ctrl+enter->auto-save#submit:prevent" }, rows: 5 %>
+ <%= form.text_area :title, placeholder: "Name it…", class: "input input--textara txt-align-center full-width borderless bubble__title-rendered", autofocus: bubble.title.blank?, data: { action: "auto-save#change blur->auto-save#submit keydown.enter->auto-save#submit:prevent keydown.ctrl+enter->auto-save#submit:prevent" }, rows: 5 %>
<% end %>
<% else %>
<%= turbo_frame_tag bubble, :edit do %>
- <%= link_to bubble_title(bubble), edit_bucket_bubble_path(bubble.bucket, bubble), class: "txt-undecorated" %>
-
-
- <%= render "bubbles/tags", bubble: bubble %>
-
+ <%= link_to bubble_title(bubble), edit_bucket_bubble_path(bubble.bucket, bubble), class: "txt-undecorated bubble__title-rendered" %>
<% end %>
<% end %>
+
+
+ <%= render "bubbles/tags", bubble: bubble %>
+
diff --git a/app/views/bubbles/edit.html.erb b/app/views/bubbles/edit.html.erb
index 57bbed5c1..d84b50e2d 100644
--- a/app/views/bubbles/edit.html.erb
+++ b/app/views/bubbles/edit.html.erb
@@ -1,12 +1,12 @@
<%= turbo_frame_tag @bubble, :edit do %>
<%= form_with model: @bubble, url: bucket_bubble_path(@bubble.bucket, @bubble), class: "flex flex-column justify-center gap full-width", data: { controller: "form" } do |form| %>
<%= form.label :title, class: "flex flex-column justify-center align-center" do %>
- <%= form.text_area :title, class: "input input--textara txt-align-center full-width borderless",
- required: true, rows: 5, autofocus: true, placeholder: "Name it…",
- data: { action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel focus->form#select" },
+ <%= form.text_area :title, class: "input input--textara txt-align-center full-width borderless bubble__title-rendered",
+ required: true, autofocus: true, placeholder: "Name it…",
+ data: { action: "keydown.enter->form#submit:prevent keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel focus->form#select" },
style: "color: var(--spat-color); --input-border-radius: 0" %>
<% end %>
- <%= form.button "Save", class: "btn btn--reversed txt-small center", type: :submit do %>
+ <%= form.button "Save", class: "btn btn--reversed txt-small center", type: :submit, hidden: true do %>
<%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
Save
<% end %>
diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb
index 7d69ddfa1..5e13be7d8 100644
--- a/app/views/bubbles/show.html.erb
+++ b/app/views/bubbles/show.html.erb
@@ -92,17 +92,21 @@
<%= render "bubbles/bubble", bubble: @bubble %>
-
- <% if @bubble.creating? %>
-
- <%= button_to "Create bubble", bucket_bubble_publish_path(@bubble.bucket, @bubble), class: "btn btn--reversed" %>
- <%= button_to "Save as draft", bucket_bubble_path(@bubble.bucket, @bubble), name: "bubble[status]", value: "drafted", method: :put, class: "btn btn--plain borderless fill-transparent" %>
-
- <% elsif !@bubble.drafted? %>
+
+ <% unless @bubble.drafted? || @bubble.creating? %>
<%= render "bubbles/pop_toggle", bubble: @bubble %>
<% end %>
- <%= render "bubbles/messages", bubble: @bubble %>
+
+ <%= render "bubbles/messages", bubble: @bubble %>
+
+
+ <% if @bubble.creating? %>
+
+ <%= button_to "Save as draft", bucket_bubble_path(@bubble.bucket, @bubble), name: "bubble[status]", value: "drafted", method: :put, class: "btn btn--plain borderless fill-transparent" %>
+ <%= button_to "Create bubble", bucket_bubble_publish_path(@bubble.bucket, @bubble), class: "btn btn--reversed" %>
+
+ <% end %>