sirtimbly/canopy-game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optimize board sizing for constrained 16:9 container - reduce gaps and padding

Browse Source
This commit is contained in:
Tim Bendt
2026-04-09 13:01:45 -04:00
parent 170db88c5b
commit c85d7a8fc1
1 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/styles.css
View File

@@ -81,10 +81,10 @@ button {
.layout { .layout {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 1rem; padding: 0.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.85rem; gap: 0.5rem;
overflow: hidden; overflow: hidden;
} }
@@ -201,10 +201,11 @@ label span,
flex: 1; flex: 1;
position: relative; position: relative;
display: grid; display: grid;
grid-template-columns: minmax(0, 1.9fr) minmax(320px, 0.85fr); grid-template-columns: minmax(0, 1.9fr) minmax(280px, 0.85fr);
gap: 0.85rem; gap: 0.5rem;
min-height: 0; min-height: 0;
align-items: start; align-items: center;
overflow: hidden;
} }
.board-shell, .board-shell,
@@ -217,18 +218,25 @@ label span,
.board-shell { .board-shell {
min-height: 0; min-height: 0;
padding: 0.8rem; padding: 0.4rem;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
} }
.board { .board {
position: relative; position: relative;
width: 100%; width: auto;
height: auto; height: 100%;
max-width: 100%;
max-height: 100%; max-height: 100%;
aspect-ratio: var(--board-columns) / var(--board-rows); aspect-ratio: var(--board-columns) / var(--board-rows);
display: grid; display: grid;
gap: 0.32rem; gap: 0.15rem;
margin: 0 auto; margin: 0 auto;
align-content: center;
justify-content: center;
} }
.board__lines { .board__lines {