Merge pull request #63 from the-collab-lab/an-nav-padding

Nav Padding fix
the-collab-lab · Apr 5, 2024 · 2b76618 · 2b76618
2 parents 855ca48 + d93ed78
commit 2b76618
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/components/NavigationBar.jsx b/src/components/NavigationBar.jsx
@@ -131,12 +131,12 @@ export default function NavigationBar({ data, setListPath, setLoading }) {
 							{/* The user's lists display when the user's uid matches the uid contained in the listPath of a shopping list.*/}
 							{openFormModal ? (
 								<Modal isOpen={openFormModal} onClose={closeModal}>
-									<div className="flex flex-col gap-4 p-4">
+									<div className="flex flex-col gap-4 p-2">
 										<AddList setListPath={setListPath} />
 									</div>
 								</Modal>
 							) : (
-								<div className={`flex-col ${sidebarWidth} `}>
+								<div className={`flex-col ${sidebarWidth}`}>
 									<div
 										className={`flex min-h-12 xsm:h-[30vh] sm:h-[35vh] pt-2 pb-4 ${sidebarWidth}`}
 									>
@@ -147,7 +147,7 @@ export default function NavigationBar({ data, setListPath, setLoading }) {
 													user?.uid,
 											) ? (
 												<ul
-													className={`${sidebarWidth} gap-6 text-sm text-left overflow-auto`}
+													className={`${sidebarWidth} gap-6 text-sm text-left px-2 overflow-auto`}
 												>
 													{' '}
 													{data.map((list) => (
@@ -205,7 +205,7 @@ export default function NavigationBar({ data, setListPath, setLoading }) {
 														) !== user?.uid,
 												) ? (
 													<ul
-														className={`${sidebarWidth} gap-6 text-sm font-family: Inter font-medium leading-4 text-left rounded-lg min-h-12 overflow-auto`}
+														className={`${sidebarWidth} gap-6 text-sm px-2 text-left rounded-lg min-h-12 overflow-y-auto`}
 													>
 														{' '}
 														{data.map((list) => (

diff --git a/src/components/NavigationBarSingleList.jsx b/src/components/NavigationBarSingleList.jsx
@@ -32,7 +32,7 @@ export function NavigationBarSingleList({
 
 	return (
 		<li
-			className={`flex-grow justify-between px-6 h-12 bg-list rounded-lg shadow-sm mt-4 hover:bg-[#ebf5ff] hover:bg-opacity-85 ${windowLocationListPath && localStorageListName === name ? 'bg-[#ebf5ff] bg-opacity-85' : null}`}
+			className={`flex-grow justify-between xsm:px-4 sm:px-2 h-12 bg-list rounded-lg shadow-sm mt-4 hover:bg-[#ebf5ff] hover:bg-opacity-85 ${windowLocationListPath && localStorageListName === name ? 'bg-[#ebf5ff] bg-opacity-85' : null}`}
 		>
 			{/*The above hex code (#ebf5ff) only worked in the ternary operator in lowercase format, not uppercase.*/}
 			{/* Using Link instead of button */}