fix: mobile responsive

src/components/forms/AddItemForm.scss

@@ -15,6 +15,6 @@
 	position: relative;
 	top: -40px;
 	left: 10px;
-	background-color: #f3ecd3;
+	background-color: rgb(241, 230, 204);
 	width: 80%;
 }

src/views/authenticated/List.scss

@@ -9,22 +9,45 @@
 	max-width: 100%;
 }
 
-.Header {
-	text-align: center;
-}
-
 .ListPageContainer {
 	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	box-sizing: border-box;
 }
 
 .Add-ShareList {
-	flex-grow: 1;
-	width: 50%;
+	flex-basis: 20%;
+}
+
+.Share-ListForm {
+	flex-basis: 80%;
+}
+
+.Add-ItemForm {
+	flex-basis: 80%;
 }
 
 .ListItemSection,
 .Add-ShareList {
 	flex-grow: 1; /* Both sections will take up equal width */
-	width: 50%;
+	flex-shrink: 1;
 	align-items: flex-end;
+	flex-wrap: column;
+}
+
+@media (max-width: 1000px) {
+	.ListItemSection,
+	.Add-ShareList {
+		flex-basis: 50%;
+		margin: auto;
+		align-items: flex-end;
+	}
+}
+
+@media (max-width: 575px) {
+	.Add-ShareList {
+		flex-basis: 100%; /* Full width for both sections */
+		flex-wrap: wrap;
+	}
 }

src/views/authenticated/List.tsx

@@ -1,5 +1,6 @@
 import "./List.scss";
 import { useParams, useNavigate } from "react-router-dom";
+import { useRef } from "react";
 import { useState, useMemo } from "react";
 import { ListItemCheckBox } from "../../components/ListItem";
 import { FilterListInput } from "../../components/FilterListInput";
@@ -67,52 +68,58 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 		);
 	}
 
+	const addShareListRef = useRef<HTMLElement | null>(null);
+
+	// Function to handle scrolling to the Add-ShareList section
+	const scrollToAddShareItem = () => {
+		if (addShareListRef.current) {
+			addShareListRef.current.scrollIntoView({ behavior: "smooth" });
+		}
+	};
+
 	// Main content when list is not empty
 	return (
 		<Container className="ListPageContainer">
 			<header>
 				<h2 className="ListName p-1 m-2 mt-2">{listName}</h2>
 				<Header />
 			</header>
-			<div className="d-flex">
-				{/* This is the div for the filter and adding items. */}
-				{/* Width should be 100% */}
-				<div className="ListItemSection">
-					<section className="d-flex sticky-top flex-nowrap align-items-center justify-content-center">
-						{unfilteredListItems.length > 0 && (
-							<FilterListInput
-								searchTerm={searchTerm}
-								setSearchTerm={setSearchTerm}
-							/>
-						)}
-
-						{/*<Button
-							className="ms-2"
-							onClick={() => navigate("/manage-list")}
-							aria-label="Navigate to add more items to your list"
-						>
-							{"Add items"}
-						</Button>
-						*/}
-					</section>
+			<div className="ListItemSection">
+				<section className="d-flex sticky-top flex-nowrap align-items-center justify-content-center">
+					{unfilteredListItems.length > 0 && (
+						<FilterListInput
+							searchTerm={searchTerm}
+							setSearchTerm={setSearchTerm}
+						/>
+					)}
 
-					<section className="ListItemContainer">
-						{filteredListItems.map((item) => (
-							<ListItemCheckBox key={item.id} item={item} listPath={listPath} />
-						))}
-					</section>
-				</div>
+					<Button
+						className="ms-2"
+						onClick={scrollToAddShareItem}
+						aria-label="Navigate to add more items to your list"
+					>
+						{"Add items"}
+					</Button>
+				</section>
 
-				{/* Width of this section should be 50%. */}
-				<section className="Add-ShareList d-flex flex-column justify-content-start align-items-center ">
-					<div className="ItemFunctions ">
-						<AddItemForm listPath={listPath} data={unfilteredListItems || []} />
-					</div>
-					<div className="ItemFunctions ">
-						<ShareListForm listPath={listPath} />
-					</div>
+				<section>
+					{filteredListItems.map((item) => (
+						<ListItemCheckBox key={item.id} item={item} listPath={listPath} />
+					))}
 				</section>
 			</div>
+
+			<section
+				ref={addShareListRef}
+				className="Add-ShareList d-flex flex-column justify-content-start align-items-center "
+			>
+				<div className="Add-ItemForm ">
+					<AddItemForm listPath={listPath} data={unfilteredListItems || []} />
+				</div>
+				<div className="Share-ListForm ">
+					<ShareListForm listPath={listPath} />
+				</div>
+			</section>
 		</Container>
 	);
 }