accounts/SignIn: various visual improvement

src/accounts/SignIn.css

@@ -0,0 +1,27 @@
+.SignIn {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 448px;
+
+  @media (max-width: 600px) {
+    & {
+      position: static;
+      height: 100vh;
+      width: 100%;
+      transform: none;
+      overflow: auto;
+    }
+  }
+
+  >.key-content {
+    height: 100%;
+
+    >form {
+      display: flex;
+      flex-flow: column;
+      gap: 16px;
+    }
+  }
+}

src/accounts/SignIn.tsx

@@ -18,6 +18,7 @@ import { createRestAPIClient } from "masto";
 import { getOrRegisterApp } from "./stores";
 import { useSearchParams } from "@solidjs/router";
 import { $settings } from "../settings/stores";
+import "./SignIn.css";
 
 type ErrorParams = {
   error: string;
@@ -36,13 +37,6 @@ const SignIn: Component = () => {
   const [targetSiteTitle, setTargetSiteTitle] = createSignal("");
 
   useDocumentTitle("Sign In");
-  css`
-    form {
-      display: flex;
-      flex-flow: column;
-      gap: 16px;
-    }
-  `;
 
   const serverUrl = () => {
     const url = rawServerUrl();
@@ -121,19 +115,19 @@ const SignIn: Component = () => {
   };
 
   return (
-    <div class={cards.layoutCentered}>
+    <main class="SignIn">
       <Show when={params.error || params.errorDescription}>
         <div class={cards.card} style={{ "margin-bottom": "20px" }}>
           <p>Authorization is failed.</p>
           <p>{params.errorDescription}</p>
           <p>
-            Please try again later. If the problem persist, you can seek for
+            Please try again later. If the problem persists, you can ask for
             help from the server administrator.
           </p>
         </div>
       </Show>
       <div
-        class={/*once*/ cards.card}
+        class={`${cards.card} key-content`}
         aria-busy={currentState() !== "inactive" ? "true" : "false"}
         aria-describedby={
           currentState() !== "inactive" ? progressId : undefined
@@ -169,7 +163,7 @@ const SignIn: Component = () => {
           </div>
         </form>
       </div>
-    </div>
+    </main>
   );
 };