Components: Header Cake: layout issues when Back is a longer string

[hoverduck]

This is how the Back link in HeaderCake looks in Swedish, in smaller screens (320px wide, in the screenshot):

[adambbecker]

Okay, so after investigating this a bit, it seems we have three choices for a potential solutions:

Options

1. Leave as is

The reason I'm including this is because currently the header cake title as well as the "back" text will always stay fully visible and the title will remain centered. We could also align the title to be in the middle of the card:

2. Ellipsis "back" text

This keeps the title centered, but ellipsis's the back text if it starts to overflow 1/3 width of the card.

3. Ellipsis title

This option makes sure all the "back" text remains visible and not wrapping, then ellipsis's the title within the available space. It keeps everything in one line.

It does, however, look a little odd depending on the strings that are used if nothing is needing an ellipsis:

4. Align title right & ellipsis

This option forgoes trying to center the title and just aligns it to the right. The "back" text remains visible inline and the title also ellipsis's if it expands beyond the remaining space.

---

Recommendation

I would probably recommend option 4 as it retains the "back" text visibility regardless of language, while still be informative as to the title. It also looks pretty decent at large sizes even if the page title is a little too verbose.

---

Curious to hear your thoughts around any of the options mentioned above.

/cc @mtias

[mtias]

@adambbecker nice breakdown. I think your last proposal makes sense. Originally there were plans to support other items at the right, but I don't think there's any section using that space? (Maybe some of the store pages with the cart, but not sure.)

[adambbecker]

@mtias: Great!

I did look through a whole variety of places where this component is being used and they all do not attempt to utilize that space. In the HeaderCake component itself, it doesn't actually strictly allow for that place to be used as the right corner element doesn't have any children, but did check that it's usage wasn't attempting to override that fact.

Here are a few examples of the right aligned method in use:

[fabianapsimoes]

@adambbecker looks like this is still an issue. See #3431.

[hoverduck]

26May16 Bug Scrub

Closing, looks to be fixed. Here is the DE layout referenced in #3431 at 320px wide: