Put the Save name button beside the input, fit to its width

Matches the status 'Add' form immediately below it: renamed the
shared row layout from .status-list__new to .field-row (it now backs
both forms) and switched the project name form to it -- input grows,
button sits to its right sized to its own label instead of stretching
full width underneath. Dropped the visible 'Name' label in favour of
a placeholder + aria-label, mirroring the status form exactly.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-04 21:03:57 +01:00
co-authored by Claude Sonnet 5
parent ea169ebed0
commit ed07ea442d
2 changed files with 17 additions and 17 deletions
+6 -3
View File
@@ -749,13 +749,16 @@ h1 {
cursor: not-allowed;
}
.status-list__new {
/* An input with its submit button beside it (fit to its label text) rather
than below (full width, the plain .form pattern) -- the status "Add" form
and the project name form both use it. */
.field-row {
display: flex;
gap: 0.4rem;
margin-top: 0.75rem;
}
.status-list__new input {
.field-row input {
flex: 1;
min-width: 0;
font: inherit;
@@ -767,7 +770,7 @@ h1 {
color: var(--text);
}
.status-list__new button[type='submit'] {
.field-row button[type='submit'] {
flex: none;
padding: 0.4rem 0.7rem;
font-size: 0.9rem;
+11 -14
View File
@@ -198,23 +198,20 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
<section class="config-section">
<h2>Project name</h2>
<form class="form" @submit.prevent="onRenameProject">
<label>
<span>Name</span>
<input v-model="nameDraft" type="text" maxlength="255" required />
<small v-if="renameError?.fieldError('title')" class="field-error">
{{ renameError.fieldError('title') }}
</small>
</label>
<p v-if="renameError && Object.keys(renameError.details).length === 0" class="form-error">
{{ renameError.message }}
</p>
<form class="field-row" @submit.prevent="onRenameProject">
<input
v-model="nameDraft"
type="text"
maxlength="255"
required
placeholder="Name"
aria-label="Project name"
/>
<button type="submit" :disabled="renaming || nameDraft.trim() === project.title">
{{ renaming ? 'Saving…' : 'Save name' }}
</button>
</form>
<p v-if="renameError" class="form-error">{{ renameError.message }}</p>
</section>
<section class="config-section">
@@ -251,7 +248,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
</template>
</draggable>
<form class="status-list__new" @submit.prevent="onAddStatus">
<form class="field-row" @submit.prevent="onAddStatus">
<input
v-model="newStatusName"
type="text"