Don't block center dashboard pages (+ other alignment tweaks)

Author: futurGH

frontend/src/components/AccountSwitcher.mlx

@@ -4,13 +4,29 @@ open Melange_json.Primitives
 open React
 module Aria = ReactAria
 
+let button_class_inline =
+  "group inline-flex flex-row items-center px-1.5 py-1 -mx-0.75 -my-1 \
+   rounded-lg focus-visible:outline-none hover:bg-mist-20/40 \
+     active:bg-mist-20/40"
+
+let button_class_default =
+  "group min-w-48 flex flex-row items-center gap-x-1 px-2 py-1.5 -mx-2 \
+   rounded-lg focus-visible:outline-none hover:bg-mist-20/40 \
+     active:bg-mist-20/40"
+
+let value_class_inline = "text-mana-100 font-serif inline-flex items-center gap-x-1"
+
+let value_class_default = "text-mana-100 font-serif flex items-center gap-x-1"
+
 type actor =
   {did: string; handle: string; avatar_data_uri: string option [@default None]}
 [@@deriving json]
 
-let fallback handle avatar =
-  <button className="flex px-2 py-1.5 -mx-2 rounded-lg">
-    <span className="text-mana-100 font-serif flex items-center gap-x-1">
+let fallback handle avatar inline =
+  let button_class = if inline then button_class_inline else button_class_default in
+  let value_class = if inline then value_class_inline else value_class_default in
+  <button className=button_class>
+    <span className=value_class>
       (match avatar with
       | Some uri -> <img className="w-5 h-5 mr-1 rounded-md" src=uri />
       | None -> null)
@@ -50,21 +66,9 @@ let[@react.component] make ~current_user ~logged_in_users ~add_account_url
               () )
         else ()]
   in
