Bug 1362048 - task name cropped in recipe view
Summary: task name cropped in recipe view
Keywords:
Status: CLOSED NEXTRELEASE
Alias: None
Product: Beaker
Classification: Retired
Component: web UI
Version: 26
Hardware: Unspecified
OS: Unspecified
low
medium
Target Milestone: 26.5
Assignee: Tomas Klohna 🔧
QA Contact: tools-bugs
URL:
Whiteboard:
Depends On:
Blocks:
TreeView+ depends on / blocked
 
Reported: 2016-08-01 09:05 UTC by Ales Zelinka
Modified: 2019-05-13 12:41 UTC (History)
2 users (show)

Fixed In Version:
Doc Type: If docs needed, set a value
Doc Text:
Clone Of:
Environment:
Last Closed: 2019-05-13 12:41:52 UTC
Embargoed:


Attachments (Terms of Use)
task name cropped in recipe view (463.70 KB, image/png)
2016-08-01 09:05 UTC, Ales Zelinka
no flags Details
recipe-task-status div width (12.13 KB, image/png)
2016-08-05 13:35 UTC, Ales Zelinka
no flags Details
scheenshot with removed flex-basis (177.74 KB, image/png)
2016-12-08 09:36 UTC, Ales Zelinka
no flags Details


Links
System ID Private Priority Status Summary Last Updated
Beaker Project Gerrit 6519 0 None None None 2019-05-10 15:14:33 UTC

Description Ales Zelinka 2016-08-01 09:05:19 UTC
Created attachment 1186303 [details]
task name cropped in recipe view

Description of problem:
Open a recipe in the new UI. If it doesn't all fit on the page horizontally, the task name gets cropped. I can't then tell one task from the other because all I see is the prefix that all tasks have in common. And there's lot of free space left around the comment bubble.

See attached screenshot. 

Version-Release number of selected component (if applicable):
23.0

Comment 1 Dan Callaghan 2016-08-02 02:40:06 UTC
Aleš, can you please check it with Greasemonkey and Stylish disabled, to see if it looks the same?

The amount of horizontal space between the logs and the comment icons seems larger than it should be. (There is some horizontal space after the comment icon but that is where the score is shown.)

BTW there is only so much we can do, to show everything in a single row, when your viewport is quite narrow as you have there. This is yet another case where it's difficult to get something which works well for everyone -- Jan Stancek for example was proposing to display full timestamps (making them much more horizontal space) which was fine for him because he presumably has a conventional landscape-oriented monitor making the viewport much wider.

Comment 2 Ales Zelinka 2016-08-05 13:33:26 UTC
(In reply to Dan Callaghan from comment #1)
> Aleš, can you please check it with Greasemonkey and Stylish disabled, to see
> if it looks the same?
> 

I've tested it with both addons disabled - it looks exactly the same.

> The amount of horizontal space between the logs and the comment icons seems
> larger than it should be. (There is some horizontal space after the comment
> icon but that is where the score is shown.)

The column is as wide as the longest shown log (AFAIK). SO in my case i has the width of /distribution/install's "test_log--distribution-install-CheckRecipe.log + 2" which appears exactly once (and, frankly, nobody ever looks at it), wasting space in tens to hundreds rows of actual tests, where the log column only says "TESTOUT.log  + X".

The wasted space _after_ the comment icon is due to recipe-task-status. See attached screenshot. I see no obvious reason for it to be that wide though.

> BTW there is only so much we can do, to show everything in a single row,
> when your viewport is quite narrow as you have there. This is yet another
> case where it's difficult to get something which works well for everyone --
> Jan Stancek for example was proposing to display full timestamps (making
> them much more horizontal space) which was fine for him because he
> presumably has a conventional landscape-oriented monitor making the viewport
> much wider.

I like the compactness of the new recipe view, where one task takes up just one line. Much more tasks fit onto the page now. Sadly, not seeing the task name is a deal breaker for me. I'm back to the old UI now.

Comment 3 Ales Zelinka 2016-08-05 13:35:11 UTC
Created attachment 1187917 [details]
recipe-task-status div width

Comment 5 Ales Zelinka 2016-12-08 09:35:06 UTC
Disabling flex-basis for both task-logs and recipe-task-status (which otherwise overlap with task-metadata) make it look much better. See attached screenshot

Comment 6 Ales Zelinka 2016-12-08 09:36:02 UTC
Created attachment 1229404 [details]
scheenshot with removed flex-basis

Comment 7 Roman Joost 2016-12-13 23:44:45 UTC
Ideas for looking into this:

* In the mean time we have more CSS options. Determine if we can use CSS3 grids instead of flex boxes.
* Alternatively the flex-basis is maybe too big at this moment.
* Is there a possibility to use a threshold width for narrow view ports, which then changes the layout to not display everything in one line.

Comment 8 Tomas Klohna 🔧 2019-05-10 15:14:33 UTC
I don't see what the big fuzz is about. I have changed flex-basis of comments, result and the task name to make it look better. Also disabled the nowrap on taskname as it's much more useful to see full task name than to save few pixels.


Note You need to log in before you can comment on or make changes to this bug.