TOC shouldn't overlap survey header

src/defaultV2-theme/blocks/header.scss

@@ -4,13 +4,40 @@
 }
 
 .sv-header__overlap {
-  margin-bottom: calcSize(-14);
   padding-bottom: calcSize(8);
+
+  &~div {
+
+    .sd-body,
+    .sv-body {
+      margin-top: calcSize(-14);
+    }
+  }
+}
+
+.sd-root-modern--mobile .sv-header__overlap {
+  padding-bottom: calcSize(2);
+
+  &~div {
+
+    .sd-body,
+    .sv-body {
+      margin-top: calcSize(-5);
+    }
+  }
 }
 
 .sv-header__overlap.sv-header__without-background {
   margin-bottom: 0;
   padding-bottom: 0;
+
+  &~div {
+
+    .sd-body,
+    .sv-body {
+      margin-top: 0;
+    }
+  }
 }
 
 .sv-header__without-background {
@@ -21,11 +48,6 @@
   }
 }
 
-.sd-root-modern--mobile .sv-header__overlap {
-  margin-bottom: calcSize(-5);
-  padding-bottom: calcSize(2);
-}
-
 .sv-header__content {
   padding: calcSize(5);
   box-sizing: border-box;

src/surveyToc.ts

@@ -100,7 +100,7 @@ export class TOCModel {
         const titleElement = rootElement.querySelector(titleSelector) as HTMLDivElement;
         const titleElementHeight = titleElement ? titleElement.getBoundingClientRect().height : 0;
         const scrollCompensationHeight = rootElement.scrollTop > titleElementHeight ? 0 : titleElementHeight - rootElement.scrollTop;
-        tocRootElement.style.height = (rootHeight - scrollCompensationHeight - 2) + "px";
+        tocRootElement.style.height = (rootHeight - scrollCompensationHeight - 1) + "px";
       }
     }
   }

tests/surveyTOCTests.ts

@@ -465,13 +465,13 @@ QUnit.test("updateStickyTOCSize", function (assert) {
     style: {}
   };
   tocModel.updateStickyTOCSize(mockRootEl);
-  assert.equal(tocRootElement.style.height, "158px", "Height updated");
+  assert.equal(tocRootElement.style.height, "159px", "Height updated");
 
   mockRootEl.scrollTop = 60;
   tocModel.updateStickyTOCSize(mockRootEl);
-  assert.equal(tocRootElement.style.height, "198px", "Height updated to full container");
+  assert.equal(tocRootElement.style.height, "199px", "Height updated to full container");
 
   mockRootEl.scrollTop = 20;
   tocModel.updateStickyTOCSize(mockRootEl);
-  assert.equal(tocRootElement.style.height, "178px", "Height updated to half title");
+  assert.equal(tocRootElement.style.height, "179px", "Height updated to half title");
 });

visualRegressionTests/tests/defaultV2/advancedHeader.ts

@@ -88,6 +88,47 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("survey-advanced-header-mobile-with-overlap.png", Selector(".sd-root-modern"), t, comparer);
     });
   });
+  test("Check survey TOC + advanced header with overlap", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1200, 1000);
+      await initSurvey(framework, {
+        focusFirstQuestionAutomatic: true,
+        title: "Survey Title",
+        description: "Survey description",
+        logo: "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg",
+        "widthMode": "static",
+        "width": "600",
+        headerView: "advanced",
+        showTOC: true,
+        questions: [
+          {
+            type: "text",
+            title: "Question title",
+            name: "q1"
+          }
+        ]
+      });
+      await ClientFunction(() => {
+        (<any>window).survey.applyTheme({
+          "header": {
+            height: "500px",
+            inheritWidthFrom: "survey",
+            "overlapEnabled": true,
+          },
+          "cssVariables": {
+            "--sjs-header-backcolor": "rgba(25, 179, 148, 1)"
+          }
+        });
+      })();
+      await takeElementScreenshot("survey-toc-advanced-header-with-overlap.png", Selector(".sd-root-modern"), t, comparer);
+
+      await t.resizeWindow(500, 600);
+      await ClientFunction(() => {
+        (<any>window).survey.setIsMobile(true);
+      })();
+      await takeElementScreenshot("survey-toc-advanced-header-mobile-with-overlap.png", Selector(".sd-root-modern"), t, comparer);
+    });
+  });
   test("Check header background color modes", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(800, 600);