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;
|
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;
|
display: flex;
|
||||||
gap: 0.4rem;
|
gap: 0.4rem;
|
||||||
margin-top: 0.75rem;
|
margin-top: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-list__new input {
|
.field-row input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
font: inherit;
|
font: inherit;
|
||||||
@@ -767,7 +770,7 @@ h1 {
|
|||||||
color: var(--text);
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-list__new button[type='submit'] {
|
.field-row button[type='submit'] {
|
||||||
flex: none;
|
flex: none;
|
||||||
padding: 0.4rem 0.7rem;
|
padding: 0.4rem 0.7rem;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
|
|||||||
@@ -198,23 +198,20 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
|
|||||||
<section class="config-section">
|
<section class="config-section">
|
||||||
<h2>Project name</h2>
|
<h2>Project name</h2>
|
||||||
|
|
||||||
<form class="form" @submit.prevent="onRenameProject">
|
<form class="field-row" @submit.prevent="onRenameProject">
|
||||||
<label>
|
<input
|
||||||
<span>Name</span>
|
v-model="nameDraft"
|
||||||
<input v-model="nameDraft" type="text" maxlength="255" required />
|
type="text"
|
||||||
<small v-if="renameError?.fieldError('title')" class="field-error">
|
maxlength="255"
|
||||||
{{ renameError.fieldError('title') }}
|
required
|
||||||
</small>
|
placeholder="Name"
|
||||||
</label>
|
aria-label="Project name"
|
||||||
|
/>
|
||||||
<p v-if="renameError && Object.keys(renameError.details).length === 0" class="form-error">
|
|
||||||
{{ renameError.message }}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<button type="submit" :disabled="renaming || nameDraft.trim() === project.title">
|
<button type="submit" :disabled="renaming || nameDraft.trim() === project.title">
|
||||||
{{ renaming ? 'Saving…' : 'Save name' }}
|
{{ renaming ? 'Saving…' : 'Save name' }}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
<p v-if="renameError" class="form-error">{{ renameError.message }}</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="config-section">
|
<section class="config-section">
|
||||||
@@ -251,7 +248,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
|
|||||||
</template>
|
</template>
|
||||||
</draggable>
|
</draggable>
|
||||||
|
|
||||||
<form class="status-list__new" @submit.prevent="onAddStatus">
|
<form class="field-row" @submit.prevent="onAddStatus">
|
||||||
<input
|
<input
|
||||||
v-model="newStatusName"
|
v-model="newStatusName"
|
||||||
type="text"
|
type="text"
|
||||||
|
|||||||
Reference in New Issue
Block a user