Allow results on user page to span wider

app/routes/u.$identifier.tsx

@@ -5,7 +5,6 @@ import type { UseDataFunctionReturn } from "@remix-run/react/dist/components";
 import { countries } from "countries-list";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
-import { Main } from "~/components/Main";
 import { SubNav, SubNavLink } from "~/components/SubNav";
 import { db } from "~/db";
 import { useUser } from "~/modules/auth";
@@ -93,9 +92,7 @@ export default function UserPageLayout() {
           </SubNavLink>
         )}
       </SubNav>
-      <Main>
-        <Outlet />
-      </Main>
+      <Outlet />
     </>
   );
 }

app/routes/u.$identifier/edit.tsx

@@ -16,6 +16,7 @@ import invariant from "tiny-invariant";
 import { z } from "zod";
 import { Button } from "~/components/Button";
 import { Label } from "~/components/Label";
+import { Main } from "~/components/Main";
 import { USER_BIO_MAX_LENGTH } from "~/constants";
 import { db } from "~/db";
 import { type User } from "~/db/types";
@@ -86,34 +87,36 @@ export default function UserEditPage() {
   const transition = useTransition();
 
   return (
-    <Form className="u-edit__container" method="post">
-      <div>
-        <label htmlFor="country">{t("user:country")}</label>
-        <select
-          className="u-edit__country-select"
-          name="country"
-          id="country"
-          defaultValue={parentRouteData.country?.code ?? ""}
-          data-cy="country-select"
+    <Main>
+      <Form className="u-edit__container" method="post">
+        <div>
+          <label htmlFor="country">{t("user:country")}</label>
+          <select
+            className="u-edit__country-select"
+            name="country"
+            id="country"
+            defaultValue={parentRouteData.country?.code ?? ""}
+            data-cy="country-select"
+          >
+            <option value="" />
+            {data.countries.map((country) => (
+              <option key={country.code} value={country.code}>
+                {`${country.name} ${country.emoji}`}
+              </option>
+            ))}
+          </select>
+        </div>
+        <BioTextarea initialValue={parentRouteData.bio} />
+        <Button
+          loadingText={t("common:actions.saving")}
+          type="submit"
+          loading={transition.state === "submitting"}
+          data-cy="submit-button"
         >
-          <option value="" />
-          {data.countries.map((country) => (
-            <option key={country.code} value={country.code}>
-              {`${country.name} ${country.emoji}`}
-            </option>
-          ))}
-        </select>
-      </div>
-      <BioTextarea initialValue={parentRouteData.bio} />
-      <Button
-        loadingText={t("common:actions.saving")}
-        type="submit"
-        loading={transition.state === "submitting"}
-        data-cy="submit-button"
-      >
-        {t("common:actions.save")}
-      </Button>
-    </Form>
+          {t("common:actions.save")}
+        </Button>
+      </Form>
+    </Main>
   );
 }
 

app/routes/u.$identifier/index.tsx

@@ -8,6 +8,7 @@ import { Badge } from "~/components/Badge";
 import { TwitchIcon } from "~/components/icons/Twitch";
 import { TwitterIcon } from "~/components/icons/Twitter";
 import { YouTubeIcon } from "~/components/icons/YouTube";
+import { Main } from "~/components/Main";
 import type { Unpacked } from "~/utils/types";
 import { assertUnreachable } from "~/utils/types";
 import { badgeExplanationText } from "../badges/$id";
@@ -23,39 +24,43 @@ export default function UserInfoPage() {
   const data = parentRoute.data as UserPageLoaderData;
 
   return (
-    <div className="u__container">
-      <div className="u__avatar-container">
-        <Avatar
-          discordAvatar={data.discordAvatar}
-          discordId={data.discordId}
-          size="lg"
-          className="u__avatar"
-        />
-        <h2 className="u__name">
-          {data.discordName}
-          <span className="u__discriminator">#{data.discordDiscriminator}</span>
-        </h2>
-        {data.country ? (
-          <div className="u__country">
-            <span className="u__country-emoji">{data.country.emoji}</span>{" "}
-            <span className="u__country-name">{data.country.name}</span>
+    <Main>
+      <div className="u__container">
+        <div className="u__avatar-container">
+          <Avatar
+            discordAvatar={data.discordAvatar}
+            discordId={data.discordId}
+            size="lg"
+            className="u__avatar"
+          />
+          <h2 className="u__name">
+            {data.discordName}
+            <span className="u__discriminator">
+              #{data.discordDiscriminator}
+            </span>
+          </h2>
+          {data.country ? (
+            <div className="u__country">
+              <span className="u__country-emoji">{data.country.emoji}</span>{" "}
+              <span className="u__country-name">{data.country.name}</span>
+            </div>
+          ) : null}
+          <div className="u__socials">
+            {data.twitch ? (
+              <SocialLink type="twitch" identifier={data.twitch} />
+            ) : null}
+            {data.twitter ? (
+              <SocialLink type="twitter" identifier={data.twitter} />
+            ) : null}
+            {data.youtubeId ? (
+              <SocialLink type="youtube" identifier={data.youtubeId} />
+            ) : null}
           </div>
-        ) : null}
-        <div className="u__socials">
-          {data.twitch ? (
-            <SocialLink type="twitch" identifier={data.twitch} />
-          ) : null}
-          {data.twitter ? (
-            <SocialLink type="twitter" identifier={data.twitter} />
-          ) : null}
-          {data.youtubeId ? (
-            <SocialLink type="youtube" identifier={data.youtubeId} />
-          ) : null}
         </div>
+        <BadgeContainer badges={data.badges} />
+        {data.bio && <article>{data.bio}</article>}
       </div>
-      <BadgeContainer badges={data.badges} />
-      {data.bio && <article>{data.bio}</article>}
-    </div>
+    </Main>
   );
 }
 

