layout fixes

package.json

@@ -103,10 +103,14 @@
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@testing-library/dom": "^9.3.4",
+    "@testing-library/dom": "^10.2.0",
     "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.11.24",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "commitizen": "^4.3.0",
     "cross-env": "^7.0.3",
     "cz": "^1.8.2",

packages/example-nextjs/src/app/Form.tsx

@@ -17,7 +17,7 @@ export const Form = ({ className }: { className?: string }) => {
   const { parse, stringify } = useUrlState(form);
 
   const [state, setState] = React.useState(() => parse());
-  const [auto, setAuto] = React.useState(false)
+  const [auto, setAuto] = React.useState(true)
 
   const handleChange = React.useCallback(
     (ev: React.ChangeEvent<HTMLInputElement>) => {
@@ -49,6 +49,8 @@ export const Form = ({ className }: { className?: string }) => {
 
   return (
     <div className={`flex flex-col gap-4 justify-between ${className}`}>
+      <h2 className='font-bold'>First client component</h2>
+
       <Field>
         <label htmlFor="name">Name</label>
         <Input id="name" value={state.name} onChange={handleChange} />
@@ -79,7 +81,7 @@ export const Form = ({ className }: { className?: string }) => {
           {
             tags.map((tag) => <div className='flex gap-2 justify-center items-center'>
               <label htmlFor={tag.id}>{tag.value.text}</label>
-              <Input key={tag.id} id={tag.id} type="checkbox" onChange={() => setState(st => ({ ...st, tags: st.tags.find(t => t.id === tag.id) ? st.tags.filter(t => t.id !== tag.id) : st.tags.concat(tag) }))} />
+              <Input checked={!!state.tags.find(t => t.id === tag.id)} key={tag.id} id={tag.id} type="checkbox" onChange={() => setState(st => ({ ...st, tags: st.tags.find(t => t.id === tag.id) ? st.tags.filter(t => t.id !== tag.id) : st.tags.concat(tag) }))} />
             </div>
             )
           }

packages/example-nextjs/src/app/Status.tsx

@@ -8,14 +8,18 @@ export const Status = ({ className }: { className?: string }) => {
   const { parse } = useUrlState(form);
 
   return (
-    <Field className={className}>
-      <h2 className="text-semi-bold text-lg">Types of data are presered</h2>
-      <pre
-        className="h-full p-2 rounded-sm bg-slate-100
-    dark:text-black text-wrap break-all whitespace-pre-wrap self-stretch overflow-y-auto"
-      >
-        {JSON.stringify(parse(), null, 2)}
-      </pre>
-    </Field>
+    <div className={className}>
+      <h2 className='font-bold mb-4'>Other client component</h2>
+      <Field className='h-full'>
+        <h3 className="font-extrabold text-lg">Types of data are presered</h3>
+        <pre
+          className="h-full p-2 rounded-sm bg-slate-100
+    dark:text-black text-wrap break-all whitespace-pre-wrap self-stretch overflow-y-auto grow-0"
+        >
+          {JSON.stringify(parse(), null, 2)}
+        </pre>
+      </Field>
+    </div>
+
   );
 };

packages/example-nextjs/src/app/page.tsx

@@ -8,16 +8,15 @@ export default function Home() {
     <main className="min-h-screen flex justify-center">
       <div
         className="flex max-[800px]:flex-col flex-row gap-8
-       p-12 max-h-[580px] max-w-[1100px] w-full"
+       p-12 min-[800px]:max-h-[580px] max-w-[1100px] w-full"
       >
         <Suspense>
           <Form className="basis-3/7 w-full" />
         </Suspense>
         <RefreshButton className="basis-1/7 text-center self-center" />
         <Suspense>
           <Status
-            className="basis-3/7
-          min-h-[300px] w-full"
+            className="basis-3/7 min-h-[300px] w-full"
           />
         </Suspense>
       </div>