From cfc6a8ef3b5a3f4dc0794e6f2d6312b82a620293 Mon Sep 17 00:00:00 2001
From: Maha <maha.ahmed4peace@gmail.com>
Date: Fri, 18 Oct 2024 20:28:54 -0400
Subject: [PATCH] fix: adjusted font-sizes and listitem inputs to be more
 responsive at small screen sizes

---
 src/components/ListItem.scss              | 3 +++
 src/components/ListItem.tsx               | 6 +++---
 src/components/forms/ItemQuantityForm.tsx | 4 ++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/ListItem.scss b/src/components/ListItem.scss
index 20db2d3..0527427 100644
--- a/src/components/ListItem.scss
+++ b/src/components/ListItem.scss
@@ -60,4 +60,7 @@
 	.EditItem {
 		flex-direction: column;
 	}
+	.PurchaseItem {
+		font-size: 0.75em;
+	}
 }
diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx
index 7e48c6c..ea199b8 100644
--- a/src/components/ListItem.tsx
+++ b/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">
diff --git a/src/components/forms/ItemQuantityForm.tsx b/src/components/forms/ItemQuantityForm.tsx
index c0452c8..086323e 100644
--- a/src/components/forms/ItemQuantityForm.tsx
+++ b/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"