diff --git a/build-scripts/karma.conf.js b/build-scripts/karma.conf.js
index 62e92bf9ac..bfc07ba41e 100644
--- a/build-scripts/karma.conf.js
+++ b/build-scripts/karma.conf.js
@@ -9,7 +9,7 @@ var webpackConfig = webpackConfigCreator({
   packageJson
 );
 
-process.env.CHROME_BIN = require("puppeteer").executablePath();
+//process.env.CHROME_BIN = require("puppeteer").executablePath();
 
 /*setup ts config file for tests ("noImplicitAny": false)*/
 webpackConfig.module.rules[0].options.configFile = "build-scripts/tsconfig.tests.json";
diff --git a/src/question.ts b/src/question.ts
index 45f9536596..63e8a7caf9 100644
--- a/src/question.ts
+++ b/src/question.ts
@@ -106,7 +106,6 @@ export class Question extends SurveyElement<Question>
   }
   public setIsMobile(val: boolean) {
     this.isMobile = val && (this.allowMobileInDesignMode() || !this.isDesignMode);
-    this.renderMinWidth = !val;
   }
   @property({ defaultValue: false }) isMobile: boolean;
   @property() forceIsInputReadOnly: boolean;
diff --git a/src/survey-element.ts b/src/survey-element.ts
index 2a36459687..c6c31bd19a 100644
--- a/src/survey-element.ts
+++ b/src/survey-element.ts
@@ -908,11 +908,11 @@ export class SurveyElement<E = any> extends SurveyElementCore implements ISurvey
   }
 
   @property({ defaultValue: true }) allowRootStyle: boolean;
