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:
+6
-3
@@ -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;
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user