improved look on small devices

src/10th/Roster.jsx

@@ -347,10 +347,10 @@ const Unit = ({ unit, index, catalog, onePerPage, forceRules }) => {
 				</div>
 			</div>
 			<div
+				// hide border left and right when width smaller than 600px
+				className="border-b-2 border-t-0 border-[var(--primary-color)] sm:border-l-2 sm:border-r-2"
 				style={{
 					display: "flex",
-					border: "2px solid var(--primary-color)",
-					borderTop: "none",
 					backgroundColor: "#DFE0E2",
 				}}
 			>

src/10th/Weapons.jsx

@@ -14,7 +14,7 @@ export const Weapons = ({ title, weapons, modelStats, forceRules }) => {
 							color: "#fff",
 						}}
 					>
-						<th className="w-[2.2em]">
+						<th className="w-[2em]">
 							<div
 								style={{
 									display: "flex",
@@ -119,6 +119,7 @@ const Weapon = ({ weapon, previousWeapon, nextWeapon, isMelee, className }) => {
 							alignItems: "center",
 							flexWrap: "wrap",
 							gap: "0 4px",
+							lineHeight: 1.2,
 						}}
 					>
 						{differentProfiles && selectionName + " - "}

src/index.css

@@ -219,7 +219,7 @@
 		}
 	}
 
-	@media screen and (max-width: 600px) {
+	@media screen and (max-width: 640px) {
 		:root {
 			font-size: 9px;
 			line-height: 1.3;
@@ -232,5 +232,13 @@
 			padding-left: 0;
 			padding-right: 0;
 		}
+
+		.weapons-table th {
+			padding: 2px 0.2rem;
+		}
+
+		.weapons-table td {
+			padding: 1px 0.2rem;
+		}
 	}
 }