Make bubble title editing a little nicer

app/javascript/controllers/form_controller.js

@@ -15,6 +15,10 @@ export default class extends Controller {
     event.preventDefault()
   }
 
+  select(event) {
+    event.target.select()
+  }
+
   showPicker(event) {
     if ("showPicker" in HTMLInputElement.prototype) {
       event.target.showPicker()

app/views/bubbles/edit.html.erb

@@ -1,10 +1,10 @@
 <%= turbo_frame_tag @bubble, :edit do %>
   <%= form_with model: @bubble, class: "flex flex-column 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 unpad full-width borderless",
+      <%= 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" },
-          style: "color: var(--spat-color)" %>
+          data: { action: "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.submit "Save", hidden: true %>
     <%= link_to "Close editor and discard changes", bubble_path(@bubble), data: { form_target: "cancel" }, hidden: true %>