chore(DockManager): apply suggestions as per comments

Author: xristianstefanov

knowledge-base/dockmanager-add-content-pane-footer.md

@@ -1,11 +1,11 @@
 ---
-title: How to Add a Footer to the DockManagerContentPane
-description: Learn how to add a fixed footer to the DockManagerContentPane.
+title: Add Fixed Footer to Scrollable DockManager Content Pane
+description: Learn how to add a fixed footer at the bottom of a scrollable DockManagerContentPane in a Telerik DockManager for Blazor.
 type: how-to
-page_title: How to Add a Fixed Footer to DockManagerContentPane in UI for Blazor
-meta_title: How to Add a Fixed Footer to DockManagerContentPane in UI for Blazor
+page_title: How to Add Fixed Footer to Scrollable DockManager Content Pane
+meta_title: How to Add Fixed Footer to Scrollable DockManager Content Pane
 slug: dockmanager-kb-add-content-pane-footer
-tags: dockmanager, content, pane, footer, header, fixed
+tags: blazor, dockmanager, footer
 res_type: kb
 ticketid: 1700189
 ---
@@ -31,62 +31,54 @@ To add a fixed footer below a scrollable content in a `DockManagerContentPane`,
 ````Razor
 <TelerikDockManager Height="90vh">
     <DockManagerPanes>
-
-        <DockManagerSplitPane Orientation="@DockManagerPaneOrientation.Vertical" Size="40%">
+        <DockManagerSplitPane Orientation="@DockManagerPaneOrientation.Vertical">
             <Panes>
-
-                <DockManagerContentPane Size="55%" HeaderText="Pane 1.1">
-                    <HeaderTemplate>
-                        <div style="color: darkblue; font-weight: bold;">
-                            Custom Header for Pane 1.1
-                        </div>
-                    </HeaderTemplate>
+                <DockManagerContentPane Size="50%" HeaderText="Pane 1.1" Class="scrollable-pane">
                     <Content>
-                        <div style="display: flex; flex-direction: column; height: 100%;">
-                            <!-- Scrollable content -->
-                            <div style="flex: 1; overflow-y: auto; padding: 0.5rem;">
+                        <div class="pane-content-outer">
+                            <div class="pane-content-inner">
                                 @for (int i = 1; i <= 30; i++)
                                 {
                                     <div>Scrollable content line @i</div>
                                 }
                             </div>
-
-                            <!-- Fixed footer -->
-                            <div style="background: #f0f0f0; padding: 0.5rem; border-top: 1px solid #ccc;">
-                                <strong>Custom Footer (Fixed)</strong>
+                            <div class="pane-footer">
+                                Fixed Pane Footer
                             </div>
                         </div>
                     </Content>
                 </DockManagerContentPane>
-
                 <DockManagerContentPane HeaderText="Pane 1.2">
                     <Content>
                         Second Content Pane in Split configuration
                     </Content>
                 </DockManagerContentPane>
-
             </Panes>
         </DockManagerSplitPane>
-
-        <DockManagerTabGroupPane>
-            <Panes>
-
-                <DockManagerContentPane HeaderText="Tab 2.1">
-                    <Content>
-                        First Tab Content
-                    </Content>
-                </DockManagerContentPane>
-
-                <DockManagerContentPane HeaderText="Tab 2.2">
-                    <Content>
-                        Second Tab Content
-                    </Content>
-                </DockManagerContentPane>
-
-            </Panes>
-        </DockManagerTabGroupPane>
     </DockManagerPanes>
 </TelerikDockManager>
+
+<style>
+    .scrollable-pane .k-pane-content {
+        padding: 0;
+    }
+    .scrollable-pane .pane-content-outer {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+    .scrollable-pane .pane-content-inner {
+        padding: var(--kendo-spacing-4);
+        flex: 1;
+        overflow-y: auto;
+    }
+    .pane-footer {
+        background: var(--kendo-color-surface);
+        padding: var(--kendo-spacing-2) var(--kendo-spacing-4);
+        border-top: 1px solid var(--kendo-color-border);
+        font-weight: bold;
+    }
+</style>
 ````
 
 ## See Also