[CONTEDIT-126] Outline Tab names are hidden when screen is too narrow Created: 06/Jul/17  Updated: 24/Aug/17  Resolved: 08/Aug/17

Status: Closed
Project: Content Editor
Component/s: None
Affects Version/s: 1.0.5
Fix Version/s: 1.0.6

Type: Bug Priority: Major
Reporter: Christopher Zimmermann Assignee: Cedric Reichenbach
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File collapsable_fields_desktop_1024.png     PNG File collapsable_fields_desktop_HD_1440-1.png     PNG File collapsable_fields_desktop_HD_1440-2.png     PNG File collapsable_fields_desktop_tablet.png     PNG File contedit-tab-narrow.png    
Issue Links:
dependency
depends upon MGNLUI-3087 Upon returning from dialog's expanded... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Epic Link: Content Editor fine-tuning
Sprint: Basel 107, Basel 108
Story Points: 3

 Description   

The tabs become quickly obscured when the browser width is below a certain value.
The tab names cannot be read, and it produces a broken looking UX.
See attached image.

The responsive behavior is proposed as the following:
Note: Tabs and forms (as a whole) are always centered in the browser.

Desktop HD 1440px Desktop HD 1440px Desktop 1024px Tablet
Big browser window Small browser window    
The max. width for the tabs is 180px.
The max. width for the form is 900px.
In this case the space to the border on both sides are flexible.
The white space to the border is min. 20px.
When that is reached the tabs will become flexible to the min. width of 100px.
The min. width of the tabs is 100px.
Labels within the tabs need to be shortened by ellipsis.
When that is reached the forms will become flexible to the min. width of 550px.
For tablets:
Space to the border: 20px
Tabs: 100px (text shortened by ellipsis)
Forms: 608px

Generated at Mon Feb 12 00:17:20 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.