Property grid new look: fix double borders

packages/survey-creator-core/src/components/side-bar/side-bar.scss

@@ -13,7 +13,7 @@ $reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0);
   min-width: 370px;
   width: 450px;
   height: 100%;
-  // border-inline-start: 1px solid var(--ctr-property-grid-border-color, $border);
+  border-inline-start: 1px solid var(--ctr-property-grid-border-color, $border);
 }
 
 .svc-side-bar__wrapper {
@@ -200,8 +200,6 @@ $reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0);
   width: auto;
   height: 100%;
   background-color: var(--ctr-property-grid-form-background-color, $background-dim);
-  border-inline-start: 1px solid var(--ctr-property-grid-border-color, $border);
-  // border-inline-start: 1px solid transparent;
 }
 
 .svc-side-bar {

testCafe/designer/responsiveness.ts

@@ -111,21 +111,21 @@ test("Responsive creator: property grid", async (t) => {
 
     .click(questions.find(".sv-string-editor").withText("question1"))
     .expect(propertyGridSelector.visible).ok()
-    .expect(propertyGridSelector.offsetWidth).eql(450)
+    .expect(propertyGridSelector.offsetWidth).eql(451)
     .expect(flyoutPropertyGrid.exists).notOk()
     .expect(questionToolbarActions.count).eql(4)
 
     .drag(westResizer, 100, 0)
-    .expect(propertyGridSelector.offsetWidth).eql(370)
+    .expect(propertyGridSelector.offsetWidth).eql(371)
 
     .resizeWindow(750, 700)
     .click(expandButtonSelector)
     .expect(propertyGridSelector.visible).ok()
-    .expect(propertyGridSelector.offsetWidth).eql(370)
+    .expect(propertyGridSelector.offsetWidth).eql(371)
     .expect(flyoutPropertyGrid.exists).ok()
 
     .drag(westResizer, -150, 0)
-    .expect(propertyGridSelector.offsetWidth).eql(520)
+    .expect(propertyGridSelector.offsetWidth).eql(521)
 
     .click(collapseButtonSelector)
     .expect(propertyGridSelector.visible).notOk()
@@ -148,13 +148,13 @@ test("Responsive creator: property grid", async (t) => {
   await t
     .expect(westResizer.visible).notOk()
     .expect(eastResizer.visible).ok()
-    .expect(propertyGridSelector.offsetWidth).eql(520)
+    .expect(propertyGridSelector.offsetWidth).eql(521)
 
     .drag(eastResizer, -120, 0)
-    .expect(propertyGridSelector.offsetWidth).eql(400)
+    .expect(propertyGridSelector.offsetWidth).eql(401)
 
     .drag(eastResizer, 100, 0)
-    .expect(propertyGridSelector.offsetWidth).eql(500);
+    .expect(propertyGridSelector.offsetWidth).eql(501);
 });
 
 test("Responsive creator: designer tab for mobile devices", async (t) => {

visualRegressionTests/tests/designer/rating.ts

@@ -130,7 +130,7 @@ test("Multi row rating adorner", async (t) => {
     const question2 = Selector("div[data-name=question2]");
     await takeElementScreenshot("rating-multiline-text.png", question2, t, comparer);
 
-    await t.resizeWindow(550, 900);
+    await t.resizeWindow(549, 900);
     await takeElementScreenshot("rating-multiline-mobile.png", question, t, comparer);
     await takeElementScreenshot("rating-multiline-text-mobile.png", question2, t, comparer);
 
@@ -157,7 +157,7 @@ test("Multi row rating adorner smileys", async (t) => {
     const question2 = Selector("div[data-name=question2]");
     await takeElementScreenshot("rating-multiline-smileys-text.png", question2, t, comparer);
 
-    await t.resizeWindow(550, 900);
+    await t.resizeWindow(549, 900);
     await takeElementScreenshot("rating-multiline-smileys-mobile.png", question, t, comparer);
     await takeElementScreenshot("rating-multiline-smileys-text-mobile.png", question2, t, comparer);
 
@@ -184,7 +184,7 @@ test("Multi row rating adorner stars", async (t) => {
     const question2 = Selector("div[data-name=question2]");
     await takeElementScreenshot("rating-multiline-stars-text.png", question2, t, comparer);
 
-    await t.resizeWindow(550, 900);
+    await t.resizeWindow(549, 900);
     await takeElementScreenshot("rating-multiline-stars-mobile.png", question, t, comparer);
     await takeElementScreenshot("rating-multiline-stars-text-mobile.png", question2, t, comparer);
 

visualRegressionTests/tests/designer/surface.ts

@@ -2072,7 +2072,7 @@ test("Composite question - check no scroll", async (t) => {
         ],
       });
     })();
-    await t.resizeWindow(1152, 900);
+    await t.resizeWindow(1151, 900);
     await setJSON({
       "pages": [
         {
@@ -2245,7 +2245,7 @@ test("Page adorner - collapsed", async (t) => {
 
 test("Question adorner - collapsed mobile", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
-    await t.resizeWindow(552, 1080);
+    await t.resizeWindow(551, 1080);
     const json = {
       elements: [
         {