Flex horizontal scroll with wrap max 2 rows

Question

I'm using Mantine.dev with Nextjs and I have this part design.

I have a list of strings, the length is unknown, there might be any amount and in a wide viewport they can wrap as many there are, no max height limit but in a small viewport, there should be only 2 rows in a way that it makes horizontal scrolling

This is what it currently looks like in small viewport

The code

<ScrollArea>
 <Flex wrap='wrap' rowGap={10} columnGap={8} h={{ base: 65, sm: 'auto' }}>
  {services.map((service, i) => (<Button>{service}</Button>))}
 </Flex>
</ScrollArea>

Answer 1

You can achieve this with a MediaQuery component and a Box component instead of Flex because we need to change our layout from display: flex; to column-count: 2; and change writing-mode: vertical-lr; to get the result.

import { ScrollArea, Button, Box, MediaQuery } from "@mantine/core";

const services = [
  "Frontend",
  "Backend",
  "FullStack",
  "DevOps",
  ...
];

export default function App() {
  const boxStyles = {
    display: "flex",
    justifyContent: "flex-start",
    flexWrap: "wrap",
    columnGap: 8,
    rowGap: 10
  };

  const boxStylesSM = {
    display: "block",
    columnCount: 2,
    columnGap: 10,
    writingMode: "vertical-lr"
  };

  const buttonStyle = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    whiteSpace: "nowrap"
    writingMode: "horizontal-tb" // Fix for Firefox
  };

  const buttonStyleSM = {
    marginRight: 8
  };

  return (
    <div className="App">
      <ScrollArea type="auto" sx={{ padding: "0.8rem 0.5rem" }}>
        <MediaQuery smallerThan="sm" styles={boxStylesSM}>
          <Box sx={boxStyles}>
            {services.map((service, i) => (
              <MediaQuery smallerThan="sm" styles={buttonStyleSM}>
                <Button sx={buttonStyle} key={i}>
                  {service}
                </Button>
              </MediaQuery>
            ))}
          </Box>
        </MediaQuery>
      </ScrollArea>
    </div>
  );
}