greyson/super-auto-pets-board-game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep the phone topbar on one row, and tighten card corners.

Browse Source 
- Force the topbar to a single row and let long player names truncate with an
  ellipsis, so the three-dot menu no longer wraps to a second line.
- Drop the card's outer corner radius from 14px to 9px so it matches the
  scene/panel boxes inside (7-8px) instead of dwarfing them.
This commit is contained in:
Greyson Parrelli
2026-07-26 22:13:21 -04:00
parent 5a846f1319
commit 5de5b60660
2 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/styles.css
+25 -7
View File
@@ -42,7 +42,9 @@
--font-display: 'Lilita One', system-ui, sans-serif;
--font-body: 'Nunito', system-ui, sans-serif;
--card-radius: 14px;
/* The card's outer corners echo the smaller radii of the scene/panel boxes
inside (7–8px) rather than towering over them. */
--card-radius: 9px;
/* Reusable warm shadows so depth stays consistent everywhere. */
--shadow-card: 0 10px 20px -6px rgba(20, 12, 4, 0.55), 0 2px 4px rgba(20, 12, 4, 0.4);
@@ -2927,10 +2929,12 @@ h3 {
-webkit-overflow-scrolling: touch;
}
/* --- topbar: a slim rail --- */
/* --- topbar: a slim rail, forced onto one row --- */
.topbar {
gap: 5px 8px;
padding: 5px 9px;
/* Never wrap the ⋯ menu onto a second line — long names truncate instead. */
flex-wrap: nowrap;
}
/* Drop the wordmark entirely on a phone — the die, the player tags, and the
⋯ menu are all that's needed, and losing it helps the rail stay one row. */
@@ -2941,21 +2945,35 @@ h3 {
width: 23px;
height: 23px;
}
/* Let the tags pack tight; the ⋯ menu is pushed to the right by margin-auto. */
/* Players take the middle and shrink; the die and ⋯ menu stay fixed. */
.topbar-round {
flex: 0 0 auto;
}
.topbar-players {
flex: 0 1 auto;
flex: 1 1 auto;
min-width: 0;
gap: 6px;
flex-wrap: nowrap;
}
.topbar-menu {
flex: 0 0 auto;
margin-left: 4px;
}
.topbar-menu-btn {
padding: 4px 10px;
}
.topbar-round {
font-size: 0.82rem;
}
/* Tags shrink and their names ellipsis so two players + the menu fit one row. */
.topbar-player {
padding: 3px 9px;
font-size: 0.8rem;
gap: 5px;
min-width: 0;
}
.topbar-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.topbar-code {
font-size: 0.8rem;
web/tsconfig.tsbuildinfo
+1 -1
View File
@@ -1 +1 @@
{"root":["./src/App.tsx","./src/anim.ts","./src/api.ts","./src/main.tsx","./src/petArt.ts","./src/types.ts","./src/useBattleSpeed.ts","./src/useCatalog.ts","./src/useGame.ts","./src/vite-env.d.ts","./src/components/ArrangePhase.tsx","./src/components/BattlePhase.tsx","./src/components/CardView.tsx","./src/components/DebugPanel.tsx","./src/components/DiceRoll.tsx","./src/components/EventLog.tsx","./src/components/GameOver.tsx","./src/components/Home.tsx","./src/components/Lobby.tsx","./src/components/ShopPhase.tsx","./src/components/Table.tsx"],"version":"5.9.3"}
{"root":["./src/App.tsx","./src/anim.ts","./src/api.ts","./src/main.tsx","./src/petArt.ts","./src/types.ts","./src/useBattleSpeed.ts","./src/useCatalog.ts","./src/useGame.ts","./src/useMediaQuery.ts","./src/vite-env.d.ts","./src/components/ArrangePhase.tsx","./src/components/BattlePhase.tsx","./src/components/CardView.tsx","./src/components/DebugPanel.tsx","./src/components/DiceRoll.tsx","./src/components/EventLog.tsx","./src/components/GameOver.tsx","./src/components/Home.tsx","./src/components/Lobby.tsx","./src/components/ShopPhase.tsx","./src/components/Table.tsx"],"version":"5.9.3"}