Achievements and leaderboards on a phone: numbers side by side, the rank column hugs its badge (#322)

OP OpenVibers committed 5 days ago · b2b874ea5e · 1 file, +9 −1

* Achievements: the two numbers side by side on a phone

At 390 px the summary's 180 px minimum put "achievements unlocked" and "games played" in two full-width cards, one
under the other; 140 px keeps them as a pair.

* Leaderboards: the rank column hugs its badge

* Leaderboards: only the board's rank column

* Merge branch 'main' into ach-summary-pair

Changes

ddiff --git a/apps/client/src/pages/play-pages.css b/apps/client/src/pages/play-pages.css
iindex 84d7af0..6c42a4a 100644
---- a/apps/client/src/pages/play-pages.css
++++ b/apps/client/src/pages/play-pages.css
@@@ -140,7 +140,7 @@ p {
  }
  .summary {
    display: grid;
--  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
++  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: 10px;
    margin: 20px 0 4px;
    padding: 0;
@@@ -482,3 +482,11 @@ pre code {
      padding: 16px;
    }
  }
++
++/* The rank column hugs its badge (it took a third of the table on a computer); the player's name gets the room. */
++.board th:first-child,
++.board td:first-child {
++  width: 1%;
++  white-space: nowrap;
++  padding-right: 8px;
++}