refactor: card title and layout tweaks (#675)

* refactor: card title and layout tweaks * chore: review comments * refactor: update domain warning screen
2026-03-03 05:12:03 +00:00 · 2026-03-01 13:36:43 +02:00
parent 89da4028bb
commit d0e39c6149
20 changed files with 356 additions and 142 deletions
--- a/frontend/src/components/auth/login-form.tsx
+++ b/frontend/src/components/auth/login-form.tsx
@@ -10,17 +10,17 @@ import {
  FormLabel,
  FormMessage,
 } from "../ui/form";
-import { Button } from "../ui/button";
 import { loginSchema, LoginSchema } from "@/schemas/login-schema";
 import z from "zod";

 interface Props {
  onSubmit: (data: LoginSchema) => void;
  loading?: boolean;
+  formId?: string;
 }

 export const LoginForm = (props: Props) => {
-  const { onSubmit, loading } = props;
+  const { onSubmit, loading, formId } = props;
  const { t } = useTranslation();

  z.config({
@@ -34,7 +34,7 @@ export const LoginForm = (props: Props) => {

  return (
    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
+      <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name="username"
@@ -57,7 +57,7 @@ export const LoginForm = (props: Props) => {
          control={form.control}
          name="password"
          render={({ field }) => (
-            <FormItem className="mb-4 gap-0">
+            <FormItem className="gap-0">
              <div className="relative mb-1">
                <FormLabel className="mb-2">{t("loginPassword")}</FormLabel>
                <FormControl>
@@ -71,7 +71,7 @@ export const LoginForm = (props: Props) => {
                </FormControl>
                <a
                  href="/forgot-password"
-                  className="text-muted-foreground text-sm absolute right-0 bottom-[2.565rem]" // 2.565 is *just* perfect
+                  className="text-muted-foreground hover:text-muted-foreground/80 text-sm absolute right-0 bottom-[2.565rem]" // 2.565 is *just* perfect
                >
                  {t("forgotPasswordTitle")}
                </a>
@@ -80,9 +80,6 @@ export const LoginForm = (props: Props) => {
            </FormItem>
          )}
        />
-        <Button className="w-full" type="submit" loading={loading}>
-          {t("loginSubmit")}
-        </Button>
      </form>
    </Form>
  );
--- a/frontend/src/components/domain-warning/domain-warning.tsx
+++ b/frontend/src/components/domain-warning/domain-warning.tsx
@@ -1,12 +1,12 @@
 import {
  Card,
-  CardDescription,
+  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
 } from "../ui/card";
 import { Button } from "../ui/button";
-import { Trans, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router";

 interface Props {
@@ -24,23 +24,26 @@ export const DomainWarning = (props: Props) => {
  const redirectUri = searchParams.get("redirect_uri");

  return (
-    <Card role="alert" aria-live="assertive" className="min-w-xs sm:min-w-sm">
+    <Card role="alert" aria-live="assertive">
      <CardHeader>
-        <CardTitle className="text-3xl">{t("domainWarningTitle")}</CardTitle>
-        <CardDescription>
-          <Trans
-            t={t}
-            i18nKey="domainWarningSubtitle"
-            values={{ appUrl, currentUrl }}
-            components={{ code: <code /> }}
-            shouldUnescape={true}
-          />
-        </CardDescription>
+        <CardTitle className="text-xl">{t("domainWarningTitle")}</CardTitle>
      </CardHeader>
-      <CardFooter className="flex flex-col items-stretch gap-2">
-        <Button onClick={onClick} variant="warning">
-          {t("ignoreTitle")}
-        </Button>
+      <CardContent className="flex flex-col gap-3 text-sm mb-1.25">
+        <p className="text-muted-foreground">{t("domainWarningSubtitle")}</p>
+        <pre>
+          <span className="text-muted-foreground">
+            {t("domainWarningExpected")}&nbsp;
+            <span className="text-primary">{appUrl}</span>
+          </span>
+        </pre>
+        <pre>
+          <span className="text-muted-foreground">
+            {t("domainWarningCurrent")}&nbsp;
+            <span className="text-primary">{currentUrl}</span>
+          </span>
+        </pre>
+      </CardContent>
+      <CardFooter className="flex flex-col items-stretch gap-3">
        <Button
          onClick={() =>
            window.location.assign(
@@ -51,6 +54,9 @@ export const DomainWarning = (props: Props) => {
        >
          {t("goToCorrectDomainTitle")}
        </Button>
+        <Button onClick={onClick} variant="warning">
+          {t("ignoreTitle")}
+        </Button>
      </CardFooter>
    </Card>
  );
--- a/frontend/src/components/layout/layout.tsx
+++ b/frontend/src/components/layout/layout.tsx
@@ -14,18 +14,18 @@ const BaseLayout = ({ children }: { children: React.ReactNode }) => {

  return (
    <div
-      className="relative flex flex-col justify-center items-center min-h-svh"
+      className="flex flex-col justify-center items-center min-h-svh px-4"
      style={{
        backgroundImage: `url(${backgroundImage})`,
        backgroundSize: "cover",
        backgroundPosition: "center",
      }}
    >
-      <div className="absolute top-5 right-5 flex flex-row gap-2">
+      <div className="absolute top-4 right-4 flex flex-row gap-2">
        <ThemeToggle />
        <LanguageSelector />
      </div>
-      {children}
+      <div className="max-w-sm md:min-w-sm min-w-xs">{children}</div>
    </div>
  );
 };
--- a/frontend/src/components/ui/card.tsx
+++ b/frontend/src/components/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="card"
      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        "bg-card text-card-foreground flex flex-col gap-3 rounded-xl border py-6 shadow-sm",
        className,
      )}
      {...props}
@@ -20,7 +20,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="card-header"
      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
        className,
      )}
      {...props}
@@ -75,7 +75,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      className={cn("flex items-center px-6 [.border-t]:pt-6 mt-2", className)}
      {...props}
    />
  );
--- a/frontend/src/components/ui/tooltip.tsx
+++ b/frontend/src/components/ui/tooltip.tsx
@@ -0,0 +1,55 @@
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -160,7 +160,7 @@ code {
 }

 pre {
-  @apply bg-accent border border-border rounded-md p-2 whitespace-break-spaces;
+  @apply bg-accent border border-border rounded-md p-2 whitespace-break-spaces break-all;
 }

 .lead {
--- a/frontend/src/lib/i18n/locales/en-US.json
+++ b/frontend/src/lib/i18n/locales/en-US.json
@@ -57,7 +57,9 @@
    "fieldRequired": "This field is required",
    "invalidInput": "Invalid input",
    "domainWarningTitle": "Invalid Domain",
-    "domainWarningSubtitle": "This instance is configured to be accessed from <code>{{appUrl}}</code>, but <code>{{currentUrl}}</code> is being used. If you proceed, you may encounter issues with authentication.",
+    "domainWarningSubtitle": "You are accessing this instance from an incorrect domain. If you proceed, you may encounter issues with authentication.",
+    "domainWarningCurrent": "Current:",
+    "domainWarningExpected": "Expected:",
    "ignoreTitle": "Ignore",
    "goToCorrectDomainTitle": "Go to correct domain",
    "authorizeTitle": "Authorize",
--- a/frontend/src/lib/i18n/locales/en.json
+++ b/frontend/src/lib/i18n/locales/en.json
@@ -57,7 +57,9 @@
    "fieldRequired": "This field is required",
    "invalidInput": "Invalid input",
    "domainWarningTitle": "Invalid Domain",
-    "domainWarningSubtitle": "This instance is configured to be accessed from <code>{{appUrl}}</code>, but <code>{{currentUrl}}</code> is being used. If you proceed, you may encounter issues with authentication.",
+    "domainWarningSubtitle": "You are accessing this instance from an incorrect domain. If you proceed, you may encounter issues with authentication.",
+    "domainWarningCurrent": "Current:",
+    "domainWarningExpected": "Expected:",
    "ignoreTitle": "Ignore",
    "goToCorrectDomainTitle": "Go to correct domain",
    "authorizeTitle": "Authorize",
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -18,6 +18,7 @@ import { UserContextProvider } from "./context/user-context.tsx";
 import { Toaster } from "@/components/ui/sonner";
 import { ThemeProvider } from "./components/providers/theme-provider.tsx";
 import { AuthorizePage } from "./pages/authorize-page.tsx";
+import { TooltipProvider } from "@/components/ui/tooltip";

 const queryClient = new QueryClient();

@@ -26,28 +27,33 @@ createRoot(document.getElementById("root")!).render(
    <QueryClientProvider client={queryClient}>
      <AppContextProvider>
        <UserContextProvider>
-          <ThemeProvider defaultTheme="system" storageKey="tinyauth-theme">
-            <BrowserRouter>
-              <Routes>
-                <Route element={<Layout />} errorElement={<ErrorPage />}>
-                  <Route path="/" element={<App />} />
-                  <Route path="/login" element={<LoginPage />} />
-                  <Route path="/authorize" element={<AuthorizePage />} />
-                  <Route path="/logout" element={<LogoutPage />} />
-                  <Route path="/continue" element={<ContinuePage />} />
-                  <Route path="/totp" element={<TotpPage />} />
-                  <Route
-                    path="/forgot-password"
-                    element={<ForgotPasswordPage />}
-                  />
-                  <Route path="/unauthorized" element={<UnauthorizedPage />} />
-                  <Route path="/error" element={<ErrorPage />} />
-                  <Route path="*" element={<NotFoundPage />} />
-                </Route>
-              </Routes>
-            </BrowserRouter>
-            <Toaster />
-          </ThemeProvider>
+          <TooltipProvider>
+            <ThemeProvider defaultTheme="system" storageKey="tinyauth-theme">
+              <BrowserRouter>
+                <Routes>
+                  <Route element={<Layout />} errorElement={<ErrorPage />}>
+                    <Route path="/" element={<App />} />
+                    <Route path="/login" element={<LoginPage />} />
+                    <Route path="/authorize" element={<AuthorizePage />} />
+                    <Route path="/logout" element={<LogoutPage />} />
+                    <Route path="/continue" element={<ContinuePage />} />
+                    <Route path="/totp" element={<TotpPage />} />
+                    <Route
+                      path="/forgot-password"
+                      element={<ForgotPasswordPage />}
+                    />
+                    <Route
+                      path="/unauthorized"
+                      element={<UnauthorizedPage />}
+                    />
+                    <Route path="/error" element={<ErrorPage />} />
+                    <Route path="*" element={<NotFoundPage />} />
+                  </Route>
+                </Routes>
+              </BrowserRouter>
+              <Toaster />
+            </ThemeProvider>
+          </TooltipProvider>
        </UserContextProvider>
      </AppContextProvider>
    </QueryClientProvider>
--- a/frontend/src/pages/authorize-page.tsx
+++ b/frontend/src/pages/authorize-page.tsx
@@ -18,6 +18,11 @@ import { useOIDCParams } from "@/lib/hooks/oidc";
 import { useTranslation } from "react-i18next";
 import { TFunction } from "i18next";
 import { Mail, Shield, User, Users } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";

 type Scope = {
  id: string;
@@ -27,7 +32,7 @@ type Scope = {
 };

 const scopeMapIconProps = {
-  className: "stroke-card stroke-2.5",
+  className: "stroke-muted-foreground stroke-[1.75] h-4",
 };

 const createScopeMap = (t: TFunction<"translation", undefined>): Scope[] => {
@@ -124,13 +129,15 @@ export const AuthorizePage = () => {

  if (getClientInfo.isLoading) {
    return (
-      <Card className="min-w-xs sm:min-w-sm">
+      <Card className="gap-0">
        <CardHeader>
-          <CardTitle className="text-3xl">
+          <CardTitle className="text-xl">
            {t("authorizeLoadingTitle")}
          </CardTitle>
-          <CardDescription>{t("authorizeLoadingSubtitle")}</CardDescription>
        </CardHeader>
+        <CardContent>
+          <CardDescription>{t("authorizeLoadingSubtitle")}</CardDescription>
+        </CardContent>
      </Card>
    );
  }
@@ -145,41 +152,46 @@ export const AuthorizePage = () => {
  }

  return (
-    <Card className="min-w-xs sm:min-w-sm mx-4">
-      <CardHeader>
-        <CardTitle className="text-3xl">
-          {t("authorizeCardTitle", {
-            app: getClientInfo.data?.name || "Unknown",
-          })}
-        </CardTitle>
-        <CardDescription>
-          {scopes.includes("openid")
-            ? t("authorizeSubtitle")
-            : t("authorizeSubtitleOAuth")}
-        </CardDescription>
+    <Card>
+      <CardHeader className="mb-2">
+        <div className="flex flex-col gap-3 items-center justify-center text-center">
+          <div className="bg-accent-foreground text-muted text-xl font-bold font-sans rounded-lg px-4 py-3">
+            {getClientInfo.data?.name.slice(0, 1)}
+          </div>
+          <CardTitle className="text-xl">
+            {t("authorizeCardTitle", {
+              app: getClientInfo.data?.name || "Unknown",
+            })}
+          </CardTitle>
+          <CardDescription className="text-sm max-w-sm">
+            {scopes.includes("openid")
+              ? t("authorizeSubtitle")
+              : t("authorizeSubtitleOAuth")}
+          </CardDescription>
+        </div>
      </CardHeader>
-      {scopes.includes("openid") && (
-        <CardContent className="flex flex-col gap-4">
-          {scopes.map((id) => {
-            const scope = scopeMap.find((s) => s.id === id);
-            if (!scope) return null;
-            return (
-              <div key={scope.id} className="flex flex-row items-center gap-3">
-                <div className="p-2 flex flex-col items-center justify-center bg-card-foreground rounded-md">
-                  {scope.icon}
-                </div>
-                <div className="flex flex-col gap-0.5">
-                  <div className="text-md">{scope.name}</div>
-                  <div className="text-sm text-muted-foreground">
-                    {scope.description}
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-        </CardContent>
-      )}
-      <CardFooter className="flex flex-col items-stretch gap-2">
+      <CardContent className="mb-2">
+        {scopes.includes("openid") && (
+          <div className="flex flex-wrap gap-2 items-center justify-center">
+            {scopes.map((id) => {
+              const scope = scopeMap.find((s) => s.id === id);
+              if (!scope) return null;
+              return (
+                <Tooltip key={scope.id}>
+                  <TooltipTrigger className="flex flex-row justify-center items-center gap-1 rounded-full bg-secondary font-light pl-2 pr-4 py-1 border-border border">
+                    <div>{scope.icon}</div>
+                    <div className="text-sm text-accent-foreground">
+                      {scope.name}
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent>{scope.description}</TooltipContent>
+                </Tooltip>
+              );
+            })}
+          </div>
+        )}
+      </CardContent>
+      <CardFooter className="flex flex-col items-stretch gap-3">
        <Button
          onClick={() => authorizeMutation.mutate()}
          loading={authorizeMutation.isPending}
--- a/frontend/src/pages/continue-page.tsx
+++ b/frontend/src/pages/continue-page.tsx
@@ -93,9 +93,9 @@ export const ContinuePage = () => {

  if (showUntrustedWarning) {
    return (
-      <Card role="alert" aria-live="assertive" className="min-w-xs sm:min-w-sm">
-        <CardHeader>
-          <CardTitle className="text-3xl">
+      <Card role="alert" aria-live="assertive">
+        <CardHeader className="gap-1.5">
+          <CardTitle className="text-xl">
            {t("continueUntrustedRedirectTitle")}
          </CardTitle>
          <CardDescription>
@@ -110,7 +110,7 @@ export const ContinuePage = () => {
            />
          </CardDescription>
        </CardHeader>
-        <CardFooter className="flex flex-col items-stretch gap-2">
+        <CardFooter className="flex flex-col items-stretch gap-3">
          <Button
            onClick={handleRedirect}
            loading={isLoading}
@@ -132,9 +132,9 @@ export const ContinuePage = () => {

  if (showInsecureWarning) {
    return (
-      <Card role="alert" aria-live="assertive" className="min-w-xs sm:min-w-sm">
-        <CardHeader>
-          <CardTitle className="text-3xl">
+      <Card role="alert" aria-live="assertive">
+        <CardHeader className="gap-1.5">
+          <CardTitle className="text-xl">
            {t("continueInsecureRedirectTitle")}
          </CardTitle>
          <CardDescription>
@@ -147,7 +147,7 @@ export const ContinuePage = () => {
            />
          </CardDescription>
        </CardHeader>
-        <CardFooter className="flex flex-col items-stretch gap-2">
+        <CardFooter className="flex flex-col items-stretch gap-3">
          <Button
            onClick={handleRedirect}
            loading={isLoading}
@@ -168,16 +168,16 @@ export const ContinuePage = () => {
  }

  return (
-    <Card className="min-w-xs sm:min-w-sm">
-      <CardHeader>
-        <CardTitle className="text-3xl">
+    <Card>
+      <CardHeader className="gap-1.5">
+        <CardTitle className="text-xl">
          {t("continueRedirectingTitle")}
        </CardTitle>
        <CardDescription>{t("continueRedirectingSubtitle")}</CardDescription>
      </CardHeader>
      {showRedirectButton && (
-        <CardFooter className="flex flex-col items-stretch">
-          <Button onClick={handleRedirect}>
+        <CardFooter>
+          <Button className="w-full" onClick={handleRedirect}>
            {t("continueRedirectManually")}
          </Button>
        </CardFooter>
--- a/frontend/src/pages/error-page.tsx
+++ b/frontend/src/pages/error-page.tsx
@@ -14,10 +14,10 @@ export const ErrorPage = () => {
  const error = searchParams.get("error") ?? "";

  return (
-    <Card className="min-w-xs sm:min-w-sm">
-      <CardHeader>
-        <CardTitle className="text-3xl">{t("errorTitle")}</CardTitle>
-        <CardDescription className="flex flex-col gap-1.5">
+    <Card>
+      <CardHeader className="gap-1.5">
+        <CardTitle className="text-xl">{t("errorTitle")}</CardTitle>
+        <CardDescription className="flex flex-col gap-3">
          {error ? (
            <>
              <p>{t("errorSubtitleInfo")}</p>
--- a/frontend/src/pages/forgot-password-page.tsx
+++ b/frontend/src/pages/forgot-password-page.tsx
@@ -1,25 +1,47 @@
 import {
  Card,
+  CardContent,
  CardDescription,
+  CardFooter,
  CardHeader,
  CardTitle,
 } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
 import { useAppContext } from "@/context/app-context";
 import { useTranslation } from "react-i18next";
 import Markdown from "react-markdown";
+import { useNavigate } from "react-router";

 export const ForgotPasswordPage = () => {
  const { forgotPasswordMessage } = useAppContext();
  const { t } = useTranslation();
+  const navigate = useNavigate();

  return (
-    <Card className="min-w-xs sm:min-w-sm">
+    <Card>
      <CardHeader>
-        <CardTitle className="text-3xl">{t("forgotPasswordTitle")}</CardTitle>
-        <CardDescription>
-          <Markdown>{forgotPasswordMessage !== "" ? forgotPasswordMessage : t('forgotPasswordMessage')}</Markdown>
-        </CardDescription>
+        <CardTitle className="text-xl">{t("forgotPasswordTitle")}</CardTitle>
      </CardHeader>
+      <CardContent>
+        <CardDescription>
+          <Markdown>
+            {forgotPasswordMessage !== ""
+              ? forgotPasswordMessage
+              : t("forgotPasswordMessage")}
+          </Markdown>
+        </CardDescription>
+      </CardContent>
+      <CardFooter>
+        <Button
+          className="w-full"
+          variant="outline"
+          onClick={() => {
+            navigate("/login");
+          }}
+        >
+          {t("notFoundButton")}
+        </Button>
+      </CardFooter>
    </Card>
  );
 };
--- a/frontend/src/pages/login-page.tsx
+++ b/frontend/src/pages/login-page.tsx
@@ -22,7 +22,7 @@ import { useOIDCParams } from "@/lib/hooks/oidc";
 import { LoginSchema } from "@/schemas/login-schema";
 import { useMutation } from "@tanstack/react-query";
 import axios, { AxiosError } from "axios";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Navigate, useLocation } from "react-router";
 import { toast } from "sonner";
@@ -48,6 +48,8 @@ export const LoginPage = () => {
  const redirectTimer = useRef<number | null>(null);
  const redirectButtonTimer = useRef<number | null>(null);

+  const formId = useId();
+
  const searchParams = new URLSearchParams(search);
  const {
    values: props,
@@ -187,9 +189,9 @@ export const LoginPage = () => {

  if (isOauthAutoRedirect) {
    return (
-      <Card className="min-w-xs sm:min-w-sm">
+      <Card>
        <CardHeader>
-          <CardTitle className="text-3xl">
+          <CardTitle className="text-xl">
            {t("loginOauthAutoRedirectTitle")}
          </CardTitle>
          <CardDescription>
@@ -218,9 +220,9 @@ export const LoginPage = () => {
    );
  }
  return (
-    <Card className="min-w-xs sm:min-w-sm">
-      <CardHeader>
-        <CardTitle className="text-center text-3xl">{title}</CardTitle>
+    <Card>
+      <CardHeader className="gap-1.5">
+        <CardTitle className="text-center text-xl">{title}</CardTitle>
        {providers.length > 0 && (
          <CardDescription className="text-center">
            {oauthProviders.length !== 0
@@ -231,7 +233,7 @@ export const LoginPage = () => {
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        {oauthProviders.length !== 0 && (
-          <div className="flex flex-col gap-2 items-center justify-center">
+          <div className="flex flex-col gap-2.5 items-center justify-center">
            {oauthProviders.map((provider) => (
              <OAuthButton
                key={provider.id}
@@ -252,6 +254,7 @@ export const LoginPage = () => {
          <LoginForm
            onSubmit={(values) => loginMutate(values)}
            loading={loginIsPending || oauthIsPending}
+            formId={formId}
          />
        )}
        {providers.length == 0 && (
@@ -260,6 +263,18 @@ export const LoginPage = () => {
          </p>
        )}
      </CardContent>
+      <CardFooter>
+        {userAuthConfigured && (
+          <Button
+            className="w-full"
+            type="submit"
+            form={formId}
+            loading={loginIsPending || oauthIsPending}
+          >
+            {t("loginSubmit")}
+          </Button>
+        )}
+      </CardFooter>
    </Card>
  );
 };
--- a/frontend/src/pages/logout-page.tsx
+++ b/frontend/src/pages/logout-page.tsx
@@ -52,9 +52,9 @@ export const LogoutPage = () => {
  }

  return (
-    <Card className="min-w-xs sm:min-w-sm">
-      <CardHeader>
-        <CardTitle className="text-3xl">{t("logoutTitle")}</CardTitle>
+    <Card>
+      <CardHeader className="gap-1.5">
+        <CardTitle className="text-xl">{t("logoutTitle")}</CardTitle>
        <CardDescription>
          {provider !== "local" && provider !== "ldap" ? (
            <Trans
@@ -84,8 +84,10 @@ export const LogoutPage = () => {
          )}
        </CardDescription>
      </CardHeader>
-      <CardFooter className="flex flex-col items-stretch">
+      <CardFooter>
        <Button
+          className="w-full"
+          variant="outline"
          loading={logoutMutation.isPending}
          onClick={() => logoutMutation.mutate()}
        >
--- a/frontend/src/pages/not-found-page.tsx
+++ b/frontend/src/pages/not-found-page.tsx
@@ -21,13 +21,20 @@ export const NotFoundPage = () => {
  };

  return (
-    <Card className="min-w-xs sm:min-w-sm">
-      <CardHeader>
-        <CardTitle className="text-3xl">{t("notFoundTitle")}</CardTitle>
+    <Card>
+      <CardHeader className="gap-1.5">
+        <CardTitle className="text-xl">{t("notFoundTitle")}</CardTitle>
        <CardDescription>{t("notFoundSubtitle")}</CardDescription>
      </CardHeader>
-      <CardFooter className="flex flex-col items-stretch">
-        <Button onClick={handleRedirect} loading={loading}>{t("notFoundButton")}</Button>
+      <CardFooter>
+        <Button
+          variant="outline"
+          className="w-full"
+          onClick={handleRedirect}
+          loading={loading}
+        >
+          {t("notFoundButton")}
+        </Button>
      </CardFooter>
    </Card>
  );
--- a/frontend/src/pages/totp-page.tsx
+++ b/frontend/src/pages/totp-page.tsx
@@ -72,9 +72,9 @@ export const TotpPage = () => {
  }

  return (
-    <Card className="min-w-xs sm:min-w-sm">
-      <CardHeader>
-        <CardTitle className="text-3xl">{t("totpTitle")}</CardTitle>
+    <Card>
+      <CardHeader className="gap-1.5">
+        <CardTitle className="text-xl">{t("totpTitle")}</CardTitle>
        <CardDescription>{t("totpSubtitle")}</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col items-center">
@@ -83,8 +83,13 @@ export const TotpPage = () => {
          onSubmit={(values) => totpMutation.mutate(values)}
        />
      </CardContent>
-      <CardFooter className="flex flex-col items-stretch">
-        <Button form={formId} type="submit" loading={totpMutation.isPending}>
+      <CardFooter>
+        <Button
+          className="w-full"
+          form={formId}
+          type="submit"
+          loading={totpMutation.isPending}
+        >
          {t("continueTitle")}
        </Button>
      </CardFooter>
--- a/frontend/src/pages/unauthorized-page.tsx
+++ b/frontend/src/pages/unauthorized-page.tsx
@@ -47,9 +47,9 @@ export const UnauthorizedPage = () => {
  }

  return (
-    <Card className="min-w-xs sm:min-w-sm">
-      <CardHeader>
-        <CardTitle className="text-3xl">{t("unauthorizedTitle")}</CardTitle>
+    <Card>
+      <CardHeader className="gap-1.5">
+        <CardTitle className="text-xl">{t("unauthorizedTitle")}</CardTitle>
        <CardDescription>
          <Trans
            i18nKey={i18nKey}
@@ -65,8 +65,13 @@ export const UnauthorizedPage = () => {
          />
        </CardDescription>
      </CardHeader>
-      <CardFooter className="flex flex-col items-stretch">
-        <Button onClick={handleRedirect} loading={loading}>
+      <CardFooter>
+        <Button
+          variant="outline"
+          className="w-full"
+          onClick={handleRedirect}
+          loading={loading}
+        >
          {t("unauthorizedButton")}
        </Button>
      </CardFooter>