Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Prevent field demos from overflowing on mobile #1092

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+23 −15
Open

[docs] Prevent field demos from overflowing on mobile #1092

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion ...src/app/(public)/(content)/react/components/field/demos/hero/css-modules/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
flex-direction: column;
align-items: start;
gap: 0.25rem;
width: 100%;
max-width: 16rem;
}

.Label {
Expand All @@ -17,7 +19,7 @@
padding-left: 0.875rem;
margin: 0;
border: 1px solid var(--color-gray-200);
width: 16rem;
width: 100%;
height: 2.5rem;
border-radius: 0.375rem;
font-family: inherit;
Expand Down
4 changes: 2 additions & 2 deletions docs/src/app/(public)/(content)/react/components/field/demos/hero/tailwind/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import { Field } from '@base-ui-components/react/field';

export default function ExampleField() {
return (
<Field.Root className="flex flex-col items-start gap-1">
<Field.Root className="flex w-full max-w-64 flex-col items-start gap-1">
<Field.Label className="text-sm font-medium text-gray-900">Name</Field.Label>
<Field.Control
required
placeholder="Required"
className="h-10 w-64 rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
className="h-10 w-full rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
/>
<Field.Error className="text-sm text-red-800" match="valueMissing">
Please enter your name
Expand Down
4 changes: 3 additions & 1 deletion .../app/(public)/(content)/react/components/fieldset/demos/hero/css-modules/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
max-width: 16rem;
}

.Legend {
Expand Down Expand Up @@ -36,7 +38,7 @@
padding-left: 0.875rem;
margin: 0;
border: 1px solid var(--color-gray-200);
width: 16rem;
width: 100%;
height: 2.5rem;
border-radius: 0.375rem;
font-family: inherit;
Expand Down
6 changes: 3 additions & 3 deletions docs/src/app/(public)/(content)/react/components/fieldset/demos/hero/tailwind/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Fieldset } from '@base-ui-components/react/fieldset';

export default function ExampleField() {
return (
<Fieldset.Root className="flex flex-col gap-4">
<Fieldset.Root className="flex w-full max-w-64 flex-col gap-4">
<Fieldset.Legend className="border-b border-gray-200 pb-3 text-lg font-medium text-gray-900">
Billing details
</Fieldset.Legend>
Expand All @@ -15,7 +15,7 @@ export default function ExampleField() {
</Field.Label>
<Field.Control
placeholder="Enter company name"
className="h-10 w-64 rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
className="h-10 w-full rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
/>
</Field.Root>

Expand All @@ -25,7 +25,7 @@ export default function ExampleField() {
</Field.Label>
<Field.Control
placeholder="Enter fiscal number"
className="h-10 w-64 rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
className="h-10 w-full rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
/>
</Field.Root>
</Fieldset.Root>
Expand Down
4 changes: 3 additions & 1 deletion .../src/app/(public)/(content)/react/components/form/demos/hero/css-modules/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
max-width: 16rem;
}

.Field {
Expand All @@ -23,7 +25,7 @@
padding-left: 0.875rem;
margin: 0;
border: 1px solid var(--color-gray-200);
width: 16rem;
width: 100%;
height: 2.5rem;
border-radius: 0.375rem;
font-family: inherit;
Expand Down
4 changes: 2 additions & 2 deletions docs/src/app/(public)/(content)/react/components/form/demos/hero/tailwind/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function ExampleForm() {

return (
<Form
className="flex flex-col gap-4"
className="flex w-full max-w-64 flex-col gap-4"
errors={errors}
onClearErrors={setErrors}
onSubmit={async (event) => {
Expand Down Expand Up @@ -36,7 +36,7 @@ export default function ExampleForm() {
defaultValue="https://example.com"
placeholder="https://example.com"
pattern="https?://.*"
className="h-10 w-64 rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
className="h-10 w-full rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
/>
<Field.Error className="text-sm text-red-800" />
</Field.Root>
Expand Down
3 changes: 2 additions & 1 deletion ...src/app/(public)/(content)/react/components/input/demos/hero/css-modules/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
padding-left: 0.875rem;
margin: 0;
border: 1px solid var(--color-gray-200);
width: 16rem;
width: 100%;
max-width: 16rem;
height: 2.5rem;
border-radius: 0.375rem;
font-family: inherit;
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/(public)/(content)/react/components/input/demos/hero/tailwind/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export default function ExampleInput() {
return (
<Input
placeholder="Name"
className="h-10 w-64 rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
className="h-10 w-full max-w-64 rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
/>
);
}
2 changes: 1 addition & 1 deletion docs/src/app/(public)/page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
flex-grow: 1;
padding-top: 3rem;
padding-bottom: calc(3rem + 5vh);
padding-inline: 3rem;
padding-inline: 2rem;
align-items: center;
justify-content: center;
}
Expand Down
5 changes: 3 additions & 2 deletions docs/src/components/demo/Demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,9 @@
}

/* Center the contents */
display: grid;
place-content: center;
display: flex;
align-items: center;
justify-content: center;
}

.DemoToolbar {
Expand Down
Loading