[OGUI-1820] Header of pages should efficiently use remaining space

[AlexJanson]

I have JIRA issue created

• branch and/or PR name(s) includes JIRA ID
• issue has "Fix version" assigned
• issue "Status" is set to "In review"
• PR labels are selected
• FLP integration tests were ran successful

The QCG pages are making use of the header for displaying filters or tabs (e.g. layoutShow/objectTree) but in some other cases it is being used for nothing (layoutList)

Find a clever way of efficiently splitting the space of the header between the 3 potential components (left, center right)

Moreover, for the layoutShow, display the tabs list with a scrollable component instead of 2-3 lines of list of tab

[graduta]

While this is definitely an improvement, I think it can be better.
Could you please try for the next meeting to come up with a proposal fortabs slider to be placed outside of the header, one level below (between header and filters)
Try to make it in such a way that the 3 elements are nicely cascading and are delimited in a nice UI manner.
Moreover, refrain from using hard values for margins and paddings especially in px. Try to use the existing defined classes in the framework bootstrap.css such as .p1, .p2, m1, m2 etc. Or the variables defined in the CSS files

[graduta]

I believe the tabs group look better now that they have their own row.
It would be great if you could look at simplyfing the CSS and please bare in mind the issue when EDIT/SAVE actions are triggered as it is duplicating the buttons