From 07f550a264676962dab2ec8d08b1a7e865dc7218 Mon Sep 17 00:00:00 2001
From: James Smith <james@floppy.org.uk>
Date: Wed, 4 Sep 2024 09:22:10 +0100
Subject: [PATCH] nicer layout for nested links in forms

---
 app/views/application/_link_fields.html.erb |  2 +-
 app/views/application/_links_form.html.erb  | 29 +++++++++++++--------
 config/locales/en.yml                       |  3 ++-
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/app/views/application/_link_fields.html.erb b/app/views/application/_link_fields.html.erb
index 8524d9edd..c359ba5d4 100644
--- a/app/views/application/_link_fields.html.erb
+++ b/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 %>
diff --git a/app/views/application/_links_form.html.erb b/app/views/application/_links_form.html.erb
index 1687c2111..e093465a4 100644
--- a/app/views/application/_links_form.html.erb
+++ b/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>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 149172206..7f8fd46d9 100644
--- a/config/locales/en.yml
+++ b/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