Bug - Left-alignment Padding for Expand/Collapse Menus

[MichaelDalrymple]

Hello GCWeb people (again),

Another item we have found that is less of a bug and more of a design oversight, is that when an expand/collapse menu text wraps onto a second line, the text on line 2 (and subsequent lines) aligns with the arrow and doesn't align-left with where the text starts on line 1. Quite frankly, this just looks bad, as your eyes have to move back and forth, especially when there is a long list of menu options to display or choose from.

We have found a potential fix for this, as follows for your consideration to add into a future version of the GCWeb CSS. This solution works on both desktop and mobile views. Before/After screenshots are included in this bug report. Over to you.

<style> details summary { text-indent: -18px; padding-left: 33px; } .wb-tabs > .tabpanels > details > summary, .wb-tabs > details > summary { text-indent: -18px; padding-left: 33px; } </style>

[Garneauma]

@MichaelDalrymple Since you already have a solution, I invite your team to open a pull request. We'll then be able to perform a code review and merge the change inside the project. Thanks!

[Ricokola]

@MichaelDalrymple we've tested the proposed approached locally and after making minor modification to the padding and text indent values, it has rendered as expected. However, one thing would need to be fix which is having the dot-arrow underlined when the rest of the text is indented...it looks a bit awkward.

Would you be able to test and propose a fix for the underline to only applied for the text?

Adjusted values:

• padding: 5px 15px 5px 30px;
• text-indent: -14px;