Skip to content

fix(presets): align list editor row delete button with row content#1094

Merged
Transmigration-zhou merged 1 commit into
mainfrom
fix/list-editor-delete-btn-alignment
Jul 6, 2026
Merged

fix(presets): align list editor row delete button with row content#1094
Transmigration-zhou merged 1 commit into
mainfrom
fix/list-editor-delete-btn-alignment

Conversation

@Transmigration-zhou

Copy link
Copy Markdown
Contributor

Problem

The list editor's per-row delete button is rendered with float-right ma-2, which pins it to the card's top-right corner regardless of the row height:

  • On rows whose nested fields stack vertically (e.g. a Start/End date pair), the button sits next to the first field only and looks detached from the row.
  • Even on single-field rows it is slightly off the field's vertical center because of the card's asymmetric padding (pt-4 pb-0).

Reported downstream in kakuyasu seller portal (KGM-4586), but it affects every Nested slice field rendered by ListEditorBuilder.

Fix

Lay each row card out with flex instead of float: the content wraps in a flex-grow-1 div and the delete button follows it with align-self-center, so it stays vertically centered against the row content at any row height. Vuetify utility classes only; the click binding is unchanged.

Testing

  • go test ./presets/... passes (including integration).
  • Verified end-to-end in the kakuyasu seller portal (Delivery Unavailable Date editing panel) via a local go.mod replace: on a two-field (Start/End) row the button now centers between the fields, on a single-field row it aligns with the input, and row deletion still works.

Supersedes #1093 (same commit, resubmitted from an in-repo branch now that write access is available).

🤖 Generated with Claude Code

The delete button was floated at the card's top-right regardless of the
row height, so on rows with multiple stacked fields it visually detached
from the row (e.g. sat next to the first field only). Lay each row out
with flex and center the button against the row content instead.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0195isT8XZBhZ3wwcWTYKtgV
@Transmigration-zhou

Copy link
Copy Markdown
Contributor Author

Code review

No issues found. Checked for bugs and CLAUDE.md compliance.

Review notes:

  • Permission guard (h.If(!b.fieldContext.Disabled && hasUpdatePermission, ...)) and the Plaid click-event chain are unchanged by the layout move.
  • The d-flex / flex-grow-1 / align-self-center combination is an established pattern in this package (see presets/section.go), not a novel construct.
  • Existing permission tests only assert mdi-delete presence/ordering, so the DOM restructuring does not affect them.
  • Git history: the button's positioning was changed to position-absolute and reverted back to float-right in Oct 2024 (Feat date picker #676 / Feat validate #712). That reverted attempt took the button out of document flow (could overlap content); this flex layout keeps it in flow in its own column, so the failure mode does not carry over.

🤖 Generated with Claude Code

- If this code review was useful, please react with 👍. Otherwise, react with 👎.

@deepsource-io

deepsource-io Bot commented Jul 6, 2026

Copy link
Copy Markdown

DeepSource Code Review

We reviewed changes in 0dcd26d...ede25cf on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

PR Report Card

Overall Grade   Security  

Reliability  

Complexity  

Hygiene  

Code Review Summary

Analyzer Status Updated (UTC) Details
Go Jul 6, 2026 7:47a.m. Review ↗

Important

AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.

@codecov

codecov Bot commented Jul 6, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.

Files with missing lines Coverage Δ
presets/listeditor.go 78.08% <100.00%> (+0.17%) ⬆️
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@Transmigration-zhou
Transmigration-zhou merged commit 0415f3a into main Jul 6, 2026
11 of 13 checks passed
@Transmigration-zhou
Transmigration-zhou deleted the fix/list-editor-delete-btn-alignment branch July 6, 2026 08:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants