Skip to content

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-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.

Vue component: AuthorizingForm

SlotDefault classesDescription
rootflex min-h-svh justify-center items-centerOuter 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.
outerflex flex-col max-w-fullColumn 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.
inner3 classesFramed 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+.
contentContainermin-w-minInner content column inside the card. min-w-min keeps the column from collapsing below its longest unbreakable word.
titlemt-5Title region above the form body; spacing only, see header and subTitle for the text recipes.
headertext-titleThe card's <h1>. AuthorizingForm has no separate PageTitle above it ("the card is the whole page"), so its heading carries the page-title role.
subTitlemt-1 text-muted-foreground text-[length:var(--vueda-text-supporting)] leading-[1.4] font-normalThe 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-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.

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:

text
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-min keeps 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 header and subTitle for the text recipes.

Default classes:

mt-5

Source: client/lib/theme/vueda-tailwind/views/AuthorizingForm.theme.js:37

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

Documents matching: server v3.0.0a1.post1client v3.0.0-alpha.2