more responsive design for characteristics

src/Roster.jsx

@@ -392,44 +392,45 @@ const ModelStats = ({
 			<Characteristic title="SV" characteristic={save} index={index} />
 			<Characteristic title="W" characteristic={wounds} index={index} />
 			<Characteristic title="LD" characteristic={leadership} index={index} />
-
+			<div>
-			{showName && (
+				{showName && (
-				<div
+					<div
-					style={{
+						style={{
-						marginTop: index === 0 ? 16 : 0,
+							marginTop: index === 0 ? 16 : 0,
-						marginLeft: -10,
+							marginLeft: -10,
-						whiteSpace: "nowrap",
+							whiteSpace: "nowrap",
-					}}
+						}}
-				>
+					>
-					{name}
+						{name}
-				</div>
+					</div>
-			)}
+				)}
-			{showWeapons && (
+				{showWeapons && (
-				<div
+					<div
-					style={{
+						style={{
-						marginTop: index === 0 ? 16 : 0,
+							marginTop: index === 0 && !showName ? 16 : 0,
-						marginLeft: -10,
+							marginLeft: -10,
-						fontSize: "0.7em",
+							fontSize: "0.7em",
-					}}
+						}}
-				>
+					>
-					{modelListMatches.map((model, index) => (
+						{modelListMatches.map((model, index) => (
-						<div key={model}>{model}</div>
+							<div key={model}>{model}</div>
-					))}
+						))}
-				</div>
+					</div>
-			)}
+				)}
-			{degradingStuff.length > 0 && (
+				{degradingStuff.length > 0 && (
-				<div
+					<div
-					style={{
+						style={{
-						whiteSpace: "normal",
+							whiteSpace: "normal",
-						marginLeft: -10,
+							marginLeft: -10,
-						fontSize: "0.7em",
+							fontSize: "0.7em",
-					}}
+						}}
-				>
+					>
-					{`Each time this model makes
+						{`Each time this model makes
 							an attack, subtract 
 							${degradingStuff.join(" and ")}.`}
-				</div>
+					</div>
-			)}
+				)}
+			</div>
 		</div>
 	);
 };