Fix row gap in compact mode (#7803)

* Fix row-gap in compact mode * Add vr test
surveyjs · Feb 5, 2024 · b8b9115 · b8b9115
1 parent 8928a4e
commit b8b9115
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 9 deletions.
diff --git a/src/defaultV2-theme/blocks/sd-row.scss b/src/defaultV2-theme/blocks/sd-row.scss
@@ -20,17 +20,17 @@
 
 .sd-page__title,
 .sd-page__description {
-  &~.sd-row.sd-page__row:not(.sd-row--compact) {
+  & ~ .sd-row.sd-page__row:not(.sd-row--compact) {
     margin-top: calcSize(3);
   }
 
-  &~.sd-page__row.sd-row--compact {
+  & ~ .sd-page__row.sd-row--compact {
     margin-top: var(--sd-base-vertical-padding);
   }
 }
 
 .sd-row.sd-page__row:not(.sd-row--compact) {
-  &~.sd-row.sd-page__row:not(.sd-row--compact) {
+  & ~ .sd-row.sd-page__row:not(.sd-row--compact) {
     margin-top: calcSize(2);
   }
 }
@@ -41,7 +41,7 @@
   width: calc(100% + var(--sd-base-padding));
   flex-wrap: wrap;
 
-  &>div {
+  & > div {
     box-sizing: border-box;
     padding-left: calcSize(2);
     display: flex;
@@ -53,14 +53,14 @@
   .sd-row--multiple {
     row-gap: var(--sd-base-vertical-padding);
 
-    &>div {
+    & > div {
       padding-left: var(--sd-base-padding);
     }
   }
 }
 
 .sd-row--multiple.sd-row--compact {
-  &>div {
+  & > div {
     padding-left: var(--sd-base-padding);
   }
 }
@@ -69,13 +69,12 @@
   margin-left: calcSize(-2);
   width: calc(100% + 2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 
-
   &.sd-row--compact {
     padding: 0;
+    row-gap: var(--sd-base-vertical-padding);
     margin-left: calc(-1 * var(--sd-base-padding));
     width: calc(100% + var(--sd-base-padding));
   }
-
 }
 
 .sd-row__panel {
@@ -87,4 +86,4 @@
   box-sizing: border-box;
   width: 100%;
   white-space: nowrap;
-}
+}
diff --git a/visualRegressionTests/tests/defaultV2/etalons/row-multiple-compact-mode.png b/visualRegressionTests/tests/defaultV2/etalons/row-multiple-compact-mode.png
diff --git a/visualRegressionTests/tests/defaultV2/survey.ts b/visualRegressionTests/tests/defaultV2/survey.ts
@@ -1287,6 +1287,49 @@ frameworks.forEach(framework => {
     });
   });
 
+  test("Check multiple row in compact mode", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(700, 1080);
+      const json = {
+        pages: [
+          {
+            name: "p1",
+            elements: [
+              {
+                type: "text",
+                name: "q1",
+                title: "Question",
+                startWithNewLine: false
+              },
+              {
+                type: "text",
+                name: "q2",
+                title: "Question",
+                startWithNewLine: false
+              },
+              {
+                type: "text",
+                name: "q3",
+                title: "Question",
+                startWithNewLine: false
+              },
+              {
+                type: "text",
+                name: "q4",
+                title: "Question",
+                startWithNewLine: false
+              },
+            ]
+          },
+        ]
+      };
+
+      await initSurvey(framework, json);
+      await ClientFunction(() => (window as any).survey.isCompact = true)();
+      await takeElementScreenshot("row-multiple-compact-mode.png", Selector(".sd-root-modern"), t, comparer);
+    });
+  });
+
   test("Check survey logo right with empty title", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);