-  let button_class =
-    if inline then
-      "group inline-flex flex-row items-center px-1.5 py-1 -mx-0.75 -my-1 \
-       rounded-lg focus-visible:outline-none hover:bg-mist-20/40 \
-       active:bg-mist-20/40"
-    else
-      "group min-w-48 flex flex-row items-center gap-x-1 px-2 py-1.5 -mx-2 \
-       rounded-lg focus-visible:outline-none hover:bg-mist-20/40 \
-       active:bg-mist-20/40"
-  in
-  let value_class =
-    if inline then "text-mana-100 font-serif inline-flex items-center gap-x-1"
-    else "text-mana-100 font-serif flex items-center gap-x-1"
-  in
-  <ClientOnly fallback=(fallback current_user.handle current_user.avatar_data_uri)>
+  let button_class = if inline then button_class_inline else button_class_default in
+  let value_class = if inline then value_class_inline else value_class_default in
+  <ClientOnly fallback=(fallback current_user.handle current_user.avatar_data_uri inline)>
   [%browser_only
     (fun () ->
       <Aria.Select name className="inline" defaultValue=current_user.did placeholder="select account" onChange=handleAccountSwitch>

frontend/src/templates/AccountPage.mlx

@@ -78,7 +78,7 @@ let[@react.component] make
   let confirmEmailLoading, setConfirmEmailLoading = useState (fun () -> false) in
   let confirmEmailTokenInput, setConfirmEmailTokenInput = useState (fun () -> "") in
   let successMessage, setSuccessMessage = useState (fun () -> success) in
-  <div className="w-auto h-auto px-4 sm:px-0 flex flex-col md:flex-row gap-12">
+  <div className="w-auto h-full px-4 sm:px-0 pt-16 mx-auto flex flex-col md:flex-row gap-12">
     <AccountSidebar
       current_user logged_in_users active_page="/account"
     />

frontend/src/templates/AccountPermissionsPage.mlx

@@ -67,7 +67,7 @@ let[@react.component] make
     ~props:
       ({current_user; logged_in_users; csrf_token; authorized_apps; devices} :
         props ) () =
-  <div className="w-auto h-auto px-4 sm:px-0 flex flex-col md:flex-row gap-12">
+  <div className="w-auto h-full px-4 sm:px-0 pt-16 mx-auto flex flex-col md:flex-row gap-12">
     <AccountSidebar
       current_user logged_in_users active_page="/account/permissions"
     />

frontend/src/templates/AdminInvitesPage.mlx

@@ -38,7 +38,7 @@ let[@react.component] make
   let editRemaining, setEditRemaining = useState (fun () -> "") in
   (* delete confirmation state *)
   let deleteConfirmFor, setDeleteConfirmFor = useState (fun () -> (None : invite option)) in
-  <div className="w-full max-w-3xl h-auto px-4 sm:px-0 flex flex-col md:flex-row gap-12">
+  <div className="w-full max-w-3xl h-full px-4 sm:px-0 pt-16 mx-auto flex flex-col md:flex-row gap-12">
     <Sidebar pages=admin_pages active_page="/admin/invites" />
     <main className="flex-1 w-full max-w-2xl">
       <h1 className="text-2xl font-serif text-mana-200 mb-1">

frontend/src/templates/AdminLoginPage.mlx

@@ -5,7 +5,7 @@ type props = {csrf_token: string; error: string option [@default None]}
 [@@deriving json]
 
 let[@react.component] make ~props:({csrf_token; error} : props) () =
-  <main className="w-full h-auto max-w-xs px-4 sm:px-0">
+  <main className="w-full h-auto max-w-xs px-4 sm:px-0 my-auto">
     <h1 className="text-2xl font-serif text-mana-200 mb-2">(string "admin")</h1>
     <span className="w-full text-balance text-mist-100">
       (string "Enter the admin password to continue.")

frontend/src/templates/AdminUsersPage.mlx

@@ -62,7 +62,7 @@ let[@react.component] make
   let editValue, setEditValue = useState (fun () -> "") in
   (* delete confirmation state *)
   let deleteConfirmFor, setDeleteConfirmFor = useState (fun () -> (None : actor option)) in
-  <div className="w-full max-w-3xl h-auto mx-8 px-4 sm:px-0 flex flex-col md:flex-row gap-12">
+  <div className="w-full max-w-3xl h-full px-4 sm:px-0 pt-16 mx-auto flex flex-col md:flex-row gap-12">
     <Sidebar pages=admin_pages active_page="/admin/users" />
     <main className="flex-1 w-full max-w-2xl">
       <h1 className="text-2xl font-serif text-mana-200 mb-1">

frontend/src/templates/Layout.mlx

@@ -1,7 +1,6 @@
 open React
 
-let[@react.component] make ?(title = "Pegasus") ?(children = null)
-    ?(favicon = "/public/favicon.ico") () =
+let[@react.component] make ?(title = "Pegasus") ?(children = null) ?(favicon = "/public/favicon.ico") () =
   <html lang="en">
     <head>
       <meta charSet="utf-8" />
@@ -33,7 +32,7 @@ let[@react.component] make ?(title = "Pegasus") ?(children = null)
     </head>
     <body
       className="bg-feather-100 font-sans font-normal text-base tracking-normal">
-      <div id="root" className="flex items-center justify-center min-h-screen">
+      <div id="root" className="flex justify-center min-h-screen">
         children
       </div>
     </body>

frontend/src/templates/LoginPage.mlx

@@ -9,7 +9,7 @@ type props =
 
 let[@react.component] make ~props:({redirect_url; csrf_token; error} : props) ()
     =
-  <main className="w-full h-auto max-w-xs px-4 sm:px-0">
+  <main className="w-full h-auto max-w-xs px-4 sm:px-0 my-auto">
     <h1 className="text-2xl font-serif text-mana-200 mb-2">
       (string "sign in")
     </h1>

frontend/src/templates/OauthAuthorizePage.mlx

@@ -542,14 +542,14 @@ let[@react.component] make
   let rendered_name =
     match client_name with
     | Some client_name ->
-        <span className="text-mana-100 font-serif mr-1">
+        <span className="text-mana-100 font-serif">
           (string client_name)
           <span className="font-sans">(string (" (" ^ host ^ ")"))</span>
         </span>
     | None when String.length path = 0 ->
-        <span className="text-mana-100 font-serif mr-1">(string host)</span>
+        <span className="text-mana-100 font-serif">(string host)</span>
     | None ->
-        <span className="text-mana-100 font-serif mr-1">
+        <span className="text-mana-100 font-serif">
           (string host) <span className="text-mana-40">(string path)</span>
         </span>
   in
@@ -565,7 +565,7 @@ let[@react.component] make
     useState (fun () ->
         Option.value logo_uri ~default:("https://" ^ host ^ "/favicon.ico") )
   in
-  <form className="w-full h-auto max-w-lg px-4 sm:px-0">
+  <form className="w-full h-auto max-w-lg px-4 sm:px-0 my-auto">
     <h1 className="text-2xl font-serif text-mana-200 mb-2">
       (string ("authorizing " ^ host))
     </h1>

frontend/src/templates/RootPage.mlx

@@ -32,7 +32,7 @@ let pegasus =
 type props = unit [@@deriving json]
 
 let[@react.component] make ~props:(_ : props) () =
-  <main className="text-mist-100">
+  <main className="my-auto text-mist-100">
     <pre className="text-mana-100">pegasus</pre>
     <p>
       (string "this is ")