Fixed #5235 - Wrong styling for a page navigator when a matrix is sho…

…wn in a design surface (#5245)

* Fixed #5235 - Wrong styling for a page navigator when a matrix is shown in a design surface

* Updated etalons

* Try to fix vr-tests

* Try to fix vr-tests

* Updated etalon

---------

Co-authored-by: tsv2013 <tsv2013@noreply.github.com>

packages/survey-creator-core/src/components/page-navigator/page-navigator.scss

@@ -62,6 +62,7 @@ survey-creator,
 .svc-tab-designer--with-page-navigator {
   .svc-tab-designer_content {
     margin-right: calcSize(6.5);
+    width: calc(100% - calcSize(6.5));
   }
 }
 
@@ -100,6 +101,7 @@ survey-creator,
     flex-direction: row;
     margin-right: 0;
     margin-left: 0;
+    width: 100%;
   }
 
   .svc-tab-designer__page-navigator {

visualRegressionTests/tests/designer/page-navigator.ts

@@ -408,3 +408,183 @@ test("Page navigator scrolling in bypage mode", async (t) => {
     await takeElementScreenshot("page-navigator-bypage.png", pageNavigatorElement, t, comparer);
   });
 });
+
+test("Page navigator has enough space to be shown", async (t) => {
+  await wrapVisualTest(t, async (t, comparer) => {
+    await t.resizeWindow(1500, 800);
+    await setJSON({
+      title: "NPS Survey Question",
+      pages: [
+        {
+          name: "page1",
+          elements: [
+            {
+              type: "rating",
+              name: "nps_score",
+              title:
+                "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
+              isRequired: true,
+              rateCount: 11,
+              rateMin: 0,
+              rateMax: 10,
+              minRateDescription: "(Most unlikely)",
+              maxRateDescription: "(Most likely)",
+            },
+            {
+              type: "checkbox",
+              name: "promoter_features",
+              visibleIf: "{nps_score} >= 9",
+              title: "Which of the following features do you value the most?",
+              description: "Please select no more than three features.",
+              isRequired: true,
+              validators: [
+                {
+                  type: "answercount",
+                  text: "Please select no more than three features.",
+                  maxCount: 3,
+                },
+              ],
+              choices: [
+                "Performance",
+                "Stability",
+                "User interface",
+                "Complete functionality",
+                "Learning materials (documentation, demos, code examples)",
+                "Quality support",
+              ],
+              showOtherItem: true,
+              otherText: "Other features:",
+              colCount: 2,
+            },
+            {
+              type: "comment",
+              name: "passive_experience",
+              visibleIf: "{nps_score} >= 7  and {nps_score} <= 8",
+              title: "What can we do to make your experience more satisfying?",
+            },
+            {
+              type: "comment",
+              name: "disappointing_experience",
+              visibleIf: "{nps_score} <= 6",
+              title:
+                "Please let us know why you had such a disappointing experience with our product",
+            },
+          ],
+        },
+        {
+          name: "page2",
+          elements: [
+            {
+              type: "text",
+              name: "question1",
+            },
+            {
+              type: "text",
+              name: "question2",
+            },
+            {
+              type: "text",
+              name: "question3",
+            },
+          ],
+        },
+      ],
+    });
+    await ClientFunction(() => { document.body.focus(); })();
+    await t.hover(Selector(".svc-designer-header"), { offsetX: 1, offsetY: 1 }).wait(500);
+    const designSurface = Selector(".svc-tab-designer--with-page-navigator");
+    await t.expect(designSurface.visible).ok();
+    await takeElementScreenshot("page-navigator-not-overlaped.png", designSurface, t, comparer);
+  });
+});
+test("Page navigator in by-page mode has enough space to be shown", async (t) => {
+  await wrapVisualTest(t, async (t, comparer) => {
+    await t.resizeWindow(1500, 800);
+    await ClientFunction(() => {
+      window["creator"].pageEditMode = "bypage";
+    })();
+    await setJSON({
+      title: "NPS Survey Question",
+      pages: [
+        {
+          name: "page1",
+          elements: [
+            {
+              type: "rating",
+              name: "nps_score",
+              title:
+                "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
+              isRequired: true,
+              rateCount: 11,
+              rateMin: 0,
+              rateMax: 10,
+              minRateDescription: "(Most unlikely)",
+              maxRateDescription: "(Most likely)",
+            },
+            {
+              type: "checkbox",
+              name: "promoter_features",
+              visibleIf: "{nps_score} >= 9",
+              title: "Which of the following features do you value the most?",
+              description: "Please select no more than three features.",
+              isRequired: true,
+              validators: [
+                {
+                  type: "answercount",
+                  text: "Please select no more than three features.",
+                  maxCount: 3,
+                },
+              ],
+              choices: [
+                "Performance",
+                "Stability",
+                "User interface",
+                "Complete functionality",
+                "Learning materials (documentation, demos, code examples)",
+                "Quality support",
+              ],
+              showOtherItem: true,
+              otherText: "Other features:",
+              colCount: 2,
+            },
+            {
+              type: "comment",
+              name: "passive_experience",
+              visibleIf: "{nps_score} >= 7  and {nps_score} <= 8",
+              title: "What can we do to make your experience more satisfying?",
+            },
+            {
+              type: "comment",
+              name: "disappointing_experience",
+              visibleIf: "{nps_score} <= 6",
+              title:
+                "Please let us know why you had such a disappointing experience with our product",
+            },
+          ],
+        },
+        {
+          name: "page2",
+          elements: [
+            {
+              type: "text",
+              name: "question1",
+            },
+            {
+              type: "text",
+              name: "question2",
+            },
+            {
+              type: "text",
+              name: "question3",
+            },
+          ],
+        },
+      ],
+    });
+    await ClientFunction(() => { document.body.focus(); })();
+    await t.hover(Selector(".svc-designer-header"), { offsetX: 1, offsetY: 1 }).wait(500);
+    const designSurface = Selector(".svc-tab-designer--with-page-navigator");
+    await t.expect(designSurface.visible).ok();
+    await takeElementScreenshot("page-navigator-by-page-not-overlaped.png", designSurface, t, comparer);
+  });
+});