Feature/cv2 2191 align question adorner (surveyjs#2198)

* mobile question actions alignment
resolved surveyjs#2191

* always show question type action text
ref surveyjs#2194

* revert property grid padding

* page actions responsivity, ref surveyjs#2191

* text-overflow ellipsis for question type action
ref 2191

* remove separator check in f tests surveyjs#2162

packages/survey-creator-core/src/components/action-container-view-model.ts

@@ -105,7 +105,7 @@ export class ActionContainerViewModel<T extends SurveyModel> extends Base {
         id: "delete",
         iconName: "icon-delete_16x16",
         css: "sv-action-bar-item--secondary",
-        needSeparator: items.length > 0,
+        //needSeparator: items.length > 0,
         title: this.creator.getLocString("pe.delete"),
         visibleIndex: 30,
         iconSize: 16,

packages/survey-creator-core/src/components/question.scss

@@ -68,6 +68,20 @@ svc-question {
   .sv-action:not(:last-child) > .sv-action__content {
     padding-right: calcSize(1);
   }
+
+  .sv-action--first {
+    min-width: calcSize(13);
+    .sv-action-bar-item {
+      max-width: 100%;
+      .sv-action-bar-item__title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline-block;
+        justify-content: left;
+      }
+    }
+  }
 }
 
 .svc-hovered > .svc-question__content {

packages/survey-creator-core/src/components/question.ts

@@ -213,16 +213,17 @@ export class QuestionAdornerViewModel extends ActionContainerViewModel<SurveyMod
       "bottom",
       "center"
     );
-
+    let actionTitle = this.creator.getLocString("qt." + currentType);
     return new Action({
       id: "convertTo",
       css: "sv-action--first sv-action-bar-item--secondary",
       iconName: "icon-change_16x16",
       iconSize: 16,
-      title: this.creator.getLocString("qt." + currentType),
+      title: actionTitle,
       visibleIndex: 0,
       enabled: allowChangeType,
       component: "sv-action-bar-item-dropdown",
+      disableShrink: true,
       action: (newType) => {
         popupModel.toggleVisibility();
       },

packages/survey-creator-core/src/responsivity.scss

@@ -13,7 +13,8 @@
 
   .svc-page__content {
     padding-left: 0;    
-    padding-right: 0;    
+    padding-right: 0;   
+    border: 0; 
   }
 
   .svc-question__content {
@@ -41,4 +42,25 @@
       min-width: calcSize(46);
     }
   }
+
+  .svc-question__content-actions {
+    width: calc(100% - 3 * #{$base-unit});
+    left: calcSize(2);
+    .sv-action-bar-item {
+      border: 0;
+    }
+  }
+  .svc-page__content-actions {
+    .sv-action-bar {
+      padding-right: calcSize(1);
+      .sv-action {
+        .sv-action__content {
+          padding-right: 0;
+          .sv-action-bar-item__title--with-icon {
+            display: none;
+          }
+        }
+      }
+    }
+  }
 }

packages/survey-creator-react/index.html

@@ -17,6 +17,7 @@
 
   <!--<script src="../build/survey-creator-react.js"></script>-->
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/modern.css" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
   <!-- <link rel="stylesheet" type="text/css" href="../build/survey-creator-react.css" /> -->
 </head>
 

testCafe/designer/question-wrapper.ts

@@ -30,7 +30,7 @@ test("Single input question wrapper actions", async (t) => {
     .expect(convertActionButton.visible).ok()
     .expect(duplicateActionButton.visible).ok()
     .expect(requiredActionButton.visible).ok()
-    .expect(separator.visible).ok()
+    //.expect(separator.visible).ok()
     .expect(deleteActionButton.visible).ok()
     .expect(dotsButton.exists).ok()
     .expect(dotsButton.visible).notOk();