fix: adjusted font-sizes and listitem inputs to be more responsive at small screen sizes

Author: eternalmaha

src/components/ListItem.scss

@@ -60,4 +60,7 @@
 	.EditItem {
 		flex-direction: column;
 	}
+	.PurchaseItem {
+		font-size: 0.75em;
+	}
 }

src/components/ListItem.tsx

@@ -124,12 +124,12 @@ export function ListItemCheckBox({ item, listPath }: Props) {
 	return (
 		<div className="d-flex flex-column justify-content-center mt-5">
 			<span
-				className={`UrgencyStatus text-nowrap ms-5 px-5 ${urgencyStatus.replace(/\s/g, "-")}`}
+				className={`UrgencyStatus text-center text-nowrap ms-5 w-auto p-1 ${urgencyStatus.replace(/\s/g, "-")}`}
 			>
 				{urgencyStatus}
 			</span>
 			<section className="ListItemBox custom-borders d-flex p-2 m-1 align-items-center">
-				<section className="d-flex flex-grow-1 PurchaseItem">
+				<section className="PurchaseItem d-flex flex-grow-1">
 					<Form.Check
 						className="me-3"
 						type="checkbox"
@@ -141,7 +141,7 @@ export function ListItemCheckBox({ item, listPath }: Props) {
 						aria-checked={isChecked}
 						disabled={isChecked}
 					/>
-					<Form.Label className="">{item.name}</Form.Label>
+					<Form.Label>{item.name}</Form.Label>
 				</section>
 
 				<section className="EditItem d-flex gap-2 align-items-end">

src/components/forms/ItemQuantityForm.tsx

@@ -46,9 +46,9 @@ export function ItemQuantityForm({
 	};
 
 	return (
-		<div className="d-flex">
+		<div className="d-flex align-items-center">
 			<Form.Control
-				className="me-3 w-auto"
+				className="w-auto p-0 me-1 text-center"
 				id="item-quantity"
 				aria-label="Item quantity"
 				type="number"