Polish bubble title inputs for WYSIWYG

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

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 {

app/views/bubbles/_bubble.html.erb

@@ -10,17 +10,17 @@
       <h1 class="bubble__title">
         <% 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" %>
-
-            <div class="bubble__tags flex flex-wrap align-end justify-center gap-half txt-tight-lines">
-              <%= render "bubbles/tags", bubble: bubble %>
-            </div>
+            <%= link_to bubble_title(bubble), edit_bucket_bubble_path(bubble.bucket, bubble), class: "txt-undecorated bubble__title-rendered" %>
           <% end %>
         <% end %>
+
+        <div class="bubble__tags flex flex-wrap align-end justify-center gap-half txt-tight-lines flex-item-no-shrink pad-inline-double">
+          <%= render "bubbles/tags", bubble: bubble %>
+        </div>
       </h1>
     </div>
 

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 %>
       <span class="for-screen-reader">Save</span>
     <% end %>

app/views/bubbles/show.html.erb

@@ -92,17 +92,21 @@
   <div class="bubble__perma flex justify-center center">
     <%= render "bubbles/bubble", bubble: @bubble %>
   </div>
-
-  <% if @bubble.creating? %>
-    <div class="bubble__actions-container center border-radius pad flex-inline align-center justify-center gap pad-inline-double" style="--bubble-color: <%= @bubble.color %>">
-      <%= 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" %>
-    </div>
-  <% elsif !@bubble.drafted? %>
+  
+  <% unless @bubble.drafted? || @bubble.creating? %>
     <%= render "bubbles/pop_toggle", bubble: @bubble %>
   <% end %>
 
-  <%= render "bubbles/messages", bubble: @bubble %>
+  <div style="margin-block-start: calc(var(--block-space) * -1);">
+    <%= render "bubbles/messages", bubble: @bubble %>
+  </div>
+
+  <% if @bubble.creating? %>
+    <div class="bubble__actions-container center border-radius pad flex align-center justify-space-between gap pad-inline-double" style="--bubble-color: <%= @bubble.color %>; margin-block-start: calc(var(--block-space) * -2);">
+      <%= 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" %>
+    </div>
+  <% end %>
 </div>
 
 <div class="flex align-start justify-end">