feat(settings): Rework personal info into a sectioned single-column layout - #61358
feat(settings): Rework personal info into a sectioned single-column layout#61358nfebe wants to merge 9 commits into
Conversation
pringelmann
left a comment
pringelmann
left a comment
There was a problem hiding this comment.
Good overall! Left some comments, and two general points:
- Would be nice to get these changes covered by tests. I know we didn't have any to begin with, but this might be a good opportunity to add some. Even just getting an LLM to write tests that cover the critical happy paths.
- The max width of the form inputs feels a bit too wide. Maybe set the cap a bit lower? Just my opinion :) cc @kra-mo
kra-mo
left a comment
kra-mo
left a comment
There was a problem hiding this comment.
+963
-1,311Neat :D
As @pringelmann said, it is a bit too wide, but also, it should be center-aligned instead of left-aligned.
Otherwise, looks good from the design side!
|
Although, are the vertical lines everywhere a video compression glitch or are there just separator lines in a bunch of places? If there are, they are not needed. The layout is quite clear without them already. |
|
Oh but actually, I forgot that according the original mockup, "Language & locale" and "Profile & contact" should be two separate pages, replacing "Personal info". |
There was a problem hiding this comment.
Agree with Laura’s and Peter’s review on the width, and also on the center-alignment.
Important to note about the center alignment is that it shouldn’t center in the app-content on the right, but generally based on the viewport. So it should be nicely centered below the search bar in the header.
And as per discussion with @kra-mo, it would be best to put layouting logic like that in the components, because this will be the case for most or all settings sections.
d437fae to
fbd576f
Compare
fbd576f to
66e8907
Compare
Screencast.From.2026-06-30.13-19-47.webm |
66e8907 to
e8b9366
Compare
susnux
left a comment
susnux
left a comment
There was a problem hiding this comment.
Overall looks good no blockers from my side
There was a problem hiding this comment.
Is there a specific reason to make this its own section?
I mean not visually but from the settings API.
Because you can also just put multiple sections, which belong to each other, into one settings entry point.
So you do not need to mount X apps but only one Vue app needs to be mounted.
There was a problem hiding this comment.
Laura's specification needs two separate pages, and two pages needs two Sections. There is no way to get two sidebar entries from one Section. They are separate pages, so only one entry point ever loads.
I'd say let's just make it consistent with the in-app search dialog. |
|
I think the centering is fine, the layouting would be too complex for a one-off otherwise. Let's put it in a component somewhere down the line. |
That would be 700px |
e8b9366 to
682c22c
Compare
…ayout Personal info is reorganized into clear sections in a single column instead of a multi-column grid of separately mounted widgets, with fields adopting a consistent modern look in line with the settings redesign. Signed-off-by: nfebe <fenn25.fn@gmail.com>
…over The per-field privacy control now sets both profile visibility and federation scope in one popover, replacing the separate visibility section. Signed-off-by: nfebe <fenn25.fn@gmail.com>
…area token Two profile components left unused after the redesign are removed, and the per-field privacy controls now derive their width from the shared clickable-area variable instead of a hard-coded size. Signed-off-by: nfebe <fenn25.fn@gmail.com>
…ipt setup The combined visibility and scope control is rewritten with the Composition API and typed script setup, matching the rest of the redesigned settings and easing the future runtime migration. Signed-off-by: nfebe <fenn25.fn@gmail.com>
Adds happy-path coverage for the combined privacy control: rendering the popover, persisting a scope change, and rolling back when saving fails. Signed-off-by: nfebe <fenn25.fn@gmail.com>
Personal settings render in a width-capped, centered column instead of stretching across the content area. Per-field action controls sit in a side gutter so every field, the profile card, and the language and locale dropdowns share one width, and the community footer is centered to match. Signed-off-by: nfebe <fenn25.fn@gmail.com>
The single Personal info page is replaced by two separate navigation entries and pages, Profile & contact and Language & locale, so each area is its own settings page. Both pages expose the same account data, so the existing field components keep working unchanged. Signed-off-by: nfebe <fenn25.fn@gmail.com>
The search field sat slightly left of centre, because the spacing after the last header entry widened one side of the header against the other. It also rendered narrower than the width it declares, since a proportional cap resolved against the field's own width. Its position is now derivable, so page content can line up with it. The field is 32px wider on desktop as a result.
The single-column body centred itself inside the app content, which the navigation pushes off the centre the search sits on, so the two never lined up. It now starts where the search field starts, and falls back to centring where the navigation overlays the content instead of sitting beside it.
682c22c to
ad64000
Compare
|
@kra-mo So it now aligns with the search bar, but but the search-bar is shorter... I was wondering if it will be better to make it same width as the search as its just wide inputs but this looks good already too. cc: @jancborchardt Screencast.From.2026-08-07.05-23-11.webm |
kra-mo
left a comment
kra-mo
left a comment
There was a problem hiding this comment.
Indeed, looks better :)
And yes, I guess it would probably make sense to match its max-width to that of the search bar. Could maybe even be a variable somewhere.
Three more pieces of feedback:
- This should be as wide as all the other inputs
- The "Enter your date of birth" label is redundant
- Some of the icons are not aligned with the input fields
Otherwise, looks good from what I can see so far.
|
Ok, I tested it locally and have some more feedback:
|
5 participants
Personal info is reorganized into clear sections in a single column instead of a multi-column grid of separately mounted widgets, with fields adopting a consistent modern look in line with the settings redesign.
Resolves: #57008
Before
After
Screencast.From.2026-06-16.22-51-29.webm