fixed demo & markdown preview

CONTRIBUTING.md

@@ -64,7 +64,8 @@ To run it, we can use the below command. It starts an interactive CLI to check t
 npm run updates:check
 ```
 
-## Adding Contributors
+## Adding Contributors
+
 [all-contributors-cli](https://github.com/all-contributors/cli) is used for maintaining the contributors of this repository.
 
 To add a new contributor, we can run the below command and follow its instructions.
@@ -113,7 +114,8 @@ Lastly, we can run the below command to auto correct common errors in `package.j
 npm pkg fix -w react-intersection-observer-hook
 ```
 
-## Publish
+## Publishing the Package
+
 Firstly, we need to bump the package version which can be done by using the below commands.
 
 ```bash

apps/demo/src/app/page.tsx

@@ -61,8 +61,6 @@ export default function Page() {
     [firstBallRootRef, secondBallRootRef1, secondBallRootRef2],
   );
 
-  if (!settings.isContentVisible) return null;
-
   return (
     <main>
       <div className="fixed left-2 top-2 flex max-w-72 flex-col gap-2 rounded bg-slate-400 p-2 text-xs opacity-80">
@@ -76,15 +74,20 @@ export default function Page() {
           />
         </div>
       </div>
-      <div>
-        {settings.parentType === ParentType.DOCUMENT ? (
-          content
-        ) : (
-          <div ref={rootCallback} className="w-full overflow-auto bg-slate-100">
-            {content}
-          </div>
-        )}
-      </div>
+      {settings.isContentVisible && (
+        <div>
+          {settings.parentType === ParentType.DOCUMENT ? (
+            content
+          ) : (
+            <div
+              ref={rootCallback}
+              className="mx-8 max-h-80 overflow-auto bg-slate-100"
+            >
+              {content}
+            </div>
+          )}
+        </div>
+      )}
     </main>
   );
 }

apps/demo/src/components/settings.tsx

@@ -1,6 +1,6 @@
 export enum ParentType {
-  DOCUMENT,
-  SCROLLABLE_CONTAINER,
+  DOCUMENT = 'document',
+  SCROLLABLE_CONTAINER = 'scrollableContainer',
 }
 
 export type SettingsValues = {