noNameWEB/redmine-theme-tonalmine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: align form field widths across the app

Browse Source 
From 900px up, selects and text fields fill their column up to 480px,
numbers and dates are 140px, and long text stays full width, so every
form shares one right edge. Below 900px every field runs full width.
Overrides core's id-pinned widths (% Done, mobile dates, settings
textareas). check-form-alignment.mjs now checks widths at 1440, 1024
and 390px across all settings tabs and admin forms.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-10-05 14:12:44 +02:00
co-authored by Claude Opus 5.5
parent 20b7269df2
commit db58c6e86f
3 changed files with 97 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tonalmine/stylesheets/components.css
+23 -5
View File
@@ -178,18 +178,36 @@ blockquote { border-inline-start: 4px solid var(--md-sys-color-outline-variant);
/* Core gives wide form fields 90%, 95% or 99% and caps .tabular fields at 95%. They all
run to the content edge, so the right edges in a form line up */
.tabular :is(input, select) { max-inline-size: 100%; }
/* Core pins these to 90% by id */
#user_login, #user_firstname, #user_lastname, #user_mail, #my_account_form select, #user_form select { inline-size: 100%; }
.tabular textarea, textarea.wiki-edit, textarea.text_cf, input.string_cf, input.link_cf,
textarea#custom_field_possible_values, textarea#custom_field_default_value,
input#issue_subject, input#document_title, input#content_comments, input#time_entry_comments,
.tabular .jstTabs, .tabular .wiki-preview, .jstBlock .jstTabs, .jstBlock .wiki-preview { inline-size: 100%; box-sizing: border-box; }
/* Desktop and tablet landscape: three field widths, so the right edges in a form line up.
Standard: selects and text fields fill the column up to 480px (wider than core's widest,
size=60). Compact: numbers and dates, 140px fits a date with its picker. Full: long text.
Below 900px core's responsive.css runs every field full width. */
@media screen and (min-width: 900px) {
.tabular :is(select, input:is([type="text"], [type="password"], [type="email"], [type="url"], [type="search"], [type="tel"], :not([type]))) {
inline-size: 100%;
max-inline-size: 480px;
box-sizing: border-box;
}
.tabular :is(input[type="number"], input[type="date"], input.date, input:is([size="1"], [size="2"], [size="3"], [size="4"], [size="5"], [size="6"])) { inline-size: 140px; }
/* The icon button after a select (new category, new version) stays on its line */
.tabular select:has(+ .icon-only) { inline-size: calc(100% - 36px); max-inline-size: calc(480px - 36px); }
}
html .tabular textarea, html textarea.wiki-edit, html textarea.text_cf, html input.string_cf, html input.link_cf,
html textarea#custom_field_possible_values, html textarea#custom_field_default_value,
html input#issue_subject, html input#document_title, html input#content_comments, html input#time_entry_comments,
html .tabular .jstTabs, html .tabular .wiki-preview, html .jstBlock .jstTabs, html .jstBlock .wiki-preview,
html .tabular.settings :is(textarea, .jstTabs, .wiki-preview) { inline-size: 100%; max-inline-size: none; box-sizing: border-box; }
/* Core pins % Done to 95px by id; it follows the standard width like the other selects */
html select#issue_done_ratio { inline-size: 100%; }
/* An invalid field keeps the error colour while focused */
.tabular label.error + :is(input, select, textarea):focus {
border-color: var(--md-sys-color-error);
outline-color: var(--md-sys-color-error);
}
/* Rows without a field start at the top, like a row with only links (two-factor auth) */
.tabular p:not(:has(input:not([type=hidden]), select, textarea)) > label:not(.floating):not(.block):not(.inline):not(.no-css) { padding-block-start: 0; }
.tabular p:not(:has(input:not([type=hidden]), select, textarea, .nm-segmented)) > label:not(.floating):not(.block):not(.inline):not(.no-css) { padding-block-start: 0; }
/* Cancel next to a submit button */
input[type="submit"] + a { margin-inline-start: 8px; }