nicer layout for nested links in forms

app/views/application/_link_fields.html.erb

@@ -1,5 +1,5 @@
 <%= cocooned_item class: "row mb-3 input-group" do %>
-  <%= f.label :url, class: "col-sm-2 col-form-label" %>
+  <%= f.label :url, class: "col col-auto col-form-label" %>
   <%= f.url_field :url, class: "form-control col-auto", placeholder: "Any related web page" %>
   <%= cocooned_remove_item_button icon(:trash, "Delete"), f, class: "btn btn-outline-danger col-auto" %>
 <% end %>

app/views/application/_links_form.html.erb

@@ -1,13 +1,20 @@
-<%= cocooned_container id: "cocooned-links" do %>
-  <%= form.fields_for :links do |f| %>
-    <%= render "link_fields", f: f %>
-  <% end %>
-<% end %>
 <div class="row mb-3">
-  <%= tag.div class: "col-auto offset-sm-2 ps-0" do %>
-    <%= cocooned_add_item_button t(".add"), form, :links,
-          class: "btn btn-secondary",
-          insertion_node: "#cocooned-links",
-          insertion_method: "append" %>
-  <% end %>
+  <div class="col col-sm-2 col-form-label">
+    <%= t(".links") %>
+  </div>
+  <div class="col col-sm-10 border p-3">
+    <%= cocooned_container id: "cocooned-links" do %>
+      <%= form.fields_for :links do |f| %>
+        <%= render "link_fields", f: f %>
+      <% end %>
+    <% end %>
+    <div class="row mb-3">
+      <%= tag.div class: "col-auto offset-sm-2 ps-0" do %>
+        <%= cocooned_add_item_button t(".add"), form, :links,
+              class: "btn btn-secondary",
+              insertion_node: "#cocooned-links",
+              insertion_method: "append" %>
+      <% end %>
+    </div>
+  </div>
 </div>

config/locales/en.yml

@@ -25,7 +25,7 @@ en:
         storage_service: Storage Service
         tag_regex: Required Tags
       link:
-        url: Link
+        url: URL
       model:
         caption: Caption
         collection_id: Collection
@@ -224,6 +224,7 @@ en:
       version: Version
     links_form:
       add: add another link
+      links: Web Links
     navbar:
       account: Account
       activity: Activity