Improve layout of select questions with list-* appearances
- Dominant language
- TypeScript
- Stars
- 38
- Forks
- 22
- PR merge metrics
- No merged PRs in 30d
Description
1- Alignment of column heading and radio button is out after adding `question-container` for showing red background for invalid questions.

2- We also need to test how the `Group` component with `field-list` appearance renders when there are non-select questions with select questions (with list/nolabel-list appearances).
3- From https://github.com/getodk/web-forms/pull/164#discussion_r1690286434
> However, thinking about whether it is actually dynamic got me to take a closer look at tableLayout. It's also a bit surprising to me that it's computed, at least with the computation it performs. I wouldn't expect it to ever change state (although I admit this is sort of a downside of conveying children as state/reactive regardless of the parent node's type). On the other hand, the way I would expect it to be dynamic is if it took relevance into consideration.
>
> I don't want to address that now, but I do think we should file an issue. And when we get there, I'd like to think about how we can generalize relevance-aware logic: partly so it's composable/reusable because there are probably other places we'd want to do something similar, but mainly as a way to help us remember that relevance is a thing to consider in conditional presentation logic of this sort.
From https://github.com/getodk/web-forms/pull/164#issuecomment-2297309308
> (Not directly related to PR, want to track as it’s come up in recent conversation) FieldListTable naming is confusing. I think we’ve both repeatedly associated it with the field-list appearance, but it is not.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the select-question cases with list and nolabel-list appearances, including a Group with field-list alongside non-select questions. Inspect the question-container alignment and the tableLayout or FieldListTable behavior described here. Done means the heading and radio button align correctly and the listed combinations render as expected; the naming concern should also be clarified.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100