zwgnr · zwgnr · Jul 10, 2025 · Jul 10, 2025 · Jul 10, 2025 · Jul 10, 2025
diff --git a/.changeset/four-glasses-play.md b/.changeset/four-glasses-play.md
@@ -0,0 +1,6 @@
+---
+"@baselayer/components": patch
+"@baselayer/web": patch
+---
+
+mobile optimizations
diff --git a/packages/components/src/core/date-picker/date-picker.tsx b/packages/components/src/core/date-picker/date-picker.tsx
@@ -47,7 +47,7 @@ const dateRangePicker = tv({
 	extend: baseStyles,
 	slots: {
 		group:
-			"relative flex min-h-11 w-fit min-w-96 flex-wrap items-center rounded-lg border border-border bg-surface transition-all data-[focus-within]:border-transparent data-[focus-within]:bg-surface data-[focus-within]:ring-2 data-[focus-within]:ring-primary data-[focus-within]:ring-offset-surface",
+			"relative flex min-h-11 w-full flex-wrap items-center rounded-lg border border-border bg-surface transition-all data-[focus-within]:border-transparent data-[focus-within]:bg-surface data-[focus-within]:ring-2 data-[focus-within]:ring-primary data-[focus-within]:ring-offset-surface",
 		dateSegment:
 			"rounded-md p-1 text-end outline-none focus:bg-primary focus:text-primary-fg data-[placeholder]:text-fg-muted data-[type='literal']:text-fg-muted data-[placeholder]:focus:text-primary-fg",
 		separator: "px-2 text-fg-muted",
@@ -102,6 +102,7 @@ interface DateRangePickerProps<T extends DateValue>
 	label?: string;
 	description?: string;
 	errorMessage?: string;
+	className?: string;
 }
 
 const DateRangePicker = <T extends DateValue>({
@@ -112,9 +113,9 @@ const DateRangePicker = <T extends DateValue>({
 	children,
 	...props
 }: DateRangePickerProps<T>) => (
-	<AriaDateRangePicker className="flex flex-col gap-1" {...props}>
+	<AriaDateRangePicker className="flex w-full flex-col gap-1" {...props}>
 		{label && <Label className="text-sm">{label}</Label>}
-		<Group className={rangeStyles.group()}>
+		<Group className={rangeStyles.group({ className })}>
 			<DateInput slot="start" className={rangeStyles.input()}>
 				{(segment) => (
 					<DateSegment

diff --git a/packages/components/src/core/table/table.tsx b/packages/components/src/core/table/table.tsx
@@ -24,7 +24,7 @@ import { Checkbox } from "../checkbox/checkbox";
 
 const table = tv({
 	slots: {
-		root: "table min-h-[100px] border-separate border-spacing-0 self-start rounded-xl border border-border p-4 outline-none",
+		root: "table min-h-[100px] border-separate border-spacing-0 rounded-xl border border-border p-4 outline-none",
 		column: "border-border border-b-2 px-4 py-1 text-left outline-none",
 		header: "text-fg after:table-row after:h-[2px]",
 		label: "text-fg-3",

diff --git a/packages/components/src/examples/accordion-base.tsx b/packages/components/src/examples/accordion-base.tsx
@@ -2,7 +2,7 @@ import { Accordion } from "../core/accordion/accordion";
 
 export const AccordionBase = () => {
 	return (
-		<Accordion className="size-96" title="How do I cancel my subscription?">
+		<Accordion className="size-72 lg:size-80 xl:size-96" title="How do I cancel my subscription?">
 			You can cancel your subscription at any time by going to your account
 			settings and clicking "Cancel Subscription". Your access will continue
 			until the end of your current billing period, and you won't be charged

diff --git a/packages/components/src/examples/accordion-group.tsx b/packages/components/src/examples/accordion-group.tsx
@@ -4,7 +4,7 @@ export const AccordionGroupExample = () => {
 	return (
 		<div className="h-[500px]">
 			<AccordionGroup
-				className="w-96"
+				className="w-72 lg:w-80"
 				defaultExpandedKeys={["getting-started"]}
 			>
 				<Accordion id="getting-started" title="Getting Started">

diff --git a/packages/components/src/examples/card-base.tsx b/packages/components/src/examples/card-base.tsx
@@ -7,7 +7,7 @@ import { Input } from "../core/input/input";
 export const CardBase = () => {
 	return (
 		<Card
-			className="w-[400px]"
+			className="w-72 md:w-96"
 			title="Sign in"
 			description="Sign in to your account."
 		>

diff --git a/packages/components/src/examples/date-range-picker-base.tsx b/packages/components/src/examples/date-range-picker-base.tsx
@@ -1,3 +1,7 @@
 import { DateRangePicker } from "../core/date-picker/date-picker";
 
-export const DateRangePickerBase = () => <DateRangePicker label="Trip Dates" />; 
+export const DateRangePickerBase = () => (
+	<div className="flex w-64 items-center justify-center lg:w-96">
+		<DateRangePicker label="Trip Dates" />
+	</div>
+);
diff --git a/packages/components/src/examples/table-base.tsx b/packages/components/src/examples/table-base.tsx
@@ -56,7 +56,8 @@ const users: User[] = [
 ];
 
 export const TableExample = () => (
-	<Table aria-label="User management table">
+	<div className="ml-56 md:ml-0">
+	<Table aria-label="User management table" className="shrink-0">
 		<TableHeader>
 			<TableColumn isRowHeader>Name</TableColumn>
 			<TableColumn>Email</TableColumn>
@@ -86,4 +87,5 @@ export const TableExample = () => (
 			)}
 		</TableBody>
 	</Table>
+	</div>
 );
diff --git a/packages/components/src/registry.ts b/packages/components/src/registry.ts
diff --git a/web/app/docs/content/usage.mdx b/web/app/docs/content/usage.mdx
@@ -47,7 +47,7 @@ BaseLayer provides two convenient ways to work with AI chatbots:
     </li>
     <li>
       <strong className='text-blue-800 dark:text-blue-200'>ChatGPT/Claude/T3:</strong> Use the "Open in AI" button on any docs page for instant access, or save
-      <code className='bg-blue-100 dark:bg-blue-900/50 px-1 py-0.5 rounded text-sm not-prose'>https://www.baselayer.dev/llms.txt</code> as a custom instruction
+      <code className='bg-blue-100 dark:bg-blue-900/50 px-1 py-0.5 rounded text-sm not-prose text'>www.baselayer.dev/llms.txt</code> as a custom instruction
     </li>
   </ul>
 </div>

diff --git a/web/components/preview.tsx b/web/components/preview.tsx
@@ -77,7 +77,7 @@ export const Preview = ({
 					</div>
 				</div>
 			)}
-			<div className="flex min-h-96 flex-col items-center justify-center overflow-hidden rounded-2xl border border-border/50">
+			<div className="flex min-h-96 flex-col items-center justify-center overflow-hidden overflow-x-auto rounded-2xl border border-border/50">
 				{activeTab === "preview" ? (
 					<div className="flex h-full items-center justify-center p-6">
 						{children}

diff --git a/web/public/build-info.json b/web/public/build-info.json
@@ -1,5 +1,5 @@
 {
-  "git": "17982bc1ea526cd9977525c2f5fbed2d4a144788",
-  "builtAt": "2025-07-01T06:25:54.839Z",
-  "registrySHA256": "ab8d76391d5d99df"
+  "git": "bec659a95abada1ce8912dd0ce21ef282322153a",
+  "builtAt": "2025-07-10T00:25:12.440Z",
+  "registrySHA256": "77a3bebabd24e10d"
 }
diff --git a/web/public/registry.json b/web/public/registry.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0",
+  "version": "2.0.1",
   "components": [
     {
       "id": "accordion",

diff --git a/web/public/templates/date-picker.txt b/web/public/templates/date-picker.txt
@@ -47,7 +47,7 @@ const dateRangePicker = tv({
 	extend: baseStyles,
 	slots: {
 		group:
-			"relative flex min-h-11 w-fit min-w-96 flex-wrap items-center rounded-lg border border-border bg-surface transition-all data-[focus-within]:border-transparent data-[focus-within]:bg-surface data-[focus-within]:ring-2 data-[focus-within]:ring-primary data-[focus-within]:ring-offset-surface",
+			"relative flex min-h-11 w-full flex-wrap items-center rounded-lg border border-border bg-surface transition-all data-[focus-within]:border-transparent data-[focus-within]:bg-surface data-[focus-within]:ring-2 data-[focus-within]:ring-primary data-[focus-within]:ring-offset-surface",
 		dateSegment:
 			"rounded-md p-1 text-end outline-none focus:bg-primary focus:text-primary-fg data-[placeholder]:text-fg-muted data-[type='literal']:text-fg-muted data-[placeholder]:focus:text-primary-fg",
 		separator: "px-2 text-fg-muted",
@@ -102,6 +102,7 @@ interface DateRangePickerProps<T extends DateValue>
 	label?: string;
 	description?: string;
 	errorMessage?: string;
+	className?: string;
 }
 
 const DateRangePicker = <T extends DateValue>({
@@ -112,9 +113,9 @@ const DateRangePicker = <T extends DateValue>({
 	children,
 	...props
 }: DateRangePickerProps<T>) => (
-	<AriaDateRangePicker className="flex flex-col gap-1" {...props}>
+	<AriaDateRangePicker className="flex w-full flex-col gap-1" {...props}>
 		{label && <Label className="text-sm">{label}</Label>}
-		<Group className={rangeStyles.group()}>
+		<Group className={rangeStyles.group({ className })}>
 			<DateInput slot="start" className={rangeStyles.input()}>
 				{(segment) => (
 					<DateSegment

diff --git a/web/public/templates/table.txt b/web/public/templates/table.txt
@@ -24,7 +24,7 @@ import { Checkbox } from "../checkbox/checkbox";
 
 const table = tv({
 	slots: {
-		root: "table min-h-[100px] border-separate border-spacing-0 self-start rounded-xl border border-border p-4 outline-none",
+		root: "table min-h-[100px] border-separate border-spacing-0 rounded-xl border border-border p-4 outline-none",
 		column: "border-border border-b-2 px-4 py-1 text-left outline-none",
 		header: "text-fg after:table-row after:h-[2px]",
 		label: "text-fg-3",
-Original file line number
+Diff line change
@@ Expand Up @@
         </li>
         <li>
           <strong className='text-blue-800 dark:text-blue-200'>ChatGPT/Claude/T3:</strong> Use the "Open in AI" button on any docs page for instant access, or save
-          <code className='bg-blue-100 dark:bg-blue-900/50 px-1 py-0.5 rounded text-sm not-prose'>https://www.baselayer.dev/llms.txt</code> as a custom instruction
+          <code className='bg-blue-100 dark:bg-blue-900/50 px-1 py-0.5 rounded text-sm not-prose text'>www.baselayer.dev/llms.txt</code> as a custom instruction
         </li>
       </ul>
     </div>
@@ Expand Down @@