style improvements

src/10th/Roster.jsx

@@ -185,6 +185,7 @@ const Unit = ({ unit, index, catalog, onePerPage, forceRules }) => {
 						padding: "4px 16px",
 						color: "#fff",
 						position: "relative",
+						marginLeft: "1.3rem",
 					}}
 				>
 					<div
@@ -347,6 +348,7 @@ const Unit = ({ unit, index, catalog, onePerPage, forceRules }) => {
 				}}
 			>
 				<div
+					className="pt-5"
 					style={{
 						flex: "1",
 						borderRight: "2px solid var(--primary-color)",
@@ -412,11 +414,11 @@ const Unit = ({ unit, index, catalog, onePerPage, forceRules }) => {
 
 					<Keywords keywords={keywords} />
 				</div>
-				<div className=" relative max-w-[400px] flex-1 p-1 pb-[50px] print:p-[20px] sm:p-2 sm:pb-[50px] sm:print:p-[20px] sm:print:pb-[50px] md:p-[20px] md:pb-[50px] md:print:p-[20px] md:print:pb-[50px]">
+				<div className=" relative max-w-[400px] flex-1 p-1 pb-[50px] pt-5 print:p-[20px] sm:p-2 sm:pb-[50px] sm:print:p-[20px] sm:print:pb-[50px] md:p-[20px] md:pb-[50px] md:print:p-[20px] md:print:pb-[50px]">
 					<div
 						style={{
 							fontSize: "1.1em",
-							padding: "1px 8px",
+							padding: "1px 6px",
 							backgroundColor: "var(--primary-color)",
 							color: "#fff",
 							fontWeight: 600,
@@ -445,6 +447,13 @@ const ModelStats = ({ modelStat, index, showName, modelList }) => {
 		wounds = "/";
 	}
 
+	if (modelList.length === 1) {
+		modelList[0] = modelList[0]
+			.replace(name, "")
+			.replace("(", "")
+			.replace(")", "");
+	}
+
 	const showWeapons = index === 0;
 	return (
 		<div style={{ display: "flex", gap: "1.2rem", flexWrap: "wrap" }}>
@@ -471,6 +480,7 @@ const ModelStats = ({ modelStat, index, showName, modelList }) => {
 							marginTop: 16,
 							fontSize: "0.7em",
 							paddingLeft: showName ? 8 : 0,
+							backgroundColor: "var(--primary-color-transparent)",
 						}}
 					>
 						{modelList.map((model, index) => (

src/10th/Weapons.jsx

@@ -114,6 +114,7 @@ const Weapon = ({ weapon, previousWeapon, nextWeapon, isMelee, className }) => {
 				</td>
 				<td style={{ textAlign: "left" }}>
 					<div
+						className="min-w-[24vw]"
 						style={{
 							display: "flex",
 							alignItems: "center",

src/App.jsx

@@ -205,7 +205,7 @@ function App() {
 
 			<div className="body">
 				<div
-					className="print-display-none"
+					className="print-display-none max-w-[95vw]"
 					style={{
 						display: "flex",
 						flexDirection: roster ? "row" : "column",
@@ -260,7 +260,7 @@ function App() {
 				</div>
 				<div className="print-display-none"></div>
 				<div
-					className="print-display-none"
+					className="print-display-none max-w-[95vw]"
 					style={{ display: "flex", width: "100%", gap: 8 }}
 				>
 					<input
@@ -308,7 +308,7 @@ function App() {
 				</div>
 
 				<div
-					className="print-display-none"
+					className="print-display-none max-w-[95vw]"
 					style={{ display: roster ? "flex" : "none", width: "100%", gap: 16 }}
 				>
 					<label style={{ display: "flex", alignItems: "center", gap: 4 }}>
@@ -358,6 +358,7 @@ function App() {
 				)}
 
 				<div
+					className="max-w-[95vw]"
 					style={{
 						paddingTop: 8,
 						fontSize: "1.7rem",
@@ -367,6 +368,7 @@ function App() {
 					Examples
 				</div>
 				<div
+					className="max-w-[95vw]"
 					style={{
 						gap: 8,
 						flexWrap: "wrap",
@@ -404,7 +406,7 @@ function App() {
 					</button>
 				</div>
 				<div
-					className="print-display-none"
+					className="print-display-none max-w-[95vw]"
 					style={{ display: roster ? "none" : "" }}
 				>
 					<div style={{ padding: "8px 0", fontSize: "1.7rem" }}>About</div>

src/index.css

@@ -8,7 +8,7 @@
 			Arial, sans-serif;
 		line-height: 1.5;
 		font-weight: 400;
-		font-size: 14px;
+		font-size: 13px;
 
 		color-scheme: light dark;
 		color: #111113;