Column text is offset to the left and not aligned with headers when there's a vertical scrollbar

VERIFIED FIXED in Firefox 64

Status

()

defect
VERIFIED FIXED
6 months ago
4 months ago

People

(Reporter: Harald, Assigned: florian)

Tracking

(Depends on 1 bug, Blocks 1 bug)

unspecified
mozilla65
x86_64
Windows 10
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox64 verified, firefox65 verified)

Details

Attachments

(4 attachments)

(Reporter)

Description

6 months ago
Posted image image.png
Reported from a Windows 10 user.
(Assignee)

Updated

6 months ago
Status: NEW → UNCONFIRMED
Ever confirmed: false
Keywords: steps-wanted

Comment 1

6 months ago
Not sure if related, but this is reproducable on RTL.
(Assignee)

Comment 2

6 months ago
(In reply to Itiel from comment #1)
> Not sure if related, but this is reproducable on RTL.

That seems worth investigating, thanks!
Flags: needinfo?(florian)
(Assignee)

Comment 3

6 months ago
(In reply to Itiel from comment #1)
> Not sure if related, but this is reproducable on RTL.

When testing RTL by setting intl.uidirection to 1 in about:config, I see something that looks like the screenshot from bug 1504236, and I'm fixing these issues, but I still don't reproduce this bug.
Flags: needinfo?(florian)

Comment 4

6 months ago
Posted image resize.PNG

Comment 5

6 months ago
I can reproduce this, by resizing the window(making it smaller than the list) or having the list of tasks exceeding the window height. See my attachment.

Comment 6

6 months ago
Posted image resizeWidth.PNG
Also, there's another UI issue, if I resize the window width to be smaller- "Type" overlaps the "Name" field and task names are no more visible. See my second screenshot.

Updated

6 months ago
Keywords: steps-wanted
(Assignee)

Comment 7

6 months ago
(In reply to Gyula Palko from comment #5)
> I can reproduce this, by resizing the window(making it smaller than the
> list) or having the list of tasks exceeding the window height. See my
> attachment.

Thanks!

Your attachment 9023000 [details] also shows a useless vertical sidebar (I noticed this on Windows and Linux yesterday evening).
Summary: Column text is offset to the left and not aligned with headers → Column text is offset to the left and not aligned with headers when there's a vertical scrollbar
(Assignee)

Comment 8

6 months ago
Posted patch PatchSplinter Review
- Fix the misalignment between the header text and the body text when there's a vertical scrollbar (this is fixed using position: fixed for the header and making the scrollbar apply to the whole table rather than just the body).
- Avoid the useless vertical scrollbar on Windows. This was due to a problem on the line "height: calc(100vh - 2em - 1px);" that I'm removing. "2em" was actually not enough to account for the size of the header, as the size of the header is max(2em, 2*line-height)... which ended up being 1px more than 2em on Windows.
- Avoid the issue of the Name column being so small that the 'Name' label would overflow into the next column. I fixed this by giving the whole table a minimum width of 40em. The header (which is positioned, so sized independently) also need the min-width rule. When resizing the window to a size smaller than 40em, an horizontal scrollbar was appearing, but made only the table body scroll, as the header has a 'fixed' position. I couldn't find a good fix for that, and such a tiny window is so useless anyway that I decided to just hide the scrollbar in that case (that's the reason for the overflow-x: hidden on the body).

I tested this on Mac and Windows. If you r+ I'll test on Linux too before landing.
Attachment #9023693 - Flags: review?(felipc)
(Assignee)

Updated

6 months ago
Assignee: nobody → florian
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true

Updated

6 months ago
See Also: → 1505845
Attachment #9023693 - Flags: review?(felipc) → review+

Comment 9

5 months ago
Pushed by florian@queze.net:
https://hg.mozilla.org/integration/mozilla-inbound/rev/3593d60216da
fix about:performance layout issues caused by scrollbars on small windows and on Windows, r=felipe.

Comment 10

5 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/3593d60216da
Status: ASSIGNED → RESOLVED
Last Resolved: 5 months ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla65
Please nominate this for Beta approval when you get a chance.
Flags: needinfo?(florian)
(Assignee)

Comment 12

5 months ago
Comment on attachment 9023693 [details] [diff] [review]
Patch

[Beta/Release Uplift Approval Request]

Feature/Bug causing the regression: new about:performance

User impact if declined: Broken/misaligned layout. On Windows, a useless vertical scrollbar. This bug also turned out to be the cause of the frustrating bug 1504839.

Is this code covered by automated tests?: No

Has the fix been verified in Nightly?: No

Needs manual test from QE?: Yes

If yes, steps to reproduce: Given that this changes several CSS rules, it would be good to verify that the layout is still correct with various themes, and maybe also various font sizes.

List of other uplifts needed: 1503680 (just so that the patches land in the same order on beta)

Risk to taking this patch: Low

Why is the change risky/not risky? (and alternatives if risky): Low because CSS only, and brokenness (if any) should hopefully be visible quickly.

String changes made/needed: none
Flags: needinfo?(florian)
Attachment #9023693 - Flags: approval-mozilla-beta?
Flags: qe-verify+
Comment on attachment 9023693 [details] [diff] [review]
Patch

css fix for new about:performance, approved for 64.0b10
Attachment #9023693 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
I've managed to reproduce this issue using Firefox 65.0a1 (BuildId 20181101220058) on Windows 10x64.

This issue is verified fixed using Firefox 65.0a1 (BuildId 20181114222927) on Windows 10x64. 

Note: It seems that after resizing the window to its minimum width, the horizontal scrollbar does not appear.
Is this an intended behavior, if not, please let me know and I will file a bug for that issue, separately?
Status: RESOLVED → VERIFIED
Flags: needinfo?(florian)
(Assignee)

Comment 16

5 months ago
(In reply to Maria Berlinger [:maria_berlinger], Release Desktop QA from comment #15)

> Note: It seems that after resizing the window to its minimum width, the
> horizontal scrollbar does not appear.
> Is this an intended behavior, if not, please let me know and I will file a
> bug for that issue, separately?

This is an expected side effect of the patch, yes. If I didn't hide the horizontal scrollbar, the body of the table was scrolling horizontally but not its header, which was worse than not scrolling at all.
Flags: needinfo?(florian)
This issue is verified fixed using Firefox 64.0b10 on Windows 10x64.
Flags: qe-verify+
(Assignee)

Updated

4 months ago
Depends on: 1513834
You need to log in before you can comment on or make changes to this bug.