auto-fit card headers

Author: sorahn

package-lock.json

@@ -32,6 +32,7 @@
     "pg": "^8.5.1",
     "react": "17.0.1",
     "react-dom": "17.0.1",
+    "react-textfit": "^1.1.1",
     "short-uuid": "^4.1.0",
     "sqlite3": "^5.0.0"
   },
@@ -44,6 +45,7 @@
     "@types/puppeteer": "^5.4.2",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-textfit": "^1.1.0",
     "@types/sqlite3": "^3.1.6",
     "@typescript-eslint/eslint-plugin": "^4.11.0",
     "@typescript-eslint/parser": "^4.11.0",

package.json

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Textfit } from "react-textfit";
 import { Card as CardModel } from "../model/card";
 import styles from "../styles/card.module.css";
 import {
@@ -187,25 +188,25 @@ const Card: React.FC<{ name: CardName; usedForCritter?: boolean }> = ({
   return (
     <>
       <div className={styles.card}>
-        <div className={styles.card_header_row}>
-          <div className={[styles.circle, styles.card_header_symbol].join(" ")}>
+        <div className={[styles.card_header_row, colorClass].join(" ")}>
+          <div className={[styles.circle].join(" ")}>
             <CardTypeSymbol cardType={card.cardType} />
           </div>
-          <div
-            className={[
-              styles.circle,
-              styles.color_victory_point,
-              styles.card_header_vp,
-            ].join(" ")}
-          >
-            <span className={styles.card_header_vp_number}>{card.baseVP}</span>
-          </div>
-          <div className={[styles.card_header, colorClass].join(" ")}>
-            <span>{name}</span>
+          <div className={styles.card_header}>
+            <span>
+              <Textfit min={1} max={12} mode="single">
+                {name}
+              </Textfit>
+            </span>
             {card.expansion && (
               <span className={styles.expansion}>{card.expansion}</span>
             )}
           </div>
+          <div
+            className={[styles.circle, styles.color_victory_point].join(" ")}
+          >
+            <span className={styles.card_header_vp_number}>{card.baseVP}</span>
+          </div>
         </div>
         <div className={styles.rarity_label}>
           {rarityLabel}

src/components/Card.tsx

@@ -1,6 +1,6 @@
 .card {
   min-height: 200px;
-  width: 240px;
+  width: 200px;
   border-radius: 5px;
   position: relative;
   border: 1px solid var(--border-color);
@@ -12,6 +12,14 @@
   justify-content: space-between;
 }
 
+.card_header_row {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  width: 100%;
+  overflow: hidden;
+}
+
 .card_header {
   height: 35px;
   font-weight: var(--font-bold);
@@ -22,6 +30,8 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  flex: 1 1 auto;
+  overflow: hidden;
 }
 
 .expansion {
@@ -108,16 +118,10 @@
   width: 24px;
   height: 24px;
   margin: 6px;
-
   text-align: center;
   font-size: 27px;
-}
-
-.card_header_vp {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 10;
+  position: relative;
+  flex: 0 0 auto;
 }
 
 .card_header_vp_number {
@@ -127,12 +131,7 @@
   margin-top: -14px;
   vertical-align: middle;
   color: var(--color-vp-text);
-}
-
-.card_header_symbol {
-  position: absolute;
-  top: 0;
-  z-index: 10;
+  flex: 0 0 auto;
 }
 
 .color_victory_point {