Add configuration option for max carousel inner item width

src/main/webapp/app/view/CustomCarousel.js

@@ -108,6 +108,12 @@ Ext.define('ARSnova.view.CustomCarousel', {
 			screenWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width,
 			showNavigationElements = screenWidth >= 840 && innerItemCount > 0 && activeIndex !== -1;
 
+		if (showNavigationElements) {
+			this.addCls('setMaxCaruselWidth');
+		} else {
+			this.removeCls('setMaxCaruselWidth');
+		}
+
 		if (showNavigationElements && activeIndex !== 0) {
 			this.leftArrow.removeCls('hidden');
 		} else {

src/main/webapp/resources/sass/_theme.scss

@@ -207,7 +207,8 @@ $statistics-incorrect-color: $brand-danger;
 $statistics-abstention-color: $default-grey-color;
 
 
-/** carousel indicator and navigation color configuration **/
+/** carousel width, indicator and navigation configuration **/
+$carousel-inner-max-width: 85%;
 $carousel-indicator-color: $brand-primary;
 $carousel-indicator-active-color: $brand-secondary;
 $carousel-indicator-unanswered-question-color: $brand-warning;

src/main/webapp/resources/sass/app/_general.scss

@@ -726,3 +726,9 @@ code {
 		margin: 8px;
 	}
 }
+
+.setMaxCaruselWidth {
+	.x-container.x-form {
+		max-width: $carousel-inner-max-width;
+	}
+}