From 9e4f2d00eec2f10a815532474f9ede05477685c4 Mon Sep 17 00:00:00 2001 From: Andrew Ohnstad Date: Thu, 18 Dec 2025 00:30:55 -0500 Subject: [PATCH 1/3] Fix drag and drop in codeplug layout creation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The issue was that when the CSV Columns list-group was empty, it had zero height, leaving no visible drop zone for users to drop fields onto. Changes: - Added min-height: 150px to the list-group to ensure a visible drop zone - Added dashed border to visually indicate the drop area - Added visual feedback (blue border, light blue background) when dragging - Border becomes solid when items are present Fixes #142 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- app/views/codeplug_layouts/_form.html.erb | 27 +++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/app/views/codeplug_layouts/_form.html.erb b/app/views/codeplug_layouts/_form.html.erb index 49514ac..1e6c985 100644 --- a/app/views/codeplug_layouts/_form.html.erb +++ b/app/views/codeplug_layouts/_form.html.erb @@ -168,6 +168,33 @@ max-width: 200px; } + /* Ensure the list-group has a minimum height for dropping even when empty */ + .layout-builder-container .list-group { + min-height: 150px; + border: 2px dashed #dee2e6; + border-radius: 0.25rem; + padding: 0.5rem; + transition: border-color 0.2s, background-color 0.2s; + } + + .layout-builder-container .list-group:empty { + display: flex; + align-items: center; + justify-content: center; + } + + /* Highlight the drop zone when dragging over it */ + .layout-builder-container .list-group.sortable-ghost-class, + .layout-builder-container .list-group:has(.sortable-ghost) { + border-color: #0d6efd; + background-color: #f8f9ff; + } + + .layout-builder-container .list-group:not(:empty) { + border-style: solid; + border-color: #dee2e6; + } + .layout-builder-container .list-group:not(:empty) + .empty-message { display: none; } From f7924b22624339140e0deef9f044662c0ddadaae Mon Sep 17 00:00:00 2001 From: Andrew Ohnstad Date: Thu, 18 Dec 2025 00:35:49 -0500 Subject: [PATCH 2/3] Add spacing between duplicate badge and field path text MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added me-2 (margin-right) to the duplicate warning badge so there's visual separation between the badge and the field path text. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- app/javascript/controllers/field_picker_controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/controllers/field_picker_controller.js b/app/javascript/controllers/field_picker_controller.js index b1ebf00..8113ef8 100644 --- a/app/javascript/controllers/field_picker_controller.js +++ b/app/javascript/controllers/field_picker_controller.js @@ -222,7 +222,7 @@ export default class extends Controller { if (headerCounts[header] > 1) { field.classList.add("border-warning") const warning = document.createElement("span") - warning.className = "duplicate-warning badge bg-warning text-dark ms-2" + warning.className = "duplicate-warning badge bg-warning text-dark ms-2 me-2" warning.textContent = "Duplicate" headerInput.after(warning) } From 3540af3f6761c11c8eac5169a514f110f8357370 Mon Sep 17 00:00:00 2001 From: Andrew Ohnstad Date: Thu, 18 Dec 2025 01:01:58 -0500 Subject: [PATCH 3/3] Make drop zone fill entire card body for easier drag-and-drop MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Uses flexbox to make the drop zone expand to fill all available space in the card, so users can drop fields anywhere in the card body area rather than targeting a small inner box. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- app/views/codeplug_layouts/_form.html.erb | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/views/codeplug_layouts/_form.html.erb b/app/views/codeplug_layouts/_form.html.erb index 1e6c985..bd6087c 100644 --- a/app/views/codeplug_layouts/_form.html.erb +++ b/app/views/codeplug_layouts/_form.html.erb @@ -81,8 +81,8 @@ Drag to reorder -
-
+
+
<%# Layout fields will be rendered by JavaScript %>
@@ -168,8 +168,9 @@ max-width: 200px; } - /* Ensure the list-group has a minimum height for dropping even when empty */ + /* Make the list-group fill the entire card body for easier dropping */ .layout-builder-container .list-group { + flex: 1; min-height: 150px; border: 2px dashed #dee2e6; border-radius: 0.25rem;