PR: Themes Tab - The 'Yes, reset the theme' button appears beyond the…

… popup window's boundaries (#7879) * work for the surveyjs/survey-creator#5228 * work for the surveyjs/survey-creator#5228 * work for the surveyjs/survey-creator#5228 * work for the surveyjs/survey-creator#5228
surveyjs · Feb 20, 2024 · b8569f8 · b8569f8
1 parent ff7ba46
commit b8569f8
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 1 deletion.
diff --git a/src/common-styles/sv-popup.scss b/src/common-styles/sv-popup.scss
@@ -86,11 +86,15 @@ sv-popup {
 
   .sv-popup__body-content {
     border-radius: calcSize(1);
+    max-width: min-content;
+    align-items: flex-end;
+    min-width: 452px;
   }
 
   .sv-popup__body-header {
     color: $font-editorfont-color;
     margin-bottom: 0;
+    align-self: self-start;
 
     /* UI/Default */
     font-family: $font-family;
@@ -107,6 +111,7 @@ sv-popup {
 
   .sv-popup__body-footer {
     padding-bottom: 0;
+    max-width: max-content;
 
     .sv-action-bar {
       gap: calcSize(2);

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -449,7 +449,7 @@ export function showConfirmDialog(message: string, callback: (res: boolean) => v
   cancelBtn.innerCss = "sv-popup__body-footer-item sv-popup__button sd-btn sd-btn--small";
   applyBtn.title = applyTitle || surveyLocalization.getString("ok", locale);
   applyBtn.innerCss = "sv-popup__body-footer-item sv-popup__button sv-popup__button--danger sd-btn sd-btn--small sd-btn--danger";
-  popupViewModel.width = "452px";
+  //popupViewModel.width = "452px";
   return true;
 }
 

diff --git a/...Tests/tests/defaultV2/etalons/paneldynamic-confirm-dialog--long-button-text.png b/...Tests/tests/defaultV2/etalons/paneldynamic-confirm-dialog--long-button-text.png
diff --git a/visualRegressionTests/tests/defaultV2/paneldynamic.ts b/visualRegressionTests/tests/defaultV2/paneldynamic.ts
@@ -425,6 +425,13 @@ frameworks.forEach(framework => {
       await t.pressKey(" a b c tab");
       await t.click(Selector(".sd-paneldynamic__remove-btn"));
       await takeElementScreenshot("paneldynamic-confirm-dialog", Selector(".sv-popup--confirm-delete .sv-popup__body-content"), t, comparer);
+
+      await ClientFunction(() => {
+        const applyButton = document.querySelector("#apply");
+        const spanText = applyButton?.querySelector("span");
+        spanText && (spanText.innerText = "A very long long long long long text");
+      })();
+      await takeElementScreenshot("paneldynamic-confirm-dialog--long-button-text", Selector(".sv-popup--confirm-delete .sv-popup__body-content"), t, comparer);
     });
   });
   test("tab focused state for panel dynamic", async (t) => {