Fix for popper css margin style warning

React
1

Best I can tell the warning comes from popper.js library which is pulled in and used by Chakra in the Menu component. I found some references to the same issue from Bootstrap and React for menus and popover modals. Not sure why or if there is a going to be a fix to allow margin style but we can just use padding instead.

I removed the extra Box wrapper and put the two selectors back into a HStack. Here is the code I have working good now. BTW, ignore the handleFunctions. I’m just using separate functions instead of the inline arrow functions used in the course.

<GridItem area="main">
        <Box paddingLeft={2} paddingBottom={5}>
          <GameHeading gameQuery={gameQuery} />
          <HStack spacing={5}>
            <PlatformSelector
              onSelectPlatform={handleSelectPlatform}
              selectedPlatform={gameQuery.platform}
            />
            <SortSelector
              sortOrder={gameQuery.sortOrder}
              onOrderBy={handleOrderBy}
            />
          </HStack>
        </Box>
        <GameGrid gameQuery={gameQuery} />
2

Mosh has added a solution for this in the course now - it basically as above but using as the wrapping component.