app/routes/u.$identifier/results.tsx

@@ -15,67 +15,69 @@ export default function UserResultsPage() {
   const data = parentRoute.data as UserPageLoaderData;
 
   return (
-    <Section className="u__results-section">
-      <table>
-        <thead>
-          <tr>
-            <th>{t("results.placing")}</th>
-            <th>{t("results.team")}</th>
-            <th>{t("results.tournament")}</th>
-            <th>{t("results.date")}</th>
-            <th>{t("results.mates")}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {data.results.map((result) => (
-            <tr key={result.eventId}>
-              <td className="pl-4">{placementString(result.placement)}</td>
-              <td>{result.teamName}</td>
-              <td>
-                <Link to={calendarEventPage(result.eventId)}>
-                  {result.eventName}
-                </Link>
-              </td>
-              <td>
-                {databaseTimestampToDate(result.startTime).toLocaleDateString(
-                  i18n.language,
-                  {
-                    day: "numeric",
-                    month: "numeric",
-                    year: "numeric",
-                  }
-                )}
-              </td>
-              <td>
-                <ul className="u__results-players">
-                  {result.mates.map((player) => (
-                    <li
-                      key={typeof player === "string" ? player : player.id}
-                      className="flex items-center"
-                    >
-                      {typeof player === "string" ? (
-                        player
-                      ) : (
-                        <Link
-                          to={userPage(player.discordId)}
-                          className="stack horizontal xs items-center"
-                        >
-                          <Avatar
-                            discordAvatar={player.discordAvatar}
-                            discordId={player.discordId}
-                            size="xxs"
-                          />{" "}
-                          {discordFullName(player)}
-                        </Link>
-                      )}
-                    </li>
-                  ))}
-                </ul>
-              </td>
+    <main className="u__results-main">
+      <Section className="u__results-section">
+        <table>
+          <thead>
+            <tr>
+              <th>{t("results.placing")}</th>
+              <th>{t("results.team")}</th>
+              <th>{t("results.tournament")}</th>
+              <th>{t("results.date")}</th>
+              <th>{t("results.mates")}</th>
             </tr>
-          ))}
-        </tbody>
-      </table>
-    </Section>
+          </thead>
+          <tbody>
+            {data.results.map((result) => (
+              <tr key={result.eventId}>
+                <td className="pl-4">{placementString(result.placement)}</td>
+                <td>{result.teamName}</td>
+                <td>
+                  <Link to={calendarEventPage(result.eventId)}>
+                    {result.eventName}
+                  </Link>
+                </td>
+                <td>
+                  {databaseTimestampToDate(result.startTime).toLocaleDateString(
+                    i18n.language,
+                    {
+                      day: "numeric",
+                      month: "numeric",
+                      year: "numeric",
+                    }
+                  )}
+                </td>
+                <td>
+                  <ul className="u__results-players">
+                    {result.mates.map((player) => (
+                      <li
+                        key={typeof player === "string" ? player : player.id}
+                        className="flex items-center"
+                      >
+                        {typeof player === "string" ? (
+                          player
+                        ) : (
+                          <Link
+                            to={userPage(player.discordId)}
+                            className="stack horizontal xs items-center"
+                          >
+                            <Avatar
+                              discordAvatar={player.discordAvatar}
+                              discordId={player.discordId}
+                              size="xxs"
+                            />{" "}
+                            {discordFullName(player)}
+                          </Link>
+                        )}
+                      </li>
+                    ))}
+                  </ul>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Section>
+    </main>
   );
 }

app/styles/u.css

@@ -126,6 +126,11 @@
   font-weight: var(--bold);
 }
 
+.u__results-main {
+  max-width: 52rem;
+  margin: 0 auto;
+}
+
 .u__results-section {
   overflow-x: auto;
 }