Don't hardcode size and layout of board component

[YouSafe]

This PR aims to make the component more flexible and easier to integrate into any website layout.

Currently, the size and layout of the board component are hardcoded and can only be changed by overriding the component's CSS.

What is currently hardcoded in the component:

• size of 700x700: .cg-wrap { width: 700px; height: 700px; }
• in landscape mode: the board may take 90% of the verticle size of the viewport: width: 90vh;
• in landscape mode: the board is horizontally centred in the parent HTML element: margin-inline: auto;

Since the size of the cg-container is enforced by the chess-ground library to be a multiple of 8, it is possible that the wrapper div cg-wrap is bigger by at most 7px in both dimensions. This gap used to be only on the left and bottom but in my opinion, it looks better when it is evenly distributed on all 4 sides. That's why I changed the cg-wrap's display to flex and centred its contents. Let me know if you think this can lead to some issues.

The suggested changes require the user to provide reasonable definitions for the size of the component (there is no default size).
If no user-supplied CSS is provided, it tries to take up as much of the width as possible, while potentially cutting off parts of the bottom half of the board if the page is in landscape mode. See:

This is probably a breaking change, in the sense that, updating might change the looks of the website.

Let me know what you think! I'm sure we can work out a solution.

[qwerty084]

I like the idea of not hardcoding styles, like the width and height of the component.
But i think the board should work/be somewhat responsive out of the box without requiring the user to write custom css.

Maybe a prop, which toggles a class on the component makes more to sense to explicitly disable some hardcoded styles.

Just to understand your intention better and be able to better test it:
You moved the media query into App.vue, which is only used in development and wont be included in the final bundle. Is this intentional?

[YouSafe]

Sorry, for the late response. Moving the media query into App.vue was intentional. We might want to use the approach described in this StackOverflow post by @stefnotch : https://stackoverflow.com/a/77922938. This is to bound the dimensions of the chessboard in both axes while retaining the square aspect ratio.

[qwerty084]

I dont like this change. The component should work/provide a reasonable layout of out the box, without requiring the user to write custom css.

If the user doesn't like the defaults, the css import import 'vue3-chessboard/style.css'; can be left out and customized to their needs.

Please let me know if i missed something...