1010807: Addressed review comments

Author: BalajiLoganathanSF4826

Document-Processing-toc.html

@@ -1020,11 +1020,6 @@
 									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/events">Events</a></li>
 								</ul>
 							</li>
-							<li>Environment Integration
-								<ul>
-									<li><a href="/document-Processing/pdf/pdf-viewer/react/environment-integration/existing-react-layout">Integrating into existing react layout</a></li>
-								</ul>
-							</li>
 							<li><a href="/document-processing/pdf/pdf-viewer/react/print">Print</a></li>
 							<li><a href="/document-processing/pdf/pdf-viewer/react/download">Download</a></li>
 							<li><a href="/document-processing/pdf/pdf-viewer/react/events">Events</a></li>
@@ -1080,6 +1075,7 @@
 									<li><a href="/document-processing/pdf/pdf-viewer/react/how-to/show-hide-annotation">Show and Hide Annotation</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/react/how-to/enable-text-selection">Dynamically Enable or Disable Text Selection</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/react/how-to/load-document-after-resources-loaded">Load document after resources loaded</a></li>
+									<li><a href="/document-Processing/pdf/pdf-viewer/react/how-to/existing-react-layout">Integrate PDF Viewer into existing react layout</a></li>
 								</ul>
 							</li>
 							<li>Troubleshooting

Document-Processing/PDF/PDF-Viewer/react/how-to-overview.md

@@ -63,3 +63,4 @@ The following how-to articles and frequently asked questions for the Syncfusion
 * [How to get the signature selected and unselected event?](./how-to/signatureselect-signatureunselect-ts)
 * [How to unload the PDF document from the viewer?](./how-to/unload-document)
 * [Load Document after resources Loaded](./how-to/load-document-after-resources-loaded)
+* [Integrate PDF Viewer into existing react layouts](./how-to/existing-react-layout)

…ent-integration/existing-react-layout.md …er/react/how-to/existing-react-layout.mdDocument-Processing/PDF/PDF-Viewer/react/environment-integration/existing-react-layout.md renamed to Document-Processing/PDF/PDF-Viewer/react/how-to/existing-react-layout.md Document-Processing/PDF/PDF-Viewer/react/environment-integration/existing-react-layout.md renamed to Document-Processing/PDF/PDF-Viewer/react/how-to/existing-react-layout.md

@@ -8,7 +8,7 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Integrating into Existing React Layout
+# Integrating PDF Viewer into Existing React Layouts
 
 ## Overview
 
@@ -41,6 +41,7 @@ The React PDF Viewer can be embedded into dashboards, admin panels, split‑scre
         );
 	}
 	```
+    ![PDF Viewer in div](../images/react-layouts-div.png)
 
 	Flex container: keep `minHeight: 0` on flex children so the viewer can shrink/grow correctly:
 
@@ -52,7 +53,7 @@ The React PDF Viewer can be embedded into dashboards, admin panels, split‑scre
 	export function App() {
         return (
             <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
-                <header style={{ height: '100px' }}>Toolbar</header>
+                <header style={{ height: '100px', textAlign: 'center' }}>Header Content</header>
                 <main style={{ flex: 1, minHeight: 0 }}>
                     <div style={{ height: '100%' }}>
                         <PdfViewerComponent
@@ -69,6 +70,7 @@ The React PDF Viewer can be embedded into dashboards, admin panels, split‑scre
         );
 	}
 	```
+    ![PDF Viewer in Flex box](../images/react-layouts-flexbox.png)
 
 	CSS Grid - reserve rows/columns using `grid-template-rows` or `grid-template-columns`:
 
@@ -150,6 +152,7 @@ The React PDF Viewer can be embedded into dashboards, admin panels, split‑scre
         }
     };
 	```
+    ![PDF Viewer in grid](../images/react-layouts-grid.png)
 
 - **Use viewer inside Tab components**
 	- The react PDF Viewer are also supported inside Syncfusion tab components. 
@@ -187,7 +190,7 @@ The React PDF Viewer can be embedded into dashboards, admin panels, split‑scre
         return (
             <div className="page">
                 <header className="header">
-                    <h3 style={{ margin: 0 }}>Tab + PDF Viewer</h3>
+                    <h3 style={{ margin: 0 }}>PDF Viewer in tab</h3>
                 </header>
 
                 <div className="tab-host">
@@ -222,6 +225,7 @@ The React PDF Viewer can be embedded into dashboards, admin panels, split‑scre
         );
     };
 	```
+    ![PDF Viewer in tab](../images/react-layouts-tab.png)
 
 - **Use viewer inside Dialog**
 	- If the viewer sits inside a dialog, for example Syncfusion Dialog, render or initialize the viewer after the dialog open events. The DOM must be visible for the viewer to measure layout.
@@ -292,6 +296,7 @@ The React PDF Viewer can be embedded into dashboards, admin panels, split‑scre
         );
     };
 	```
+    ![PDF Viewer in dialog](../images/react-layouts-dialog.png)
 
 - **Use viewer inside Collapsible sections**
 	- For accordions or collapsible containers, either render the viewer lazily when the section expands or dispatch the resize event after expansion so the viewer can recompute layout.
@@ -394,6 +399,7 @@ The React PDF Viewer can be embedded into dashboards, admin panels, split‑scre
         border-bottom: 1px solid #e5e5e5;
     }
     ```
+    ![PDF Viewer in accordion](../images/react-layouts-accordion.png)
 
 ## Why visibility and height matter