How do we want to handle all kinds of viewport sizes?

[Mohammer5]

It's a discussion that comes up every now and then.
There's already an issue about this (#59). I think we could start a discussion with different ideas how to approach this and then start voting on them.

[Mohammer5]

No responsive components in UI but fluid components only

I think it's bad if we add responsive behavior to our components as they can be used in different contexts of which the components are not aware of. Even the dimensions of the component are not necessarily the determining factor which layout should be used. Therefore I'd leave the responsibility which component should be used under which circumstance to the app.

Instead I think every "responsive" version of a component should be its own component with the same prop api as its "sibling" components.

The app could use a hook like the following in order to determine which component it wants to use. By leveraging on the window.matchMedia api the javascript logic can use the same breakpoints as the css (otherwise there'd be issues with whether the scrollbars' width is included in the viewport's dimensions or not) and keep all other styles in the css realm:

const useMatchMedia = condition => {
    const mq = useMemo(() => window.matchMedia(condition), [condition])
    const [ matches, setMatches ] = useState(mq.matches)
    const onChange = useCallback(curMq => {
        if (curMq.matches && !matches) { setMatches(true) }
        else if (!curMq.matches && matches) { setMatches(false) }
    }, [mq, matches, setMatches])

    useEffect(() => {
        mq.addListener(onChange)
        return () => mq.removeListener(onChange)
    }, [mq, onChange])

    return matches
}

// example usage:
const Table = props => {
  const xsBreakpoint = window.getComputedStyle(document.body).getPropertyValue('--breakpoints-xs')
  const isSmall = useMatchMedia(`(max-width: ${xsBreakpoint})`)

  if (isSmall) return <TableStacked { ...props } />
  return <TableStatic { ...props } />
}

EDIT 1:

From my PoV it makes a lot of sense to structure css+html in a way that the container is always responsible for determining a child's width. Sometimes that can be achieved using display: grid or display: flex, in other cases it means that wrapping the children with an extra element would be necessary. That way we'd have to write slightly more html code, but we'd have full top-down control which makes managing styles a lot easier. That strategy also fits nicely with the idea that the app has to determine which component to display, as that's also a top-down approach.

[ghost]

Yeah, until we have element queries I think the app will always have to be responsible for media queries. Making components as fluid as possible seems like the best we can do.

[Mohammer5]

Yeah exactly. Components should be as fluid as possible, I'll edit my main comment and add some thoughts about that