Replace inline × with external trash icon on asset rows
Moves the remove button back outside the input field to avoid the
visual ambiguity with a clear-field control, and swaps the × glyph
for a trash SVG icon matching the existing Feather-style icon set.
diff --git a/lib/views/capture.rb b/lib/views/capture.rb
index 69d4155..e63bd9f 100644
--- a/lib/views/capture.rb
+++ b/lib/views/capture.rb
@@ -135,7 +135,7 @@ module Domus
class: "btn-remove-asset",
"x-show": "assetNames[i] || assetNames.length > 1",
"@click": "removeAsset(i)"
- ) { plain "×" }
+ ) { icon("trash") }
end
end
button(
diff --git a/public/app.css b/public/app.css
index 751a436..2ff05cf 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,7 +256,6 @@ 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);
@@ -272,19 +271,14 @@ html, body {
}
.btn-remove-asset {
- position: absolute;
- right: var(--space-3xs);
- top: 50%;
- transform: translateY(-50%);
- width: 22px;
- height: 22px;
+ flex: none;
+ width: 28px;
+ height: 28px;
padding: 0;
border: none;
- border-radius: 50%;
+ border-radius: calc(var(--radius) - 4px);
background: transparent;
color: var(--ink-3);
- font-size: var(--step--1);
- line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
diff --git a/public/icons/trash.svg b/public/icons/trash.svg
new file mode 100644
index 0000000..4e480fd
--- /dev/null
+++ b/public/icons/trash.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+ <polyline points="3 6 5 6 21 6"/>
+ <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>
+</svg>