style(notifcaion): style changes to the notificaion card and started the table

frontend/src/routes/(auth)/-components/NotificationsSubCard.tsx

@@ -36,7 +36,7 @@ export default function NotificationsSubCard({ user }: any) {
 
 	return (
 		<div>
-			<Card className="p-3 w-128">
+			<Card className="p-3 w-lg">
 				<CardHeader>
 					<CardTitle>Notifications</CardTitle>
 					<CardDescription>

frontend/src/routes/(auth)/user.profile.tsx

@@ -57,8 +57,9 @@ function RouteComponent() {
 		},
 	});
 	return (
-		<div className="flex justify-center flex-col pt-4 gap-2 lg:flex-row">
-			<div>
+		<div className="flex justify-center flex-col pt-4 gap-2">
+			<div className="flex justify-center flex-col pt-4 gap-2 lg:flex-row">
+				<div>
 				<Card className="p-6 w-96">
 					<CardHeader>
 						<CardTitle>Profile</CardTitle>
@@ -99,7 +100,7 @@ function RouteComponent() {
 			<div>
 				<Suspense
 					fallback={
-						<Card className="p-3 w-96">
+						<Card className="p-3 w-lg">
 							<CardHeader>
 								<CardTitle>Notifications</CardTitle>
 							</CardHeader>
@@ -116,6 +117,14 @@ function RouteComponent() {
 					{session && <NotificationsSubCard user={session.user} />}
 				</Suspense>
 			</div>
+			</div>
+			<div className="w-fill">
+				<Card>
+					<CardHeader className="text-center">
+						This is where the user's current notification subs will be. 
+					</CardHeader>
+				</Card>
+			</div>
 		</div>
 	);
 }