refactor: improve SignIn form layout and centering

app/(main)/ClientComponents/main/ServerListClient.tsx

@@ -71,10 +71,17 @@ const ErrorState = ({ error, t }: { error: Error; t: any }) => (
   </div>
 )
 
-const ServerList = ({ servers, inline, containerRef }: { servers: any[]; inline: string; containerRef: any }) => {
+const ServerList = ({
+  servers,
+  inline,
+  containerRef,
+}: { servers: any[]; inline: string; containerRef: any }) => {
   if (inline === "1") {
     return (
-      <section ref={containerRef} className="flex flex-col gap-2 overflow-x-scroll scrollbar-hidden">
+      <section
+        ref={containerRef}
+        className="flex flex-col gap-2 overflow-x-scroll scrollbar-hidden"
+      >
         {servers.map((serverInfo) => (
           <ServerCardInline key={serverInfo.id} serverInfo={serverInfo} />
         ))}

app/(main)/footer.tsx

@@ -20,7 +20,8 @@ const FooterLink = ({ href, children }: LinkProps) => (
   </a>
 )
 
-const baseTextStyles = "text-[13px] font-light tracking-tight text-neutral-600/50 dark:text-neutral-300/50"
+const baseTextStyles =
+  "text-[13px] font-light tracking-tight text-neutral-600/50 dark:text-neutral-300/50"
 
 export default function Footer() {
   const t = useTranslations("Footer")
@@ -32,19 +33,12 @@ export default function Footer() {
       <section className="flex flex-col">
         <p className={`mt-3 flex gap-1 ${baseTextStyles}`}>
           {t("p_146-598_Findthecodeon")}{" "}
-          <FooterLink href={GITHUB_URL}>
-            {t("a_303-585_GitHub")}
-          </FooterLink>
-          <FooterLink href={`${GITHUB_URL}/releases/tag/v${version}`}>
-            v{version}
-          </FooterLink>
+          <FooterLink href={GITHUB_URL}>{t("a_303-585_GitHub")}</FooterLink>
+          <FooterLink href={`${GITHUB_URL}/releases/tag/v${version}`}>v{version}</FooterLink>
         </p>
         <section className={`mt-1 flex items-center gap-2 ${baseTextStyles}`}>
           {t("section_607-869_2020")}
-          {currentYear}{" "}
-          <FooterLink href={PERSONAL_URL}>
-            {t("a_800-850_Hamster1963")}
-          </FooterLink>
+          {currentYear} <FooterLink href={PERSONAL_URL}>{t("a_800-850_Hamster1963")}</FooterLink>
         </section>
       </section>
       <p className={`mt-1 ${baseTextStyles}`}>

components/SignIn.tsx

@@ -48,7 +48,10 @@ export function SignIn() {
     setLoading(false)
   }
   return (
-    <form className="flex flex-col items-center justify-start gap-4 p-4 " onSubmit={handleSubmit}>
+    <form
+      className="flex flex-col flex-1 items-center justify-center gap-4 p-4 "
+      onSubmit={handleSubmit}
+    >
       <input type="hidden" name="csrfToken" value={csrfToken} />
       <section className="flex flex-col items-start gap-2">
         <label className="flex flex-col items-start gap-1 ">