Apps: <summary> flex box bug in Safari

[rossbulat]

Problem

The <section> flexbox items of <summary> containers are not adjusting their widths in Safari:

Expected (Chrome):

Process

• I did a global summary { search to check the CSS configurations.
• Replaced <section> and <article> children with divs, problem still occurs.
• Replaced <summary> with a div with class of .summary, which fixed the issue.

Solution

Replace all <summary> headings with <div className='summary'> throughout the dashboard.

Can continue with a PR to fix this given the go ahead @jacogr

[jacogr]

Aware of this one, basically this one - https://github.com/philipwalton/flexbugs#flexbug-9 (originally actually took me a while to find - I thought I as going crazy...)

I'm hoping it gets fixed at source, ie. https://bugs.webkit.org/show_bug.cgi?id=190065 - the alternative is to start using something like a Summary component everywhere (with the classes applied as suggested), unless the linked issue gets a "wontfix" label, would rather hold off. Basically 2 complaints this far on it - you and me.

[rossbulat]

(originally actually took me a while to find - I thought I as going crazy...)

Was thinking the same thing, very odd behaviour.

Understood, it looks like it has been outstanding for +5 months now.

I'd lean on the summary component workaround as this impacts the UI quite severely. It also prevents us from building mobile optimisations for a large amount of users that will be using webkit based browsers on their phones or iPads.

I'd be interested in more mobile support to make the app more usable - not sure how high on the priority list this is though.

[jacogr]

I use it quite extensively on my phone, weirdly enough, mostly for queries and checking in - there is a lot of gaps mobile-wise. There has been _some_ optimisations (read: some media query optimisations), but it has not been a high priority - not due to "we should not do it", but rather just other things higher on the list when it has been bugging.

(And honestly on mobile there are a number of things that are not really usable and probably shouldn't be - so it should focus on the stuff that are visible in the "light" mode for the interface with the addition of the explorer, i.e. stuff like extrinsics is a dev tool, that is enough of a nightmare to just get working on desktop)

So anything that helps here and makes it smoother is appreciated.

[jacogr]

As per discussion with @rossbulat -

• Add Summary component that is just <div className='ui--summary>{children}</div>
• Replace usages of <summary> with the above

The previous point is not a blanket replace, we are using the <summary> & <details> in areas for toggle components, e.g. look at block details on explorer. So the preceding should only apply to those used in headers.

[rossbulat]

As per discussion with @rossbulat -

• Add Summary component that is just <div className='ui--summary>{children}</div>
• Replace usages of <summary> with the above

The previous point is not a blanket replace, we are using the <summary> & <details> in areas for toggle components, e.g. look at block details on explorer. So the preceding should only apply to those used in headers.

Apologies, it looks like I was working on this at the exact time you were reviewing. I have created a PR utilising a styled component in place of ui--summary.

[jacogr]

Well, yours is more _correct_, my comment is _wrong_ :)

[rossbulat]

All a matter of perception :) Fixed in #830

[jfbrennan]

<details>
  <summary>
    <div class="flex">This flex container and its items all work as expected in Safari</div>
  </summary>
  ...
</details>

[lucasriondel]

@jfbrennan THANKS man, I was going crazy over this. Stupid safari :<

[polkadot-js-bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue if you think you have a related problem or query.