Fixed #7040 - TOC - some questions (matrix dropdown and similar wide …

…ones) don't fit survey container width (#7041)

* Fixed #7040 - TOC - some questions (matrix dropdown and similar wide ones) don't fir survey container width

* Work for #7040 - TOC - some questions (matrix dropdown and similar wide ones) don't fir survey container width - fixed central content column width w/o TOC

* Work for #7040 - apply width for columns in row only

* Work for #7040 - TOC - some questions (matrix dropdown and similar wide ones) don't fir survey container width - fixed vr-test

* Work for #7040 - TOC - some questions (matrix dropdown and similar wide ones) don't fir survey container width - fixed vr-test

* Work for #7040 - updated etalon

---------

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

src/components-container.scss

@@ -16,4 +16,10 @@ sv-components-container,
 
 .sv-components-column--expandable {
   flex-grow: 1;
+}
+
+.sv-components-row {
+  &>.sv-components-column--expandable {
+    width: 1px;
+  }
 }

src/defaultV2-theme/blocks/sd-body.scss

@@ -2,7 +2,7 @@
   width: 100%;
 
   .sd-body__page {
-    min-width: 300px;
+    min-width: min(100%, 300px);
   }
 
   .sd-body__timer {

visualRegressionTests/tests/defaultV2/panel.ts

@@ -15,9 +15,7 @@ const theme = "defaultV2";
 
 frameworks.forEach(framework => {
   fixture`${framework} ${title} ${theme}`
-    .page`${url_test}${theme}/${framework}`.beforeEach(async t => {
-    await applyTheme(theme);
-  });
+    .page`${url_test}${theme}/${framework}`.beforeEach(async t => { await applyTheme(theme); });
 
   test("Check oridinary panel", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
@@ -592,7 +590,7 @@ frameworks.forEach(framework => {
   test("Check question min size inside panels in design mode", async (t) => {
     if (framework == "vue") return;
     await wrapVisualTest(t, async (t, comparer) => {
-      await t.resizeWindow(350, 800);
+      await t.resizeWindow(370, 800);
       await initSurvey(framework, {
         "pages": [
           {
@@ -630,7 +628,6 @@ frameworks.forEach(framework => {
         (window as any).survey.setIsMobile(true);
       })();
       await resetFocusToBody();
-
       await takeElementScreenshot("responsive-question-inside-panels-in-creator.png", panelRoot, t, comparer);
     });
   });

visualRegressionTests/tests/defaultV2/survey.ts

@@ -1124,6 +1124,152 @@ frameworks.forEach(framework => {
       await t.resizeWindow(600, 900);
       await takeElementScreenshot("survey-navigation-toc-mobile.png", Selector(".sd-root-modern"), t, comparer);
 
+      await t.resizeWindow(1920, 1080);
+    });
+  });
+  test("TOC survey navigation wide questions fit total width", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1600, 900);
+
+      const json = {
+        title: "Software developer survey.",
+        showTOC: true,
+        pages: [
+          {
+            "title": "What operating system do you use?",
+            "elements": [
+              {
+                type: "matrixdynamic",
+                name: "teachersRate",
+                title: "Matrix Dynamic",
+                addRowText: "Add Subject",
+                horizontalScroll: true,
+                columnMinWidth: "130px",
+                columnColCount: 1,
+                cellType: "radiogroup",
+                choices: [
+                  {
+                    value: 1,
+                    text: "Yes"
+                  },
+                  {
+                    value: 0,
+                    text: "Sometimes"
+                  },
+                  {
+                    value: -1,
+                    text: "No"
+                  }
+                ],
+                columns: [
+                  {
+                    name: "subject",
+                    cellType: "dropdown",
+                    title: "Select a subject",
+                    isRequired: true,
+                    minWidth: "300px",
+                    choices: [
+                      "English: American Literature",
+                      "English: British and World Literature",
+                      "Math: Consumer Math",
+                      "Math: Practical Math",
+                      "Math: Developmental Algebra",
+                      "Math: Continuing Algebra",
+                      "Math: Pre-Algebra",
+                      "Math: Algebra",
+                      "Math: Geometry",
+                      "Math: Integrated Mathematics",
+                      "Science: Physical Science",
+                      "Science: Earth Science",
+                      "Science: Biology",
+                      "Science: Chemistry",
+                      "History: World History",
+                      "History: Modern World Studies",
+                      "History: U.S. History",
+                      "History: Modern U.S. History",
+                      "Social Sciences: U.S. Government and Politics",
+                      "Social Sciences: U.S. and Global Economics",
+                      "World Languages: Spanish",
+                      "World Languages: French",
+                      "World Languages: German",
+                      "World Languages: Latin",
+                      "World Languages: Chinese",
+                      "World Languages: Japanese"
+                    ]
+                  },
+                  {
+                    name: "explains",
+                    title: "Clearly explains the objectives"
+                  },
+                  {
+                    name: "interesting",
+                    title: "Makes class interesting"
+                  },
+                  {
+                    name: "effective",
+                    title: "Uses class time effectively"
+                  },
+                  {
+                    name: "knowledge",
+                    title: "Knows the subject matter"
+                  },
+                  {
+                    name: "recognition",
+                    title: "Recognizes and acknowledges effort"
+                  },
+                  {
+                    name: "inform",
+                    title: "Keeps me informed of my progress"
+                  },
+                  {
+                    name: "opinion",
+                    title: "Encourages and accepts different opinions"
+                  },
+                  {
+                    name: "respect",
+                    title: "Has the respect of the student"
+                  },
+                  {
+                    name: "cooperation",
+                    title: "Encourages cooperation and participation"
+                  },
+                  {
+                    name: "parents",
+                    title: "Communicates with my parents"
+                  },
+                  {
+                    name: "selfthinking",
+                    title: "Encourages me to think for myself"
+                  },
+                  {
+                    name: "frusturation",
+                    cellType: "comment",
+                    title: "Is there anything about this class that frustrates you?",
+                    minWidth: "250px"
+                  },
+                  {
+                    name: "likeTheBest",
+                    cellType: "comment",
+                    title: "What do you like best about this class and/or teacher?",
+                    minWidth: "250px"
+                  },
+                  {
+                    name: "improvements",
+                    cellType: "comment",
+                    title:
+                      "What do you wish this teacher would do differently that would improve this class?",
+                    minWidth: "250px"
+                  }
+                ],
+                rowCount: 2
+              }
+            ]
+          }
+        ]
+      };
+      await initSurvey(framework, json);
+      await takeElementScreenshot("survey-navigation-toc-matrix-fit-width.png", Selector(".sv-components-row"), t, comparer);
+
       await t.resizeWindow(1920, 1080);
     });
   });