-  @property({ defaultValue: true }) renderMinWidth: boolean;
 
   get rootStyle() {
     let style: { [index: string]: any } = {};
-    let minWidth = this.renderMinWidth ? this.minWidth : "min(100%, " + this.minWidth + ")";
+    let minWidth = this.minWidth;
+    if (minWidth != "auto") minWidth = "min(100%, " + this.minWidth + ")";
     if (this.allowRootStyle && this.renderWidth) {
       // style["width"] = this.renderWidth;
       style["flexGrow"] = 1;
diff --git a/testCafe/survey/surveyWidth.ts b/testCafe/survey/surveyWidth.ts
index 46655af820..22c8f1bc2d 100644
--- a/testCafe/survey/surveyWidth.ts
+++ b/testCafe/survey/surveyWidth.ts
@@ -26,10 +26,10 @@ frameworks.forEach((framework) => {
 
   test("Check question width", async (t) => {
     await t
-      .expect(Selector(".sv_row > div").getStyleProperty("min-width")).eql("300px");
+      .expect(Selector(".sv_row > div").getStyleProperty("min-width")).eql("min(100% + 0px, 0% + 300px)");
 
     await ClientFunction(() => { window["survey"].getAllQuestions()[0].minWidth = "200px"; })();
     await t
-      .expect(Selector(".sv_row > div").getStyleProperty("min-width")).eql("200px");
+      .expect(Selector(".sv_row > div").getStyleProperty("min-width")).eql("min(100% + 0px, 0% + 200px)");
   });
 });
\ No newline at end of file
diff --git a/tests/markup/etalon_paneldynamic.ts b/tests/markup/etalon_paneldynamic.ts
index da5022c64d..26d96b16c4 100644
--- a/tests/markup/etalon_paneldynamic.ts
+++ b/tests/markup/etalon_paneldynamic.ts
@@ -176,7 +176,7 @@ registerMarkupTests(
     snapshot: "paneldynamic-no-footer-1",
     removeIds: true,
     excludePlatform: "Vue",
-    before: () => StylesManager.applyTheme("defaultV2"),
+    before: () => { StylesManager.applyTheme("defaultV2"); },
     after: () => StylesManager.applyTheme("default"),
   },
   {
diff --git a/tests/markup/snapshots/page-swnl-title-v2.snap.html b/tests/markup/snapshots/page-swnl-title-v2.snap.html
index e7982b0968..10bd8205a1 100644
--- a/tests/markup/snapshots/page-swnl-title-v2.snap.html
+++ b/tests/markup/snapshots/page-swnl-title-v2.snap.html
@@ -1,4 +1,4 @@
-<div style="flex:1 1 50%; max-width:100%; min-width:300px;">
+<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
 	<div class="sd-element sd-element--with-frame sd-question sd-row__question sd-row__question--small" data-name="question0" id="testid0">
 		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
 			<h5 class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
@@ -12,7 +12,7 @@ <h5 class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle"
 		</div>
 	</div>
 </div>
-<div style="flex:1 1 50%; max-width:100%; min-width:300px;">
+<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
 	<div class="sd-element sd-element--with-frame sd-question sd-row__question sd-row__question--small" data-name="question1" id="testid1">
 		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
 			<h5 class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle">
diff --git a/tests/markup/snapshots/page-swnl-v2.snap.html b/tests/markup/snapshots/page-swnl-v2.snap.html
index 802bc70923..7b90de42d6 100644
--- a/tests/markup/snapshots/page-swnl-v2.snap.html
+++ b/tests/markup/snapshots/page-swnl-v2.snap.html
@@ -1,11 +1,11 @@
-<div style="flex:1 1 50%; max-width:100%; min-width:300px;">
+<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
 	<div class="sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
 		<div class="sd-question__content" role="presentation">
 			<div class="sd-html">HTML1</div>
 		</div>
 	</div>
 </div>
-<div style="flex:1 1 50%; max-width:100%; min-width:300px;">
+<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
 	<div class="sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
 		<div class="sd-question__content" role="presentation">
 			<div class="sd-html">HTML2</div>
diff --git a/tests/markup/snapshots/page-title-v2.snap.html b/tests/markup/snapshots/page-title-v2.snap.html
index 246fcfa484..8b9ac1583d 100644
--- a/tests/markup/snapshots/page-title-v2.snap.html
+++ b/tests/markup/snapshots/page-title-v2.snap.html
@@ -1,4 +1,4 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:300px;">
+<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 	<div class="sd-element sd-element--with-frame sd-question sd-row__question sd-row__question--small" data-name="question0" id="testid0">
 		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
 			<h5 class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
diff --git a/tests/markup/snapshots/panel-page-swnl-title-v2.snap.html b/tests/markup/snapshots/panel-page-swnl-title-v2.snap.html
index ff65afa6af..af91cf6eeb 100644
--- a/tests/markup/snapshots/panel-page-swnl-title-v2.snap.html
+++ b/tests/markup/snapshots/panel-page-swnl-title-v2.snap.html
@@ -1,4 +1,4 @@
-<div style="flex:1 1 50%; max-width:100%; min-width:300px;">
+<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
 	<div class="sd-element sd-element--with-frame sd-question sd-row__question sd-row__question--small" data-name="question0" id="testid0">
 		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
 			<h5 class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
@@ -16,7 +16,7 @@ <h5 class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle"
 	<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
 		<div class="sd-panel__content" id="testidp0_content">
 			<div class="sd-clearfix sd-row">
-				<div style="flex:1 1 100%; max-width:100%; min-width:300px;">
+				<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 					<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="question1" id="testid1">
 						<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
 							<h5 class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle">
diff --git a/tests/markup/snapshots/panel-page-swnl-v2.snap.html b/tests/markup/snapshots/panel-page-swnl-v2.snap.html
index b8fd306ba1..f59dbf6e0f 100644
--- a/tests/markup/snapshots/panel-page-swnl-v2.snap.html
+++ b/tests/markup/snapshots/panel-page-swnl-v2.snap.html
@@ -1,4 +1,4 @@
-<div style="flex:1 1 50%; max-width:100%; min-width:300px;">
+<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
 	<div class="sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
 		<div class="sd-question__content" role="presentation">
 			<div class="sd-html">HTML1</div>
@@ -9,7 +9,7 @@
 	<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
 		<div class="sd-panel__content" id="testidp0_content">
 			<div class="sd-clearfix sd-row">
-				<div style="flex:1 1 100%; max-width:100%; min-width:300px;">
+				<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 					<div class="sd-element--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
 						<div class="sd-question__content" role="presentation">
 							<div class="sd-html">HTML2</div>
diff --git a/tests/markup/snapshots/panel-question-headers.snap.html b/tests/markup/snapshots/panel-question-headers.snap.html
index efa2d829da..bd87e092c9 100644
--- a/tests/markup/snapshots/panel-question-headers.snap.html
+++ b/tests/markup/snapshots/panel-question-headers.snap.html
@@ -10,7 +10,7 @@ <h4 aria-label="panel_title" class="sd-element__title sd-panel__title sd-title">
 		</div>
 		<div class="sd-panel__content" id="testidp0_content">
 			<div class="sd-clearfix sd-row">
-				<div style="flex:1 1 100%; max-width:100%; min-width:300px;">
+				<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 					<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="question1" id="testid0">
 						<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
 							<h5 class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
diff --git a/tests/markup/snapshots/panel-swnl-v2.snap.html b/tests/markup/snapshots/panel-swnl-v2.snap.html
index 029033c2f9..7b255f501f 100644
--- a/tests/markup/snapshots/panel-swnl-v2.snap.html
+++ b/tests/markup/snapshots/panel-swnl-v2.snap.html
@@ -1,5 +1,5 @@
 <div class="sd-clearfix sd-row">
-	<div style="flex:1 1 100%; max-width:100%; min-width:300px;">
+	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 		<div class="sd-element--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
 			<div class="sd-question__content" role="presentation">
 				<div class="sd-html">HTML2</div>
diff --git a/tests/markup/snapshots/panel-text.snap.html b/tests/markup/snapshots/panel-text.snap.html
index 706dcd5d29..eb5602a6cc 100644
--- a/tests/markup/snapshots/panel-text.snap.html
+++ b/tests/markup/snapshots/panel-text.snap.html
@@ -1,5 +1,5 @@
 <div class="sv_row">
-	<div style="flex:1 1 100%; max-width:100%; min-width:300px;">
+	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 		<div class="sv_q sv_qstn" data-name="question1" id="testid0">
 			<div role="presentation">
 				<input aria-invalid="false" aria-label="question1" aria-required="false" class="sv_q_text_root" id="testid0i" placeholder="" type="text">
diff --git a/tests/markup/snapshots/panel.snap.html b/tests/markup/snapshots/panel.snap.html
index c9b964a371..d8fb88a10b 100644
--- a/tests/markup/snapshots/panel.snap.html
+++ b/tests/markup/snapshots/panel.snap.html
@@ -1,5 +1,5 @@
 <div class="sv_row">
-	<div style="flex:1 1 100%; max-width:100%; min-width:300px;">
+	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 		<div class="sv_q sv_qstn" data-name="question1" id="testid0">
 			<div role="presentation">
 				<div>HTML content here</div>
diff --git a/tests/markup/snapshots/paneldynamic-no-footer-1.snap.html b/tests/markup/snapshots/paneldynamic-no-footer-1.snap.html
index a8133dfc11..757a4a8c2e 100644
--- a/tests/markup/snapshots/paneldynamic-no-footer-1.snap.html
+++ b/tests/markup/snapshots/paneldynamic-no-footer-1.snap.html
@@ -6,7 +6,7 @@
 					<div class="sd-element sd-element--complex sd-panel sd-row__panel">
 						<div class="sd-panel__content">
 							<div class="sd-clearfix sd-row">
-								<div style="flex:1 1 100%; max-width:100%; min-width:300px;">
+								<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 									<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="question2">
 										<div class="sd-question__content sd-text__content" role="presentation">
 											<input aria-invalid="false" aria-label="question2" aria-required="false" class="sd-input sd-text" placeholder="" type="text">
diff --git a/tests/markup/snapshots/paneldynamic-no-footer-2.snap.html b/tests/markup/snapshots/paneldynamic-no-footer-2.snap.html
index a8133dfc11..757a4a8c2e 100644
--- a/tests/markup/snapshots/paneldynamic-no-footer-2.snap.html
+++ b/tests/markup/snapshots/paneldynamic-no-footer-2.snap.html
@@ -6,7 +6,7 @@
 					<div class="sd-element sd-element--complex sd-panel sd-row__panel">
 						<div class="sd-panel__content">
 							<div class="sd-clearfix sd-row">
-								<div style="flex:1 1 100%; max-width:100%; min-width:300px;">
+								<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 									<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="question2">
 										<div class="sd-question__content sd-text__content" role="presentation">
 											<input aria-invalid="false" aria-label="question2" aria-required="false" class="sd-input sd-text" placeholder="" type="text">
diff --git a/tests/markup/snapshots/paneldynamic-remove-btn-action-bar.snap.html b/tests/markup/snapshots/paneldynamic-remove-btn-action-bar.snap.html
index 04e8f07aa2..9acd1a07d6 100644
--- a/tests/markup/snapshots/paneldynamic-remove-btn-action-bar.snap.html
+++ b/tests/markup/snapshots/paneldynamic-remove-btn-action-bar.snap.html
@@ -6,7 +6,7 @@
 					<div class="sd-element sd-element--complex sd-panel sd-row__panel" id="testid0panel0">
 						<div class="sd-panel__content" id="testid0panel0_content">
 							<div class="sd-clearfix sd-row">
-								<div style="flex:1 1 100%; max-width:100%; min-width:300px;">
+								<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 									<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="q1" id="testid0panel0question0">
 										<div class="sd-question__content sd-text__content" role="presentation">
 											<input aria-invalid="false" aria-label="q1" aria-required="false" class="sd-input sd-text" id="testid0panel0question0i" placeholder="" type="text">
diff --git a/tests/markup/snapshots/paneldynamic-remove-btn-right.snap.html b/tests/markup/snapshots/paneldynamic-remove-btn-right.snap.html
index 4d08c2a12a..8dd206c365 100644
--- a/tests/markup/snapshots/paneldynamic-remove-btn-right.snap.html
+++ b/tests/markup/snapshots/paneldynamic-remove-btn-right.snap.html
@@ -6,7 +6,7 @@
 					<div class="sd-element sd-element--complex sd-panel sd-row__panel" id="testid0panel0">
 						<div class="sd-panel__content" id="testid0panel0_content">
 							<div class="sd-clearfix sd-row">
-								<div style="flex:1 1 100%; max-width:100%; min-width:300px;">
+								<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 									<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="q1" id="testid0panel0question0">
 										<div class="sd-question__content sd-text__content" role="presentation">
 											<input aria-invalid="false" aria-label="q1" aria-required="false" class="sd-input sd-text" id="testid0panel0question0i" placeholder="" type="text">
diff --git a/tests/markup/snapshots/question-errors-v2-bottom.snap.html b/tests/markup/snapshots/question-errors-v2-bottom.snap.html
index e69c0fed84..d0a2e56af6 100644
--- a/tests/markup/snapshots/question-errors-v2-bottom.snap.html
+++ b/tests/markup/snapshots/question-errors-v2-bottom.snap.html
@@ -1,4 +1,4 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:300px;">
+<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 	<div class="sd-element sd-element--with-frame sd-question sd-question--error sd-row__question sd-row__question--small" data-name="name" id="testid0">
 		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
 			<h5 class="sd-element__title sd-question__title sd-question__title--error sd-question__title--required sd-title" id="testid0_ariaTitle">
diff --git a/tests/markup/snapshots/question-errors-v2-top.snap.html b/tests/markup/snapshots/question-errors-v2-top.snap.html
index 6016dcb0e2..1b6eb8b0cf 100644
--- a/tests/markup/snapshots/question-errors-v2-top.snap.html
+++ b/tests/markup/snapshots/question-errors-v2-top.snap.html
@@ -1,4 +1,4 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:300px;">
+<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 	<div class="sd-element sd-element--with-frame sd-question sd-question--error sd-row__question sd-row__question--small" data-name="name" id="testid0">
 		<div aria-live="polite" class="sd-question__erbox sd-question__erbox--above-question sd-question__erbox--outside-question" id="testid0_errors" role="alert">
 			<div>
diff --git a/tests/markup/snapshots/question-with-indent.snap.html b/tests/markup/snapshots/question-with-indent.snap.html
index 8bd437c8aa..7e257482c5 100644
--- a/tests/markup/snapshots/question-with-indent.snap.html
+++ b/tests/markup/snapshots/question-with-indent.snap.html
@@ -1,4 +1,4 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:300px;">
+<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 	<div class="sd-element sd-element--with-frame sd-question sd-row__question sd-row__question--small" data-name="name" id="testid0" style="--sv-element-add-padding-left:20px; --sv-element-add-padding-right:20px;">
 		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
 			<h5 class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
diff --git a/tests/markup/snapshots/survey-navigation.snap.html b/tests/markup/snapshots/survey-navigation.snap.html
index a1ff6450bd..3677959386 100644
--- a/tests/markup/snapshots/survey-navigation.snap.html
+++ b/tests/markup/snapshots/survey-navigation.snap.html
@@ -5,7 +5,7 @@
 		<div class="sv_body sv_body--static sv-components-column sv-components-column--expandable" id="testidpage0">
 			<div class="sv_p_root">
 				<div class="sv_row">
-					<div style="flex:1 1 100%; max-width:100%; min-width:300px;">
+					<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 						<div class="sv_q sv_qstn" data-name="q1" id="testid0">
 							<div role="presentation">
 								<div>
diff --git a/tests/surveyElementTests.ts b/tests/surveyElementTests.ts
index b549d333ef..e825e02e88 100644
--- a/tests/surveyElementTests.ts
+++ b/tests/surveyElementTests.ts
@@ -231,7 +231,7 @@ QUnit.test("allowRootStyle", function (assert) {
     "flexGrow": 1,
     "flexShrink": 1,
     "maxWidth": "100%",
-    "minWidth": "300px",
+    "minWidth": "min(100%, 300px)",
   });
   q1.allowRootStyle = false;
   survey.css = defaultV2Css;
@@ -246,16 +246,14 @@ QUnit.test("rootStyle on mobile", function (assert) {
     }]
   });
   const q1 = survey.getQuestionByName("q1");
-  assert.ok(q1.renderMinWidth);
   assert.deepEqual(q1.rootStyle, {
     "flexBasis": "100%",
     "flexGrow": 1,
     "flexShrink": 1,
     "maxWidth": "100%",
-    "minWidth": "300px",
+    "minWidth": "min(100%, 300px)",
   });
   survey.setIsMobile(true);
-  assert.notOk(q1.renderMinWidth);
   assert.deepEqual(q1.rootStyle, {
     "flexBasis": "100%",
     "flexGrow": 1,
diff --git a/tests/surveytests.ts b/tests/surveytests.ts
index 488187ffa2..e267723c40 100644
--- a/tests/surveytests.ts
+++ b/tests/surveytests.ts
@@ -15823,16 +15823,12 @@ QUnit.test("Check survey isMobile in design mode", function (assert) {
   const textQuestion = survey.getQuestionByName("q1");
   const multipleTextQuestion = survey.getQuestionByName("q2");
   const checkboxQuestion = survey.getQuestionByName("q3");
-  assert.ok(textQuestion.renderMinWidth);
   survey.setIsMobile(true);
   assert.ok(survey._isMobile);
   assert.notOk(survey.isMobile);
   assert.notOk(textQuestion.isMobile);
-  assert.notOk(textQuestion.renderMinWidth);
   assert.ok(multipleTextQuestion.isMobile);
-  assert.notOk(multipleTextQuestion.renderMinWidth);
   assert.ok(checkboxQuestion.isMobile);
-  assert.notOk(checkboxQuestion.renderMinWidth);
 });
 QUnit.test("Check survey isMobile is set correctly on adding new question", function (assert) {
   const survey = new SurveyModel({
diff --git a/visualRegressionTests/tests/defaultV2/boolean.ts b/visualRegressionTests/tests/defaultV2/boolean.ts
index 9a1e338142..2d1797e91d 100644
--- a/visualRegressionTests/tests/defaultV2/boolean.ts
+++ b/visualRegressionTests/tests/defaultV2/boolean.ts
@@ -57,6 +57,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
+        width: "900px",
         questions: [
           {
             type: "boolean",
diff --git a/visualRegressionTests/tests/defaultV2/complex.ts b/visualRegressionTests/tests/defaultV2/complex.ts
index 42ab5ff043..c69318be37 100644
--- a/visualRegressionTests/tests/defaultV2/complex.ts
+++ b/visualRegressionTests/tests/defaultV2/complex.ts
@@ -15,6 +15,7 @@ const theme = "defaultV2";
 
 const json = {
   showQuestionNumbers: "off",
+  width: "900px",
   questions: [
     {
       type: "Paneldynamic",
diff --git a/visualRegressionTests/tests/defaultV2/etalons/file-question-single-file-small-image.png b/visualRegressionTests/tests/defaultV2/etalons/file-question-single-file-small-image.png
index 45cf61ee88..504c3494bc 100644
Binary files a/visualRegressionTests/tests/defaultV2/etalons/file-question-single-file-small-image.png and b/visualRegressionTests/tests/defaultV2/etalons/file-question-single-file-small-image.png differ
diff --git a/visualRegressionTests/tests/defaultV2/etalons/file-question-single-file-small-image_mask.png b/visualRegressionTests/tests/defaultV2/etalons/file-question-single-file-small-image_mask.png
new file mode 100644
index 0000000000..5184ce0dd7
Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/file-question-single-file-small-image_mask.png differ
diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-with-panel-compact.png b/visualRegressionTests/tests/defaultV2/etalons/survey-with-panel-compact.png
index 500e612883..6cdb7fb63d 100644
Binary files a/visualRegressionTests/tests/defaultV2/etalons/survey-with-panel-compact.png and b/visualRegressionTests/tests/defaultV2/etalons/survey-with-panel-compact.png differ
diff --git a/visualRegressionTests/tests/defaultV2/etalons/two-panels-one-row-small-screen.png b/visualRegressionTests/tests/defaultV2/etalons/two-panels-one-row-small-screen.png
index 4a6b88ecbe..5f2c46304b 100644
Binary files a/visualRegressionTests/tests/defaultV2/etalons/two-panels-one-row-small-screen.png and b/visualRegressionTests/tests/defaultV2/etalons/two-panels-one-row-small-screen.png differ
diff --git a/visualRegressionTests/tests/defaultV2/file.ts b/visualRegressionTests/tests/defaultV2/file.ts
index 4a91a102b7..728ff3880c 100644
--- a/visualRegressionTests/tests/defaultV2/file.ts
+++ b/visualRegressionTests/tests/defaultV2/file.ts
@@ -14,6 +14,7 @@ const applyTheme = ClientFunction(theme => {
 const theme = "defaultV2";
 const json = {
   showQuestionNumbers: "off",
+  width: "900px",
   questions: [{
     type: "file",
     title: "Upload everything what you’d like to.",
@@ -82,6 +83,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await ClientFunction(() => {
+        (window as any).survey.width = undefined;
         (window as any).survey.resizeObserver.disconnect();
         (window as any).survey.setIsMobile(false);
         (window as any).survey.getAllQuestions()[0].resizeObserver.disconnect();
@@ -157,6 +159,7 @@ frameworks.forEach(framework => {
       await t.resizeWindow(1980, 1000);
       await initSurvey(framework, {
         showQuestionNumbers: "off",
+        widthMode: "900px",
         questions: [{
           type: "file",
           title: "Question With Camera",
diff --git a/visualRegressionTests/tests/defaultV2/html.ts b/visualRegressionTests/tests/defaultV2/html.ts
index fb2ddc60ba..993013ec94 100644
--- a/visualRegressionTests/tests/defaultV2/html.ts
+++ b/visualRegressionTests/tests/defaultV2/html.ts
@@ -22,6 +22,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
+        width: "900px",
         questions: [
           {
             type: "html",
@@ -43,6 +44,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
+        width: "900px",
         questions: [
           {
             type: "html",
diff --git a/visualRegressionTests/tests/defaultV2/image.ts b/visualRegressionTests/tests/defaultV2/image.ts
index d19535ba97..2608223fb4 100644
--- a/visualRegressionTests/tests/defaultV2/image.ts
+++ b/visualRegressionTests/tests/defaultV2/image.ts
@@ -23,6 +23,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
+        widthMode: "responsive",
         questions: [
           {
             type: "image",
diff --git a/visualRegressionTests/tests/defaultV2/matrixdynamic.ts b/visualRegressionTests/tests/defaultV2/matrixdynamic.ts
index 8894459ecf..b47bfd804d 100644
--- a/visualRegressionTests/tests/defaultV2/matrixdynamic.ts
+++ b/visualRegressionTests/tests/defaultV2/matrixdynamic.ts
@@ -18,6 +18,7 @@ frameworks.forEach(framework => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
         showQuestionNumbers: "off",
+        width: "900px",
         elements: [
           {
             type: "matrixdynamic",
@@ -43,6 +44,7 @@ frameworks.forEach(framework => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
         showQuestionNumbers: "off",
+        width: "900px",
         elements: [
           {
             type: "matrixdynamic",
@@ -135,6 +137,7 @@ frameworks.forEach(framework => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
         showQuestionNumbers: "off",
+        width: "900px",
         elements: [
           {
             type: "matrixdynamic",
@@ -178,6 +181,7 @@ frameworks.forEach(framework => {
       await initSurvey(framework, {
         questionErrorLocation: "bottom",
         showQuestionNumbers: "off",
+        width: "900px",
         elements: [
           {
             type: "matrixdynamic",
diff --git a/visualRegressionTests/tests/defaultV2/multipletext.ts b/visualRegressionTests/tests/defaultV2/multipletext.ts
index 4408c09d6b..4db73fe8ec 100644
--- a/visualRegressionTests/tests/defaultV2/multipletext.ts
+++ b/visualRegressionTests/tests/defaultV2/multipletext.ts
@@ -22,6 +22,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
+        width: "900px",
         questions: [
           {
             type: "multipletext",
@@ -58,6 +59,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
+        widthMode: "responsive",
         questions: [
           {
             type: "multipletext",
diff --git a/visualRegressionTests/tests/defaultV2/panel.ts b/visualRegressionTests/tests/defaultV2/panel.ts
index 35afd51617..6ac32413b6 100644
--- a/visualRegressionTests/tests/defaultV2/panel.ts
+++ b/visualRegressionTests/tests/defaultV2/panel.ts
@@ -21,6 +21,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
+        width: "900px",
         questions: [
           {
             type: "panel",
@@ -54,6 +55,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
+        width: "900px",
         questions: [
           {
             type: "panel",
@@ -93,6 +95,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
+        width: "900px",
         questions: [
           {
             type: "panel",
@@ -130,6 +133,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
+        width: "900px",
         questions: [
           {
             type: "panel",
@@ -271,6 +275,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
+        width: "900px",
         questions: [
           {
             type: "panel",
@@ -309,6 +314,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
+        width: "900px",
         questions: [
           {
             type: "panel",
@@ -348,6 +354,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
+        width: "900px",
         questionErrorLocation: "bottom",
         questions: [
           {
@@ -385,6 +392,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
+        width: "900px",
         questions: [
           {
             type: "panel",
diff --git a/visualRegressionTests/tests/defaultV2/paneldynamic.ts b/visualRegressionTests/tests/defaultV2/paneldynamic.ts
index 1e0bcbf6a8..3967d07dcf 100644
--- a/visualRegressionTests/tests/defaultV2/paneldynamic.ts
+++ b/visualRegressionTests/tests/defaultV2/paneldynamic.ts
@@ -12,6 +12,7 @@ const applyTheme = ClientFunction(theme => {
 });
 var json = {
   showQuestionNumbers: "off",
+  width: "900px",
   questions: [
     {
       type: "paneldynamic",
diff --git a/visualRegressionTests/tests/defaultV2/question.ts b/visualRegressionTests/tests/defaultV2/question.ts
index a656f62a13..6f2ed3fa69 100644
--- a/visualRegressionTests/tests/defaultV2/question.ts
+++ b/visualRegressionTests/tests/defaultV2/question.ts
@@ -23,6 +23,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
+        width: "900px",
         questions: [
           {
             type: "text",
@@ -44,6 +45,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
+        width: "900px",
         questions: [
           {
             type: "text",
@@ -64,6 +66,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
+        width: "900px",
         questions: [
           {
             type: "text",
@@ -84,6 +87,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
+        width: "900px",
         questions: [
           {
             type: "text",
@@ -105,6 +109,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
+        width: "900px",
         questions: [
           {
             type: "text",
@@ -134,6 +139,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
+        width: "900px",
         questions: [
           {
             type: "text",
@@ -158,6 +164,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
+        width: "900px",
         showQuestionNumbers: "off",
         questions: [
           {
@@ -190,6 +197,7 @@ frameworks.forEach(framework => {
 
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
+        width: "900px",
         showQuestionNumbers: "off",
         questions: [
           {
diff --git a/visualRegressionTests/tests/defaultV2/rating.ts b/visualRegressionTests/tests/defaultV2/rating.ts
index 3f5e90b21b..f0547393f7 100644
--- a/visualRegressionTests/tests/defaultV2/rating.ts
+++ b/visualRegressionTests/tests/defaultV2/rating.ts
@@ -24,6 +24,7 @@ frameworks.forEach(framework => {
       const focusBody = ClientFunction(() => { document.body.focus(); });
       await initSurvey(framework, {
         showQuestionNumbers: "off",
+        width: "900px",
         questions: [
           {
             type: "rating",
@@ -57,6 +58,7 @@ frameworks.forEach(framework => {
       const focusBody = ClientFunction(() => { document.body.focus(); });
       await initSurvey(framework, {
         showQuestionNumbers: "off",
+        width: "900px",
         questions: [
           {
             type: "rating",
@@ -85,6 +87,7 @@ frameworks.forEach(framework => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
         showQuestionNumbers: "off",
+        width: "900px",
         questions: [
           {
             type: "rating",
@@ -110,6 +113,7 @@ frameworks.forEach(framework => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
         showQuestionNumbers: "off",
+        width: "900px",
         questions: [
           {
             type: "rating",
@@ -137,6 +141,7 @@ frameworks.forEach(framework => {
       await t.resizeWindow(1920, 1080);
       await initSurvey(framework, {
         showQuestionNumbers: "off",
+        width: "900px",
         questions: [
           {
             type: "rating",
@@ -246,6 +251,7 @@ frameworks.forEach(framework => {
       const focusBody = ClientFunction(() => { document.body.focus(); });
       await initSurvey(framework, {
         showQuestionNumbers: "off",
+        width: "900px",
         questions: [
           {
             type: "rating",
@@ -285,6 +291,7 @@ frameworks.forEach(framework => {
       const focusBody = ClientFunction(() => { document.body.focus(); });
       await initSurvey(framework, {
         showQuestionNumbers: "off",
+        width: "900px",
         questions: [
           {
             type: "rating",
@@ -318,6 +325,7 @@ frameworks.forEach(framework => {
 
       await initSurvey(framework, {
         showQuestionNumbers: "off",
+        width: "900px",
         questions: [
           {
             type: "rating",
@@ -346,6 +354,7 @@ frameworks.forEach(framework => {
       const focusBody = ClientFunction(() => { document.body.focus(); });
       await initSurvey(framework, {
         showQuestionNumbers: "off",
+        width: "900px",
         questions: [
           {
             type: "rating",
@@ -386,6 +395,7 @@ frameworks.forEach(framework => {
       const focusBody = ClientFunction(() => { document.body.focus(); });
       await initSurvey(framework, {
         showQuestionNumbers: "off",
+        width: "900px",
         questions: [
           {
             type: "rating",
@@ -425,6 +435,7 @@ frameworks.forEach(framework => {
       const focusBody = ClientFunction(() => { document.body.focus(); });
       await initSurvey(framework, {
         showQuestionNumbers: "off",
+        width: "900px",
         questions: [
           {
             type: "rating",
@@ -466,6 +477,7 @@ frameworks.forEach(framework => {
 
       await initSurvey(framework, {
         showQuestionNumbers: "off",
+        width: "900px",
         questions: [
           {
             type: "rating",
@@ -508,6 +520,7 @@ frameworks.forEach(framework => {
       const focusBody = ClientFunction(() => { document.body.focus(); });
       await initSurvey(framework, {
         showQuestionNumbers: "off",
+        width: "900px",
         questions: [
           {
             type: "rating",
@@ -538,6 +551,7 @@ frameworks.forEach(framework => {
       const focusBody = ClientFunction(() => { document.body.focus(); });
       await initSurvey(framework, {
         showQuestionNumbers: "off",
+        width: "900px",
         questions: [
           {
             type: "rating",