Responsive field label layout in the default card template (CS-11384)#5527
Open
burieberry wants to merge 13 commits into
Open
Responsive field label layout in the default card template (CS-11384)#5527burieberry wants to merge 13 commits into
burieberry wants to merge 13 commits into
Conversation
Contributor
Preview deploymentsHost Test Results 1 files ±0 1 suites ±0 2h 58m 24s ⏱️ - 3m 7s Results for commit 519b497. ± Comparison against earlier commit 2a8bbe8. Realm Server Test Results 1 files 1 suites 15m 58s ⏱️ Results for commit f8b5010. |
burieberry
force-pushed
the
cs-11384-stack-edit-labels
branch
from
July 16, 2026 21:34
44c2fc9 to
f8b5010
Compare
burieberry
changed the title
burieberry
marked this pull request as ready for review
July 16, 2026 21:37
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f8b501052b
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
lukemelia
approved these changes
Jul 17, 2026
The default edit template renders top-level fields with FieldContainer's horizontal layout, which reserves a minmax(8rem, 25%) label column and leaves little room for inputs in narrow stack items. Make the edit template an inline-size query container and switch the horizontal FieldContainers to a stacked label-over-input layout below 400px. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…eakpoint Horizontal fields in the default isolated/edit template now use flex-wrap: each label stays beside its input until the field's content area would drop below 14rem, then wraps above it. A per-field container query zeroes the label's alignment padding exactly when it wraps. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
When a field stacks, the label previously kept its 25% flex-basis, so multi-word labels text-wrapped inside the narrow label column. The wrapped-state container query now sets flex-basis: 100% so the label spans its own line. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Isolated fields render text rather than form controls, so the label's input-alignment padding pushed it below the content's first line. Zero that padding in isolated format and top-align the content instead of centering it. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Only fields whose editor is a single form control (primitive, non-computed contains fields) get a <label> wrapper; compound and linked editors contain buttons that an implicit label association would activate when the label text is clicked. Also tidies isolated-format content outline spacing and thumbnail-toggle margins. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
An implicit label association is only safe when a field's editor is a single form control, and the primitive-field gate could not guarantee that (e.g. BooleanField's radio-group editor renders its own labels), so edit-format field containers render as plain divs again. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The card-info editor's preview toggle now sits in normal flow, so the extra header top padding and flex-start alignment that cleared its old absolute position are gone; padding and hr color route through scoped custom properties like the default card template's. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The thumbnail picker renders clear/select buttons alongside its input, so its field container stays a plain div like the other edit-format fields. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The notes footer is a child of .default-card-template--inner, which also carries the format class, so the direct-child selector matches there. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
burieberry
force-pushed
the
cs-11384-stack-edit-labels
branch
from
July 17, 2026 21:41
2a8bbe8 to
519b497
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Improves how the default isolated/edit template lays out field labels at narrow widths, and reworks the card-info editor.
flex-wrapinstead of a fixed 425px breakpoint: a label stays beside its input until the field's content area would drop below 14rem, then wraps above it. Each field decides from its own available space, so nested fields and edit-format padding are handled automatically. A per-field container query keeps the stacked state in sync with the wrap point — wrapped labels take the full line (no text wrapping inside the label column) and drop the input-alignment padding.- Semantic<label>wrappers, safely gated. Edit-format fields whose editor is a single form control (primitive, non-computed contains fields) render inside a<label>. Compound and linked editors keep adiv— an implicit label association would forward label clicks to their first button (e.g. remove on a linksTo field). Covered by a new integration test.Screenshots
Note: Please pay attention to before & after of standard field, linked field, compound field for edit and isolated templates, and provide your opinion. I kept the cardInfo section horizontally oriented with some vertical fields, but made it more compact.
A. Edit View (Standard Template):
Before & After:
B. Isolated View (Standard Template):
Before & After:
