fix: ensure pages have headings & consistent margins

Author: sunaurus

src/app/create_private_message/[userid]/page.tsx

@@ -18,7 +18,7 @@ const CreateDirectMessagePage = async (props: {
   });
 
   return (
-    <div className={"m-2 lg:m-4"}>
+    <div className={"m-2 lg:mx-4"}>
       <h1 className={"mb-4 text-xl font-bold"}>
         {"Composing direct message..."}
       </h1>

src/app/inbox/page.tsx

@@ -91,7 +91,9 @@ const InboxPage = async (props: {
   ];
 
   return (
-    <div className={"m-2 lg:m-4"}>
+    <div className={"m-2 lg:mx-4"}>
+      <h1 className={"mb-2 text-xl font-bold"}>{"Inbox"}</h1>
+
       <SearchParamLinks
         currentActiveValue={currentType}
         label={"Type"}

src/app/login_reset/page.tsx

@@ -4,7 +4,7 @@ import { resetPasswordAction } from "@/app/login_reset/loginResetActions";
 
 const ForgotPasswordPage = () => {
   return (
-    <div className={"m-2 lg:m-4"}>
+    <div className={"m-2 lg:mx-4"}>
       <h1 className={"text-xl font-bold"}>{"Forgot password"}</h1>
       <div className={"mt-10 max-w-[600px] text-gray-400"}>
         {

src/app/login_reset/sent/page.tsx

@@ -3,7 +3,7 @@ import { SubmitButton } from "@/app/(ui)/button/SubmitButton";
 
 const ForgotPasswordPage = () => {
   return (
-    <div className={"m-2 lg:m-4"}>
+    <div className={"m-2 lg:mx-4"}>
       <h1 className={"text-xl font-bold"}>{"Forgot password"}</h1>
       <div className={"mt-10 max-w-[600px] text-gray-300"}>
         {"A password reset link has been sent to your e-mail."}

src/app/password_change/[token]/page.tsx

@@ -4,7 +4,7 @@ import { setNewPasswordAfterReset } from "@/app/login_reset/loginResetActions";
 
 const PasswordChangePage = (props: { readonly params: { token: string } }) => {
   return (
-    <div className={"m-2 lg:m-4"}>
+    <div className={"m-2 lg:mx-4"}>
       <h1 className={"text-xl font-bold"}>{"Set new password"}</h1>
 
       <div>

src/app/saved/page.tsx

@@ -46,9 +46,9 @@ const SavedPage = async (props: {
     (comments.length ?? 0) === limit || (posts.length ?? 0) === limit;
 
   return (
-    <div className={"m-3"}>
-      <h1 className={"text-xl font-bold"}>{"Saved"}</h1>
-      <div className={"mt-2"}>
+    <div className={"m-2 lg:mx-4"}>
+      <h1 className={"mb-2 text-xl font-bold"}>{"Saved"}</h1>
+      <div>
         <SearchParamLinks
           currentActiveValue={currentSortType}
           label={"Sort"}

src/app/search/page.tsx

@@ -74,7 +74,9 @@ const SearchPage = async (props: {
     (data?.users.length ?? 0) === limit;
 
   return (
-    <div className={"m-2 lg:m-4"}>
+    <div className={"m-2 lg:mx-4"}>
+      <h1 className={"mb-2 text-xl font-bold"}>{"Search"}</h1>
+
       <div className={""}>
         <SearchParamLinks
           currentActiveValue={currentSearchType}

src/app/settings/page.tsx

@@ -15,7 +15,9 @@ const SettingsPage = async () => {
 
   return (
     <div className={"m-2 lg:mx-4"}>
-      <div className={"flex flex-wrap items-center"}>
+      <div className={"flex flex-wrap items-center gap-2"}>
+        <h1 className={"mb-2 text-xl font-bold"}>{"User settings"}</h1>
+
         <StyledLink
           className={"mr-auto flex items-center gap-1"}
           href={`/u/${loggedInUser.local_user_view.person.name}`}

src/app/u/[username]/page.tsx

@@ -100,7 +100,7 @@ const UserPage = async (props: UserPageProps) => {
   ]);
 
   return (
-    <div className={"m-2 flex flex-col gap-2 lg:m-4"}>
+    <div className={"m-2 flex flex-col gap-2 lg:mx-4"}>
       <Header view={personView} />
       <div className={""}>
         <MarkdownWithFetchedContent id={personView.person.id} type={"person"} />