Adjust Image rendering in header

there are now layers in the card header so that the image does not
overlap any readable text

src/10th/Roster.jsx

@@ -26,6 +26,12 @@ import {
 import { useLore } from "../helpers/useLore";
 import { HIDE_UNIT_COMPOSITION, ShortSummaryTable } from "../fork";
 
+// Soft left edge for the model image in the card header. Opaque over the right
+// two thirds of the image box, so only the part that reaches across the stat
+// line is faded.
+const imageFade =
+	"linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 16%, rgba(0,0,0,1) 36%)";
+
 const getShortSummarySubtitle = (force) => {
 	const details = [];
 	if (force.forceDisposition) {
@@ -388,6 +394,9 @@ const Unit = ({
 					backgroundSize: "cover",
 					color: "#fff",
 					position: "relative",
+					// Keeps the header's five layers to itself, so their z-indices
+					// never have to be compared against the rest of the card.
+					isolation: "isolate",
 				}}
 			>
 				<div
@@ -406,6 +415,11 @@ const Unit = ({
 							top: 0,
 							width: "100%",
 							display: "flex",
+							// The model image sits between this accent bar and the text,
+							// as it does on the official cards.  Every layer of the header
+							// therefore needs an explicit z-index: bar 1, image 2, text 3,
+							// lore 4 and 5.
+							zIndex: 1,
 						}}
 					>
 						<div
@@ -446,22 +460,29 @@ const Unit = ({
 							lineHeight: "1",
 							fontWeight: 800,
 							textTransform: "uppercase",
-							zIndex: 1,
+							zIndex: 3,
 							position: "relative",
 							display: "flex",
 							justifyContent: "space-between",
 							alignItems: "center",
 							marginBottom: 2,
+							// This box is as wide as the card and now lies over the image,
+							// where it would swallow the drag and the wheel that place the
+							// image. Only the glyphs need the pointer.
+							pointerEvents: "none",
 						}}
 					>
-						{name}
+						<span style={{ pointerEvents: "auto" }}>{name}</span>
 					</div>
-					<div className="relative flex gap-4">
+					<div className="pointer-events-none relative z-[3] flex gap-4">
 						<div
 							style={{
 								display: "flex",
 								flexDirection: "column",
 								gap: 6,
+								// See the note on the name above. The stat boxes are narrow,
+								// but the box around them reaches the far edge of the card.
+								pointerEvents: "auto",
 							}}
 						>
 							{modelStats.map((model, index) => (
@@ -489,7 +510,7 @@ const Unit = ({
 								top: 0,
 								bottom: 0,
 								width: "40%",
-								zIndex: 101,
+								zIndex: 4,
 								pointerEvents: "none",
 								background:
 									"linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.7) 100%)",
@@ -502,7 +523,7 @@ const Unit = ({
 								top: 0,
 								bottom: 0,
 								width: "29%",
-								zIndex: 102,
+								zIndex: 5,
 								display: "flex",
 								alignItems: "center",
 								padding: "30px 14px 14px 6px",
@@ -547,8 +568,14 @@ const Unit = ({
 						height: "100%",
 						bottom: 0,
 						width: hasLore ? "40%" : "60%",
-						zIndex: 100,
+						zIndex: 2,
 						overflow: "hidden",
+						// A picture wider than its box would otherwise end at a hard
+						// vertical edge over the stat line.  The official cards let it
+						// fade into the dark background instead.  The mask fades the
+						// image itself, so the background stays untouched.
+						maskImage: imageFade,
+						WebkitMaskImage: imageFade,
 					}}
 				>
 					{hasImage && <ImgEditor image={image} name={name} />}

src/index.css

@@ -208,6 +208,18 @@
 	}
 
 	@media print {
+		/* The cards get cut apart, so the white border around a cut card comes
+		   from two different places: the page margin on the outer edges, and
+		   half of the gap between two cards on the edges in between. The gap is
+		   therefore twice the page margin, and every edge ends up the same. */
+		@page {
+			margin: 8mm;
+		}
+
+		.avoid-page-break {
+			margin-bottom: 16mm !important;
+		}
+
 		.print-display-none,
 		.print-display-none * {
 			display: none !important;