feat: adapted for mobile devices

Ohh-889 · Ohh-889 · commit 6cdaf0419898 · 2025-08-06T12:24:34.000+08:00
diff --git a/playground/src/app/(demo)/alert/page.tsx b/playground/src/app/(demo)/alert/page.tsx
@@ -8,7 +8,7 @@ const sizes: ThemeSize[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
 
 const AlertPage = () => {
   return (
-    <div className="flex-c gap-4 bg-primary">
+    <div className="flex-c gap-4">
       <Card
         split
         title="Color"
diff --git a/playground/src/app/(demo)/chip/page.tsx b/playground/src/app/(demo)/chip/page.tsx
@@ -14,7 +14,7 @@ const ChipPage = () => {
         split
         title="Color"
       >
-        <div className="flex gap-3">
+        <div className="flex flex-wrap gap-3">
           {colors.map(color => (
             <div key={color}>
               <Chip color={color}>
@@ -29,7 +29,7 @@ const ChipPage = () => {
         split
         title="Color With Text"
       >
-        <div className="flex gap-4">
+        <div className="flex flex-wrap gap-4">
           {colors.map(color => (
             <div key={color}>
               <Chip
@@ -47,7 +47,7 @@ const ChipPage = () => {
         split
         title="Positions"
       >
-        <div className="flex gap-3">
+        <div className="flex flex-wrap gap-3">
           {positions.map(position => (
             <div key={position}>
               <Chip position={position}>
@@ -67,7 +67,7 @@ const ChipPage = () => {
         split
         title="Size"
       >
-        <div className="flex gap-3">
+        <div className="flex flex-wrap gap-3">
           {sizes.map(size => (
             <div key={size}>
               <Chip size={size}>
@@ -82,7 +82,7 @@ const ChipPage = () => {
           ))}
         </div>
 
-        <div className="flex gap-3 mt-6">
+        <div className="flex flex-wrap gap-3 mt-6">
           {sizes.map(size => (
             <div key={size}>
               <Chip
diff --git a/playground/src/app/(demo)/context-menu/modules/Checkbox.tsx b/playground/src/app/(demo)/context-menu/modules/Checkbox.tsx
@@ -18,7 +18,7 @@ const Checkbox = () => {
         items={menus2}
         onChecksChange={setChecks}
       >
-        <div className="h-50 w-80 flex items-center justify-center border rounded-md border-dashed text-sm">
+        <div className="h-50 w-80 flex max-sm:w-auto items-center justify-center border rounded-md border-dashed text-sm">
           Right click here
         </div>
       </ContextMenuCheckbox>
diff --git a/playground/src/app/(demo)/context-menu/modules/DefaultContextMenuDemo.tsx b/playground/src/app/(demo)/context-menu/modules/DefaultContextMenuDemo.tsx
@@ -63,7 +63,7 @@ const DefaultDropdownMenuDemo = () => {
       title="Dropdown Menu"
     >
       <ContextMenu items={menus}>
-        <div className="h-50 w-80 flex items-center justify-center border rounded-md border-dashed text-sm">
+        <div className="h-50 w-80 max-sm:w-auto flex items-center justify-center border rounded-md border-dashed text-sm">
           Right click here
         </div>
       </ContextMenu>
diff --git a/playground/src/app/(demo)/context-menu/modules/Radio.tsx b/playground/src/app/(demo)/context-menu/modules/Radio.tsx
@@ -18,7 +18,7 @@ const Radio = () => {
         value={value}
         onValueChange={setValue}
       >
-        <div className="h-50 w-80 flex items-center justify-center border rounded-md border-dashed text-sm">
+        <div className="h-50 max-sm:w-auto w-80 flex items-center justify-center border rounded-md border-dashed text-sm">
           Right click here
         </div>
       </ContextMenuRadio>
diff --git a/playground/src/app/(demo)/context-menu/modules/WithArrow.tsx b/playground/src/app/(demo)/context-menu/modules/WithArrow.tsx
@@ -14,7 +14,7 @@ const WithArrow = () => {
         contentProps={{ showArrow: true }}
         items={menus}
       >
-        <div className="h-50 w-80 flex items-center justify-center border rounded-md border-dashed text-sm">
+        <div className="h-50 max-sm:w-auto w-80 flex items-center justify-center border rounded-md border-dashed text-sm">
           Right click here
         </div>
       </ContextMenu>
diff --git a/playground/src/app/(demo)/progress/modules/Color.tsx b/playground/src/app/(demo)/progress/modules/Color.tsx
@@ -18,7 +18,7 @@ const Color = () => {
       split
       title="Color"
     >
-      <div className="flex w-[320px] flex-col gap-[12px] lt-sm:w-auto">
+      <div className="flex w-[320px] flex-col gap-[12px] max-sm:w-auto">
         {colors.map(color => (
           <Progress
             color={color}
diff --git a/playground/src/app/(demo)/progress/modules/Size.tsx b/playground/src/app/(demo)/progress/modules/Size.tsx
@@ -20,7 +20,7 @@ const Size = () => {
       split
       title="Size"
     >
-      <div className="flex w-[320px] flex-col gap-[12px] lt-sm:w-auto">
+      <div className="flex w-[320px] flex-col gap-[12px] max-sm:w-auto">
         {sizes.map((size, index) => (
           <Progress
             color={colors[index]}
diff --git a/playground/src/app/(demo)/sheet/modules/Side.tsx b/playground/src/app/(demo)/sheet/modules/Side.tsx
@@ -9,7 +9,7 @@ const Side = () => {
       split
       title="Side"
     >
-      <div className="flex gap-3">
+      <div className="flex flex-wrap gap-3">
         {sides.map(side => (
           <Sheet
             footer={<Button>Confirm</Button>}
diff --git a/playground/src/app/(demo)/skeleton/modules/DefaultDemo.tsx b/playground/src/app/(demo)/skeleton/modules/DefaultDemo.tsx
@@ -9,8 +9,8 @@ const DefaultDemo = () => {
       <div className="flex items-center space-x-4">
         <Skeleton className="size-12 rounded-full" />
         <div className="space-y-2">
-          <Skeleton className="h-4 w-[250px]" />
-          <Skeleton className="h-4 w-[200px]" />
+          <Skeleton className="h-4 w-[250px] max-sm:w-[150px]" />
+          <Skeleton className="h-4 w-[200px] max-sm:w-auto" />
         </div>
       </div>
     </Card>
diff --git a/playground/src/app/(demo)/slider/modules/SliderColor.tsx b/playground/src/app/(demo)/slider/modules/SliderColor.tsx
@@ -9,7 +9,7 @@ const SliderColor = () => {
       split
       title="Color"
     >
-      <div className="w-[480px] flex flex-c-stretch gap-6 lt-sm:w-auto">
+      <div className="w-[480px] flex flex-c-stretch gap-6 max-sm:w-auto">
         {colors.map(color => (
           <Slider
             color={color}
diff --git a/playground/src/app/(demo)/slider/modules/SliderSize.tsx b/playground/src/app/(demo)/slider/modules/SliderSize.tsx
@@ -9,7 +9,7 @@ const SliderSize = () => {
       split
       title="Size"
     >
-      <div className="w-[480px] flex flex-c-stretch gap-6 lt-sm:w-auto">
+      <div className="w-[480px] flex flex-c-stretch gap-6 max-sm:w-auto">
         {sizes.map((size, index) => (
           <Slider
             color={colors[index]}
diff --git a/playground/src/app/(demo)/tabs/page.tsx b/playground/src/app/(demo)/tabs/page.tsx
@@ -31,7 +31,7 @@ function TabsPage() {
         split
         title="Horizontal"
       >
-        <div className="w-[320px] lt-sm:w-full">
+        <div className="w-[320px] max-sm:w-auto">
           <Tabs
             classNames={{ content: 'p-4 border border-border rounded-1' }}
             defaultValue="1"
@@ -45,6 +45,4 @@ function TabsPage() {
   );
 }
 
-TabsPage.displayName = 'TabsPage';
-
 export default TabsPage;
diff --git a/playground/src/app/(demo)/toggle/modules/ToggleSize.tsx b/playground/src/app/(demo)/toggle/modules/ToggleSize.tsx
@@ -9,7 +9,7 @@ const ToggleDemo = () => {
       split
       title="Size"
     >
-      <div className="flex gap-12px">
+      <div className="flex flex-wrap gap-12px">
         {sizes.map(size => (
           <Toggle
             key={size}

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ const Checkbox = () => {`
`18`	`18`	`items={menus2}`
`19`	`19`	`onChecksChange={setChecks}`
`20`	`20`	`>`
`21`		`- <div className="h-50 w-80 flex items-center justify-center border rounded-md border-dashed text-sm">`
	`21`	`+ <div className="h-50 w-80 flex max-sm:w-auto items-center justify-center border rounded-md border-dashed text-sm">`
`22`	`22`	`Right click here`
`23`	`23`	`</div>`
`24`	`24`	`</ContextMenuCheckbox>`
Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@ const DefaultDropdownMenuDemo = () => {`
`63`	`63`	`title="Dropdown Menu"`
`64`	`64`	`>`
`65`	`65`	`<ContextMenu items={menus}>`
`66`		`- <div className="h-50 w-80 flex items-center justify-center border rounded-md border-dashed text-sm">`
	`66`	`+ <div className="h-50 w-80 max-sm:w-auto flex items-center justify-center border rounded-md border-dashed text-sm">`
`67`	`67`	`Right click here`
`68`	`68`	`</div>`
`69`	`69`	`</ContextMenu>`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ const Radio = () => {`
`18`	`18`	`value={value}`
`19`	`19`	`onValueChange={setValue}`
`20`	`20`	`>`
`21`		`- <div className="h-50 w-80 flex items-center justify-center border rounded-md border-dashed text-sm">`
	`21`	`+ <div className="h-50 max-sm:w-auto w-80 flex items-center justify-center border rounded-md border-dashed text-sm">`
`22`	`22`	`Right click here`
`23`	`23`	`</div>`
`24`	`24`	`</ContextMenuRadio>`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ const WithArrow = () => {`
`14`	`14`	`contentProps={{ showArrow: true }}`
`15`	`15`	`items={menus}`
`16`	`16`	`>`
`17`		`- <div className="h-50 w-80 flex items-center justify-center border rounded-md border-dashed text-sm">`
	`17`	`+ <div className="h-50 max-sm:w-auto w-80 flex items-center justify-center border rounded-md border-dashed text-sm">`
`18`	`18`	`Right click here`
`19`	`19`	`</div>`
`20`	`20`	`</ContextMenu>`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ const Color = () => {`
`18`	`18`	`split`
`19`	`19`	`title="Color"`
`20`	`20`	`>`
`21`		`- <div className="flex w-[320px] flex-col gap-[12px] lt-sm:w-auto">`
	`21`	`+ <div className="flex w-[320px] flex-col gap-[12px] max-sm:w-auto">`
`22`	`22`	`{colors.map(color => (`
`23`	`23`	`<Progress`
`24`	`24`	`color={color}`
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ const Size = () => {`
`20`	`20`	`split`
`21`	`21`	`title="Size"`
`22`	`22`	`>`
`23`		`- <div className="flex w-[320px] flex-col gap-[12px] lt-sm:w-auto">`
	`23`	`+ <div className="flex w-[320px] flex-col gap-[12px] max-sm:w-auto">`
`24`	`24`	`{sizes.map((size, index) => (`
`25`	`25`	`<Progress`
`26`	`26`	`color={colors[index]}`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ const Side = () => {`
`9`	`9`	`split`
`10`	`10`	`title="Side"`
`11`	`11`	`>`
`12`		`- <div className="flex gap-3">`
	`12`	`+ <div className="flex flex-wrap gap-3">`
`13`	`13`	`{sides.map(side => (`
`14`	`14`	`<Sheet`
`15`	`15`	`footer={<Button>Confirm</Button>}`