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 + " - "}