From 0ae75ec8b20a24d4bfde2d3820ce03a9d0a8204b Mon Sep 17 00:00:00 2001
From: sharan <iranisharan@gmail.com>
Date: Sun, 19 Oct 2025 23:06:10 +0530
Subject: [PATCH] fixed the copy snippet to make sure it shows up even below
 768px

---
 package.json                                  |  2 +-
 src/components/CodeArea.module.css            |  4 +++
 .../docs/useformstate/errormessage.mdx        | 27 ++++++++++---------
 src/content/docs/usewatch/watch.mdx           | 16 +++++------
 src/content/get-started.mdx                   |  2 +-
 5 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 7a3ec1a4d..dc4bc5d3a 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
     "analyze": "cross-env ANALYZE=true next build",
     "build": "next build",
     "dev": "next dev",
-    "format": "prettier . --check",
+    "format": "prettier . --write",
     "format:fix": "prettier . --write",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
diff --git a/src/components/CodeArea.module.css b/src/components/CodeArea.module.css
index 85da6dede..d79c0474f 100644
--- a/src/components/CodeArea.module.css
+++ b/src/components/CodeArea.module.css
@@ -42,6 +42,10 @@
   background: none;
   border: 1px solid transparent;
   color: currentColor;
+  /* Keeps copy button visible on small screens */
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .active,
diff --git a/src/content/docs/useformstate/errormessage.mdx b/src/content/docs/useformstate/errormessage.mdx
index a3e67ff44..69227c022 100644
--- a/src/content/docs/useformstate/errormessage.mdx
+++ b/src/content/docs/useformstate/errormessage.mdx
@@ -155,15 +155,18 @@ export default function App() {
 ```
 
 ```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-errormessage-multiple-error-messages-lnvkt"
-import { useForm } from "react-hook-form";
-import { ErrorMessage } from '@hookform/error-message';
-
+import { useForm } from "react-hook-form"
+import { ErrorMessage } from "@hookform/error-message"
 
 export default function App() {
-  const { register, formState: { errors }, handleSubmit } = useForm({
-    criteriaMode: "all"
-  });
-  const onSubmit = data => console.log(data);
+  const {
+    register,
+    formState: { errors },
+    handleSubmit,
+  } = useForm({
+    criteriaMode: "all",
+  })
+  const onSubmit = (data) => console.log(data)
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
@@ -172,12 +175,12 @@ export default function App() {
           required: "This is required.",
           pattern: {
             value: /d+/,
-            message: "This input is number only."
+            message: "This input is number only.",
           },
           maxLength: {
             value: 10,
-            message: "This input exceed maxLength."
-          }
+            message: "This input exceed maxLength.",
+          },
         })}
       />
       <ErrorMessage
@@ -191,12 +194,10 @@ export default function App() {
         }
       />
 
-
       <input type="submit" />
     </form>
-  );
+  )
 }
-
 ```
 
 </TabGroup>
diff --git a/src/content/docs/usewatch/watch.mdx b/src/content/docs/usewatch/watch.mdx
index b50f6a693..bf327bb5b 100644
--- a/src/content/docs/usewatch/watch.mdx
+++ b/src/content/docs/usewatch/watch.mdx
@@ -20,31 +20,31 @@ A React Hook Form component that provides the same functionality as `useWatch`,
 | `defaultValue` | <TypeText>unknown</TypeText>                         | default value for `useWatch` to return before the initial render.<br/><br/>**Note:** the first render will always return `defaultValue` when it's supplied.                                                                                                                                                                                                                                                                                                                                                                                                              |
 | `disabled`     | <TypeText>boolean = false</TypeText>                 | Option to disable the subscription.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 | `exact`        | <TypeText>boolean = false</TypeText>                 | This prop will enable an exact match for input name subscriptions.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `render`        | <TypeText>Function</TypeText>                 | Subscribes to specified form field(s) and re-renders its child function whenever the values change. This allows you to declaratively consume form values in JSX without manually wiring up state.                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `render`       | <TypeText>Function</TypeText>                        | Subscribes to specified form field(s) and re-renders its child function whenever the values change. This allows you to declaratively consume form values in JSX without manually wiring up state.                                                                                                                                                                                                                                                                                                                                                                        |
 
 **Examples:**
 
 ---
 
 ```tsx copy sandbox=""
-import { useForm, Watch } from 'react-hook-form';
+import { useForm, Watch } from "react-hook-form"
 
 const App = () => {
-  const { register, control } = useForm();
+  const { register, control } = useForm()
 
   return (
     <div>
       <form>
-        <input {...register('foo')} />
-        <input {...register('bar')} />
+        <input {...register("foo")} />
+        <input {...register("bar")} />
       </form>
       {/* re-render only when value of `foo` changes */}
       <Watch
         control={control}
-        names={['foo']}
+        names={["foo"]}
         render={([foo]) => <span>{foo}</span>}
       />
     </div>
-  );
-};
+  )
+}
 ```
diff --git a/src/content/get-started.mdx b/src/content/get-started.mdx
index 7f52faf48..32857324f 100644
--- a/src/content/get-started.mdx
+++ b/src/content/get-started.mdx
@@ -14,7 +14,7 @@ npm install react-hook-form
 
 ## Example
 
-The following code excerpt demonstrates a basic usage example:
+The following code excerpt hello demonstrates a basic usage:
 
 <TabGroup buttonLabels={["TS", "JS"]}>