Note: This is a beta release of Red Hat Bugzilla 5.0. The data contained within is a snapshot of the live data so any changes you make will not be reflected in the production Bugzilla. Also email is disabled so feel free to test any aspect of the site that you want. File any problems you find or give feedback here.
Bug 1362048 - task name cropped in recipe view
Summary: task name cropped in recipe view
Keywords:
Status: NEW
Alias: None
Product: Beaker
Classification: Community
Component: web UI
Version: develop
Hardware: Unspecified
OS: Unspecified
high
high vote
Target Milestone: future_maint
Assignee: beaker-dev-list
QA Contact: tools-bugs
URL:
Whiteboard:
Depends On:
Blocks:
TreeView+ depends on / blocked
 
Reported: 2016-08-01 09:05 UTC by Ales Zelinka
Modified: 2018-11-09 23:16 UTC (History)
1 user (show)

Fixed In Version:
Doc Type: If docs needed, set a value
Doc Text:
Clone Of:
Environment:
Last Closed:


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

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.


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