some units are now more compact, for example pc squad

src/10th/Roster.jsx

@@ -190,6 +190,7 @@ const Unit = ({ unit, index, catalog, onePerPage, forceRules }) => {
 				<div
 					style={{
 						padding: "4px 16px",
+						paddingBottom: 0,
 						color: "#fff",
 						position: "relative",
 						marginLeft: "1.3rem",
@@ -255,14 +256,12 @@ const Unit = ({ unit, index, catalog, onePerPage, forceRules }) => {
 							{cost.points}pts
 						</span>
 					</div>
-
+					<div className="relative z-10 flex gap-4">
 						<div
 							style={{
 								display: "flex",
 								flexDirection: "column",
 								gap: 6,
-							zIndex: 1,
-							position: "relative",
 							}}
 						>
 							{modelStats.map((model, index) => (
@@ -276,6 +275,21 @@ const Unit = ({ unit, index, catalog, onePerPage, forceRules }) => {
 								/>
 							))}
 						</div>
+						{modelStats?.[0] && (
+							<div
+								className={`mt-[17px] ${
+									modelStats.length > 1 ? "" : "self-center"
+								}`}
+								style={{
+									fontSize: "0.7em",
+								}}
+							>
+								{modelList.map((model, index) => (
+									<div key={model}>{model}</div>
+								))}
+							</div>
+						)}
+					</div>
 				</div>
 				<div
 					style={{
@@ -453,7 +467,6 @@ const ModelStats = ({ modelStat, index, showName, modelList }) => {
 		wounds = "/";
 	}
 
-	const showWeapons = index === 0;
 	return (
 		<div style={{ display: "flex", gap: "1.2rem" }}>
 			<Characteristic title="M" characteristic={move} index={index} />
@@ -462,6 +475,7 @@ const ModelStats = ({ modelStat, index, showName, modelList }) => {
 			<Characteristic title="W" characteristic={wounds} index={index} />
 			<Characteristic title="LD" characteristic={leadership} index={index} />
 			<Characteristic title="OC" characteristic={oc} index={index} />
+			{showName && (
 				<div
 					className="flex flex-wrap items-center gap-2"
 					style={{
@@ -469,20 +483,10 @@ const ModelStats = ({ modelStat, index, showName, modelList }) => {
 						textShadow: "0px 0px 5px rgb(0 0 0)",
 					}}
 				>
-				{showName && <div style={{ whiteSpace: "nowrap" }}>{name}</div>}
+					<div style={{ whiteSpace: "nowrap" }}>{name}</div>
-				{showWeapons && (
-					<div
-						style={{
-							fontSize: "0.7em",
-						}}
-					>
-						{modelList.map((model, index) => (
-							<div key={model}>{model}</div>
-						))}
 				</div>
 			)}
 		</div>
-		</div>
 	);
 };