Refine files comments design

[quentinguidee]

Motivation

• Currently, the files > about > comments section margins/paddings are a little bit off (more vertical padding than horizontal, and comments are too much spread.

This PR

• Fixes the paddings/margins ;
• Adds a box around the messages making it easier to understand the interface layout quickly ;
• This is more a side effect than something planned, but the input now have more space, so the text fits better in the input for some screen size.

Screenshots

Before/after

Before/after (video)

Enregistrement.de.l.ecran.2021-12-27.a.11.35.36.mov

[marcoambrosini]

I really like how it tidies up things, but I would loose the gray background and play with white space instead to separate the elements

[quentinguidee]

I really like how it tidies up things, but I would loose the gray background and play with white space instead to separate the elements

Something like this?

Screenshot

[jancborchardt]

I really like how it tidies up things, but I would loose the gray background and play with white space instead to separate the elements

Yup, agree with that. :) Otherwise the box separates the comment body text too much from the commenter and timestamp. Also we never use containers like that either in e.g. Talk.

Also, the indentation of the text is intentional (and as usually chat apps with avatars on the side do it), without that it looks quite crowded.
That way the comment text can also be closer to the line of author/timestamp, where it belongs to, instead of having almost the same distance to that as it has to the next comment.

[quentinguidee]

Also, the indentation of the text is intentional (and as usually chat apps with avatars on the side do it), without that it looks quite crowded. That way the comment text can also be closer to the line of author/timestamp, where it belongs to, instead of having almost the same distance to that as it has to the next comment.

Yeah I recognised that and tried to keep it, but I think we're facing a problem here. If the text is aligned with the username like many apps, I think the message should be placed higher ("in the header") :

I think it looks way better like this, but the problem is that NC want 44px height buttons, so the "…" will looks totally off.

[jancborchardt]

Exactly, that looks great @quentinguidee! :) (Only one thign: No all-caps in the timestamp as per our design ghideliens for readability.)
The 3-dot action could get enough padding and some negative margin to fix that?

@marcoambrosini how do you think we could account for this?

[marcoambrosini]

I actually think it makes a lot of sense to have the paragraph span the whole width in the sidebar, given the very limited width of the sidebar itself. I've been thinking about doing the same exact thing in talk's chat sidebar. If we do that there's going to be more space for the text anyway and we can afford a little bit more vertical whitespace if separation is still a concern

[jancborchardt]

I actually think it makes a lot of sense to have the paragraph span the whole width in the sidebar, given the very limited width of the sidebar itself. I've been thinking about doing the same exact thing in talk's chat sidebar. If we do that there's going to be more space for the text anyway and we can afford a little bit more vertical whitespace if separation is still a concern

Not sure about that – I was actually going to say that it would be good if comments and Talk (chat in sidebar) simply uses the same component, but with the indentation, as it is in both Talk and Comments atm. The width is completely fine, it’s a similar form factor as e.g. for document comments in Office.

[jancborchardt]

@quentinguidee your last version looked really nice, is there a follow-up pull request or how come you closed this one? :)

[quentinguidee]

@quentinguidee your last version looked really nice, is there a follow-up pull request or how come you closed this one? :)

That was not planned as I thought there was not a big interest around this PR, but I'll reopen one.

Edit: #35870