[docs] Fix to prevent horizontal scrolling when entering a long string (

mantinedev#2185)
nmay231 · Aug 22, 2022 · 6a870c3 · 6a870c3
1 parent 730624e
commit 6a870c3
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 6 deletions.
diff --git a/src/mantine-demos/src/demos/hooks/use-debounced-state.demo.leading.tsx b/src/mantine-demos/src/demos/hooks/use-debounced-state.demo.leading.tsx
@@ -46,7 +46,7 @@ function Demo() {
           onChange={(event) => setValue(event.currentTarget.value)}
         />
       </div>
-      <div style={{ maxWidth: 400, margin: 'auto', marginTop: 15 }}>
+      <div style={{ maxWidth: 400, margin: 'auto', marginTop: 15, overflowWrap: 'break-word' }}>
         <Text>
           <Text component="span" color="dimmed" size="sm">
             Debounced value:

diff --git a/src/mantine-demos/src/demos/hooks/use-debounced-state.demo.usage.tsx b/src/mantine-demos/src/demos/hooks/use-debounced-state.demo.usage.tsx
@@ -46,7 +46,7 @@ function Demo() {
           onChange={(event) => setValue(event.currentTarget.value)}
         />
       </div>
-      <div style={{ maxWidth: 400, margin: 'auto', marginTop: 15 }}>
+      <div style={{ maxWidth: 400, margin: 'auto', marginTop: 15, overflowWrap: 'break-word' }}>
         <Text>
           <Text component="span" color="dimmed" size="sm">
             Debounced value:

diff --git a/src/mantine-demos/src/demos/hooks/use-debounced-value.demo.cancel.tsx b/src/mantine-demos/src/demos/hooks/use-debounced-value.demo.cancel.tsx
@@ -57,7 +57,7 @@ function Demo() {
         </Button>
       </div>
 
-      <div style={{ maxWidth: 400, margin: 'auto', marginTop: 15 }}>
+      <div style={{ maxWidth: 400, margin: 'auto', marginTop: 15, overflowWrap: 'break-word' }}>
         <Text>
           <Text component="span" color="dimmed" size="sm">
             Value:

diff --git a/src/mantine-demos/src/demos/hooks/use-debounced-value.demo.leading.tsx b/src/mantine-demos/src/demos/hooks/use-debounced-value.demo.leading.tsx
@@ -50,7 +50,7 @@ function Demo() {
           onChange={(event) => setValue(event.currentTarget.value)}
         />
       </div>
-      <div style={{ maxWidth: 400, margin: 'auto', marginTop: 15 }}>
+      <div style={{ maxWidth: 400, margin: 'auto', marginTop: 15, overflowWrap: 'break-word' }}>
         <Text>
           <Text component="span" color="dimmed" size="sm">
             Value:

diff --git a/src/mantine-demos/src/demos/hooks/use-debounced-value.demo.usage.tsx b/src/mantine-demos/src/demos/hooks/use-debounced-value.demo.usage.tsx
@@ -50,7 +50,7 @@ function Demo() {
           onChange={(event) => setValue(event.currentTarget.value)}
         />
       </div>
-      <div style={{ maxWidth: 400, margin: 'auto', marginTop: 15 }}>
+      <div style={{ maxWidth: 400, margin: 'auto', marginTop: 15, overflowWrap: 'break-word' }}>
         <Text>
           <Text component="span" color="dimmed" size="sm">
             Value:

diff --git a/src/mantine-demos/src/demos/hooks/use-validated-state.demo.usage.tsx b/src/mantine-demos/src/demos/hooks/use-validated-state.demo.usage.tsx
@@ -49,7 +49,7 @@ function Demo() {
   );
 
   return (
-    <div style={{ maxWidth: 320, margin: 'auto' }}>
+    <div style={{ maxWidth: 320, margin: 'auto', overflowWrap: 'break-word' }}>
       <TextInput
         value={value}
         onChange={(event) => setEmail(event.currentTarget.value)}