AuthorizingForm
Source: client/lib/theme/vueda-tailwind/views/index.js
Outer wrapper that fills the viewport and centers the framed card both axes. Uses
min-h-svhrather thanmin-h-fullso the fill works regardless of whether an integrator's shell gives this component's ancestors an explicit height; it never depends on a height cascade it does not control. Differs from AuthForm.root which flows top-aligned; the consent step is short enough that a vertically centered card reads as a focused decision surface.
Vue component: AuthorizingForm
| Slot | Default classes | Description |
|---|---|---|
| root | flex min-h-svh justify-center items-center | Outer wrapper that fills the viewport and centers the framed card both axes. Uses min-h-svh rather than min-h-full so the fill works regardless of whether an integrator's shell gives this component's ancestors an explicit height; it never depends on a height cascade it does not control. Differs from AuthForm.root which flows top-aligned; the consent step is short enough that a vertically centered card reads as a focused decision surface. |
| outer | flex flex-col max-w-full | Column around the framed card. No max-width cap (uses max-w-full) since the inner card already caps itself; the column exists only to anchor the inner card to its content. |
| inner | 3 classes | Framed card surrounding the consent form. Mirrors AuthForm.inner so sign-in and authorize flows share the same surface shape; 32 px padding, soft radius, capped at 35 rem on sm+. |
| contentContainer | min-w-min | Inner content column inside the card. min-w-min keeps the column from collapsing below its longest unbreakable word. |
| title | mt-5 | Title region above the form body; spacing only, see header and subTitle for the text recipes. |
| header | text-title | The card's <h1>. AuthorizingForm has no separate PageTitle above it ("the card is the whole page"), so its heading carries the page-title role. |
| subTitle | mt-1 text-muted-foreground text-[length:var(--vueda-text-supporting)] leading-[1.4] font-normal | The card's subtitle paragraph beneath the heading. Supporting-text recipe, matching FieldDescription.root. |
root
Outer wrapper that fills the viewport and centers the framed card both axes. Uses
min-h-svhrather thanmin-h-fullso the fill works regardless of whether an integrator's shell gives this component's ancestors an explicit height; it never depends on a height cascade it does not control. Differs from AuthForm.root which flows top-aligned; the consent step is short enough that a vertically centered card reads as a focused decision surface.
Default classes:
flex min-h-svh justify-center items-center
Source: client/lib/theme/vueda-tailwind/views/AuthorizingForm.theme.js:17
outer
Column around the framed card. No max-width cap (uses
max-w-full) since the inner card already caps itself; the column exists only to anchor the inner card to its content.
Default classes:
flex flex-col max-w-full
Source: client/lib/theme/vueda-tailwind/views/AuthorizingForm.theme.js:21
inner
Framed card surrounding the consent form. Mirrors AuthForm.inner so sign-in and authorize flows share the same surface shape; 32 px padding, soft radius, capped at 35 rem on
sm+.
Default classes:
p-8 rounded hairline hairline-border bg-background
flex flex-col items-stretch gap-3 overflow-y-auto
max-w-full sm:w-[35rem]Source: client/lib/theme/vueda-tailwind/views/AuthorizingForm.theme.js:25
contentContainer
Inner content column inside the card.
min-w-minkeeps the column from collapsing below its longest unbreakable word.
Default classes:
min-w-min
Source: client/lib/theme/vueda-tailwind/views/AuthorizingForm.theme.js:33
title
Title region above the form body; spacing only, see
headerandsubTitlefor the text recipes.
Default classes:
mt-5
Source: client/lib/theme/vueda-tailwind/views/AuthorizingForm.theme.js:37
header
The card's
<h1>. AuthorizingForm has no separate PageTitle above it ("the card is the whole page"), so its heading carries the page-title role.
Default classes:
text-title
Source: client/lib/theme/vueda-tailwind/views/AuthorizingForm.theme.js:41
subTitle
The card's subtitle paragraph beneath the heading. Supporting-text recipe, matching FieldDescription.root.
Default classes:
mt-1 text-muted-foreground text-[length:var(--vueda-text-supporting)] leading-[1.4] font-normal
Source: client/lib/theme/vueda-tailwind/views/AuthorizingForm.theme.js:45