Column layout in Additional Information footer: is this desired behaviour?

[chrisarridge]

Brief Description
Adding content longer than around one line to the Additional Information footer block results in the column layout collapsing to a row-wise layout. This issue is to check that this is desired behaviour.

Severity
Low

Steps to Reproduce
Add a <p> element to one of the <div> elements under a <div> with .iati-footer-block__content and iati-footer-block__content--columns.

For example:

<div>
  <ul>
    <li><a href="#">Web vX.Y.Z</a></li>
    <li><a href="#">API vX.Y.Z</a></li>
  </ul>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
</div>

Expected Results/Behaviour
I expected the <div> elements to be presented column-wise.

Actual Results/Behaviour
The <div> elements are be presented row-wise.

[tillywoodfield]

I think this is down to poor naming of the class iati-footer-block__content--columns. The container is using flex in a row direction, which makes the children appear in columns when there is adequate horizontal space, and wraps them when there isn't enough space. This is by design to make the layout to be responsive to any screen width.

The next question is, are we happy with the layout behaving this way? If we are, should we rename the class to avoid future confusion (note that this introduces a breaking/major change)? And if we're not, how do we want it to behave instead?

[chrisarridge]

I guess I expected it to behave like the first and last sections of the footer in terms of how those boxes flex and wrap in responsively to different screen sizes, but I think I'm okay with it behaving this way. Maybe @robredpath has a view on this.

If we leave it as it is then I'm not so sure we need to rename it - I think it makes sense as long as we document that anything wider than the content already in the docs will end up being a single column layout.

[robredpath]

My instinct is that this feels like a rabbit-hole; I suspect we could spend a long time trying to make this behave how we want it to across devices/browsers/etc.

I think the best course of action is to:

• Document the behaviour
• Include another example in the design system docs that shows the value of line breaks in keeping things in columns.