Tidy asset input layout
Move the remove × inside the input on the right edge instead of
floating it in a separate column, and only show it when the field has
content or there's more than one row. Removing the last row keeps one
empty input so there's always somewhere to type.
change
commit 0d0a7673353f174583a21d31f3a995053557c6af
author Claude <noreply@anthropic.com>
date
parent 63d2ab15
diff --git a/lib/views/capture.rb b/lib/views/capture.rb
index d5a85ae..69d4155 100644
--- a/lib/views/capture.rb
+++ b/lib/views/capture.rb
@@ -133,7 +133,8 @@ module Domus
                       button(
                         type: "button",
                         class: "btn-remove-asset",
-                        "@click": "assetNames.splice(i, 1)"
+                        "x-show": "assetNames[i] || assetNames.length > 1",
+                        "@click": "removeAsset(i)"
                       ) { plain "×" }
                     end
                   end
diff --git a/public/app.css b/public/app.css
index 81b30f2..751a436 100644
--- a/public/app.css
+++ b/public/app.css
@@ -247,8 +247,8 @@ html, body {
 }
 
 .asset-input-row {
+  position: relative;
   display: flex;
-  gap: var(--space-2xs);
   align-items: center;
 }
 
@@ -256,6 +256,7 @@ html, body {
   flex: 1;
   min-width: 0;
   padding: var(--space-2xs) var(--space-xs);
+  padding-right: calc(var(--space-xs) + 22px);
   border: 1px solid var(--line-2);
   border-radius: calc(var(--radius) - 2px);
   font-family: var(--font-ui);
@@ -271,15 +272,18 @@ html, body {
 }
 
 .btn-remove-asset {
-  flex: none;
-  width: 28px;
-  height: 28px;
+  position: absolute;
+  right: var(--space-3xs);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 22px;
+  height: 22px;
   padding: 0;
   border: none;
   border-radius: 50%;
   background: transparent;
   color: var(--ink-3);
-  font-size: var(--step-0);
+  font-size: var(--step--1);
   line-height: 1;
   cursor: pointer;
   display: flex;
diff --git a/public/capture.js b/public/capture.js
index a76ae34..f7084b6 100644
--- a/public/capture.js
+++ b/public/capture.js
@@ -33,6 +33,11 @@ function captureApp() {
       });
     },
 
+    removeAsset(i) {
+      this.assetNames.splice(i, 1);
+      if (this.assetNames.length === 0) this.assetNames.push('');
+    },
+
     onSubmit() {
       const inactive = this.activeRef === 'cameraInput' ? this.$refs.fileInput : this.$refs.cameraInput;
       inactive.disabled = true;