columnBreakpoint is not working

[trungbui2000]

Is the prop columnBreakpoint working for anyone? I am using Remix and this is the code that I have in my route.tsx file.

export default function Component() {
  return (
      <div className='w-100'>
        <Crossword data={data} theme={{ columnBreakpoint: '200px' }} />
      </div>
  );
}

Attached below is what I am seeing on my page. So even when the page width is more than 200 pixels, the clue does not shift to the bottom.

I looked into the source code for the Crossword component, mainly the Crossword.tsx file. I found the ClueWrapper line here

const CluesWrapper = styled.div.attrs((/* props */) => ({
  className: 'clues',
}))`
  padding: 0 1em;
  flex: 1 2 25%;

  @media (max-width: ${(props) => props.theme.columnBreakpoint}) {
    margin-top: 2em;
  }
....
`;

I was wondering if styled.div.attrs line needs to pass a prop param as well? Because it seems that regardless of which ever props I pass, the maximum width is not being changed.

Also, a few line above the shown snippet (link), there is a commented out code line which commented the original columnbreakpoint prop, I wonder if this is intentional or anyone else seeing an issue where their columnBreakpoint is not working as intended?

[trungbui2000]

Okay so I found the cause. For some reason Brave decides to have div tag be of display: block property. As shown below

This messes up with the flex CSS specification. The workaround in my code is to specify the wrapper div around the Crossword component to have a flex display. Something like this

<div className='d-flex'>
    <Crossword data={data} theme={{ columnBreakpoint: '200px' }} />
</div>

Fixed the issue. Hope this will help the next person that stumbles on this problem.

[trungbui2000]

Actually, I am re-opening this because adding the flex display property allows the clues to appear side-by-side with the grid now. However, the columnBreakpoint is still unresponsive to the screen width specification. Wanted to see if this is just an issue on my end or others sees the same issue.