Bug 1362048

Summary: task name cropped in recipe view
Product: [Retired] Beaker Reporter: Ales Zelinka <azelinka>
Component: web UIAssignee: Tomas Klohna 🔧 <tklohna>
Status: CLOSED NEXTRELEASE QA Contact: tools-bugs <tools-bugs>
Severity: medium Docs Contact:
Priority: low    
Version: 26CC: mjia, tklohna
Target Milestone: 26.5Keywords: Patch, Regression, Triaged
Target Release: ---   
Hardware: Unspecified   
OS: Unspecified   
Whiteboard:
Fixed In Version: Doc Type: If docs needed, set a value
Doc Text:
Story Points: ---
Clone Of: Environment:
Last Closed: 2019-05-13 12:41:52 UTC Type: Bug
Regression: --- Mount Type: ---
Documentation: --- CRM:
Verified Versions: Category: ---
oVirt Team: --- RHEL 7.3 requirements from Atomic Host:
Cloudforms Team: --- Target Upstream Version:
Embargoed:
Attachments:
Description Flags
task name cropped in recipe view
none
recipe-task-status div width
none
scheenshot with removed flex-basis none

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.