fix: add line break for long words, like variable names (#256)

## Why?
On Docs/SDK/Overview, there is a layout break from long unique words
like variables that can be greater than the device width. This PR fixes
this by forcing line break on word level.

Before:
<img width="411" alt="image"
src="https://github.com/user-attachments/assets/d0fa21fd-3532-45e6-bbe6-fc9d5fd6b99e">


After:
<img width="413" alt="image"
src="https://github.com/user-attachments/assets/72301086-33c1-4099-9515-d06b183d4e1d">


## Tickets?

-
[PLAT-1585](https://linear.app/fleekxyz/issue/PLAT-1585/docs-add-line-break-for-long-words-like-variables-so-the-layout-wont)


## Contribution checklist?

- [x] The commit messages are detailed
- [x] The `build` command runs locally
- [ ] Assets or static content are linked and stored in the project
- [ ] Document filename is named after the slug
- [ ] You've reviewed spelling using a grammar checker
- [ ] For documentation, guides or references, you've tested the
commands and steps
- [ ] You've done enough research before writing

## Security checklist?

- [ ] Sensitive data has been identified and is being protected properly
- [ ] Injection has been prevented (parameterized queries, no eval or
system calls)
- [ ] The Components are escaping output (to prevent XSS)

## References?

Optionally, provide references such as links

## Preview?

Optionally, provide the preview url here

src/styles/docPage.css

@@ -10,7 +10,7 @@
     h2,
     h3,
     h4 {
-      @apply py-10 font-sans font-semibold leading-30 lg:leading-40;
+      @apply break-words py-10 font-sans font-semibold leading-40;
     }
 
     h1 {