Defect #32772: Tabs are displayed on two lines when the total width of the tabs is greater than 2000px - Redmine

Actions

Copy link

Defect #32772

closed

Tabs are displayed on two lines when the total width of the tabs is greater than 2000px

Added by Sebastian Paluch over 5 years ago. Updated over 5 years ago.

Status:

Closed

Priority:

Normal

Assignee:

Go MAEDA

Category:

Target version:

4.0.7

Start date:

Due date:

% Done:

Estimated time:

Resolution:

Fixed

Affected version:

4.0.0

Description

New tab based history has issue with drawing tab frames.

Tested on Chrome and IE.

Environment:
  Redmine version                4.1.0.stable
  Ruby version                   2.5.7-p206 (2019-10-01) [x64-mingw32]
  Rails version                  5.2.4.1
  Environment                    production
  Database adapter               Mysql2
  Mailer queue                   ActiveJob::QueueAdapters::AsyncAdapter
  Mailer delivery                smtp
SCM:
  Subversion                     1.11.1
  Git                            2.19.1
  Filesystem                     
Redmine plugins:
  no plugin installed

Files

Download all files

frame_issue.png (6.83 KB) frame_issue.png		Sebastian Paluch, 2020-01-08 12:28
Screenshot 2020-01-12 at 21.19.39.png (87.8 KB) Screenshot 2020-01-12 at 21.19.39.png		Marius BĂLTEANU, 2020-01-12 20:23
Screenshot 2020-01-12 at 21.21.21.png (240 KB) Screenshot 2020-01-12 at 21.21.21.png		Marius BĂLTEANU, 2020-01-12 20:23
Screenshot 2020-01-12 at 21.20.13.png (254 KB) Screenshot 2020-01-12 at 21.20.13.png		Marius BĂLTEANU, 2020-01-12 20:23
Screenshot 2020-01-12 at 21.34.26.png (90.6 KB) Screenshot 2020-01-12 at 21.34.26.png		Marius BĂLTEANU, 2020-01-12 20:34
alternate-theme.png (40.3 KB) alternate-theme.png		Go MAEDA, 2020-01-15 09:53
alternate.png (6.22 KB) alternate.png		Sebastian Paluch, 2020-01-15 10:56
classic.png (7.17 KB) classic.png		Sebastian Paluch, 2020-01-15 10:57
fix_tab_width.diff (751 Bytes) fix_tab_width.diff		Bernhard Rohloff, 2020-01-15 16:20
settings.png (38.5 KB) settings.png		Marius BĂLTEANU, 2020-01-18 10:03

Actions

Copy link

Updated by Marius BĂLTEANU over 5 years ago

File Screenshot 2020-01-12 at 21.21.21.png Screenshot 2020-01-12 at 21.21.21.png added
File Screenshot 2020-01-12 at 21.19.39.png Screenshot 2020-01-12 at 21.19.39.png added
File Screenshot 2020-01-12 at 21.20.13.png Screenshot 2020-01-12 at 21.20.13.png added
File Screenshot 2020-01-12 at 21.34.26.png Screenshot 2020-01-12 at 21.34.26.png added
Status changed from New to Needs feedback
Assignee set to Sebastian Paluch

I cannot reproduce, tried on OS Catalina with Chrome (latest) and Windows with Chrome (latest), Edge 17 and 18. Attached some screenshots.

Can you try a hard reload in Chrome or incognito?

Actions

Copy link

Updated by Sebastian Paluch over 5 years ago

I have retried with:

Chrome 79.0.3945.79, also in incognito.
IE 11.1087
Edge 41 / EdgeHTML 16

In both cases I use Alternate theme.

I have noticed this is dependent on the windows width and shows up above ~2400 pixels.

Actions

Copy link

Updated by Go MAEDA over 5 years ago

File alternate-theme.png alternate-theme.png added

Sebastian Paluch wrote:

In both cases I use Alternate theme.

I think the theme you are using is not Alternate. The line at the bottom of the note header ("Updated by xxxxx ...") is not displayed with Alternate theme.

Could you try with "genuine" Alternate theme?

Actions

Copy link

Updated by Sebastian Paluch over 5 years ago

File alternate.png alternate.png added
File classic.png classic.png added

Go MAEDA wrote:

I think the theme you are using is not Alternate. The line at the bottom of the note header ("Updated by xxxxx ...") is not displayed with Alternate theme.

The issue exists with Alternate theme.

With classic it looks this way

Actions

Copy link

Updated by Bernhard Rohloff over 5 years ago

File fix_tab_width.diff fix_tab_width.diff added
Status changed from Needs feedback to Confirmed

I can reproduce the issue by pulling the browser window over my two low resolution monitors.
It's because the `ul` container inside the tabs class is hard set to 2000px.
The attached patch should fix the problem.

S H Paluch can you double check that the problem is gone after applying the patch?

Actions

Copy link

Updated by Sebastian Paluch over 5 years ago

Bernhard Rohloff wrote:

S H Paluch can you double check that the problem is gone after applying the patch?

Yes, the patch fixes the issue with not drawing the line at the end (highlighted with red at the right side).

I don't know though what was the design intent about horizontal and vertical lines. They not getting together, they are not closing the frame (highlighted with red on the left side). Frames in other places are closed, therefore this looks like an issue.

Actions

Copy link

Updated by Marius BĂLTEANU over 5 years ago

File settings.png settings.png added
Subject changed from Broken issue tab based history frame to Tabs are displayed on two lines when the total width of the tabs is greater than 2000px
Category changed from Issues to UI
Assignee deleted (~~Sebastian Paluch~~)
Target version set to 4.0.7

Thanks Bernhard for finding the cause of the issue and for the fix. I remember now that the issue reproduces also on Settings page (or other page with tabs) when the total width of the tabs is greater than 2000px.

I'm assigning this to 4.0.7.

Sebastian Paluch wrote:

I don't know though what was the design intent about horizontal and vertical lines. They not getting together, they are not closing the frame (highlighted with red on the left side). Frames in other places are closed, therefore this looks like an issue.

Is the expected design, please see #26662, but I agree with you that it looks strange. I've proposed in #31573 another design for journal entries, maybe you can add your feedback there.

Actions

Copy link