gameboard style adjustments

[perennialAutodidact]

The width of the TileGrid component should be narrower. Bootstrap's container, row and col classes can be used to limit its width. It should be 12 columns wide on mobile and 6 or 8 columns wide (whichever looks better) on desktop

[russfraze]

I think 6 looks good on desktop. Theres ten here so you could picture three times that fitting in this.

When it comes to mobil, here is iphone size:

This issue says 12 in mobile but I feel like thats too small and you wouldn't be able to see what the images are. I feel like it looks good with 4 across but let me know what you think.

[perennialAutodidact]

@russfraze, These are the styles I came up with:

components/Game/GameBoard/Tile/style.scss

@import '~styles/memory-snap-mixins';

.tile {
  // position: relative;
  // height: 100px;
  // overflow: hidden;
  // padding-bottom: 100%;
  height: 100px;
  width: 100px;

  @include breakpoint(md) {
    height: 200px;
    width: 200px;
  }

  img {
    width: 100%;
    height: 100%;
    // position: absolute;
  }
}

styles/_memory-snap-mixins.scss

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';

@mixin breakpoint($size) {
  @include media-breakpoint-up(md) {
    @content;
  }
}

components/Game/GameBoard/TileGrid/index.jsx

//...
return (
  <div id="tile-grid" className="container mt-5">
    <div className="row">
      <div className="col-12 col-md-6 offset-md-3">
        <div className="d-flex justify-content-center flex-wrap gap-3">
          {!tiles
            ? null
            : tiles.map((tile, index) => (
                <div className="tile" key={index}>
                  <Tile
                    isMatched={tile.isMatched}
                    faceUp={tile.faceUp}
                    onFlip={onFlipTile}
                    key={index}
                    index={index}
                    id={tile.id}
                    photo={tile.photo}
                  />
                </div>
              ))}
        </div>
      </div>
    </div>
  </div>
)
// ...

Which looks like this

Mobile	Desktop

[perennialAutodidact]

I didn't try this with more tiles, but I'd imagine that we'll have to use refs and have some logic which will set the size of the tiles based on how many tiles are in the game.

[perennialAutodidact]

The margins on mobile could be reduced a bit