Fix slider width overflow & mobile viewport

frontend/packages/volto-light-theme/news/+fixsimpleSlider.bugfix

@@ -0,0 +1 @@
+Fix the changing width layout induced by simple slider variant @Tishasoumya-02

frontend/packages/volto-light-theme/src/theme/blocks/_slider.scss

@@ -129,38 +129,62 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
   &.simple {
     .slider-viewport {
       margin-bottom: 0;
-      @media only screen and (max-width: $computer-width) {
-        margin-bottom: $spacing-medium;
-      }
+      container-name: slider;
+      container-type: inline-size;
     }
     .teaser-item {
       display: grid;
+      min-width: 0;
       align-items: center;
       padding: 0 130px;
       aspect-ratio: 2/1;
       background-color: var(--theme-color);
-      gap: clamp(30px, 4vw, 60px);
+      gap: clamp(30px, 4vw, 57px);
       grid-template-areas: 'images content';
       grid-template-rows: auto;
+
+      @media only screen and (min-width: $large-monitor-width) {
+        align-content: center;
+      }
+
       @media only screen and (max-width: $computer-width) {
-        display: flex;
+        display: inline-block;
         padding: 0 0;
         aspect-ratio: auto;
-        gap: 0;
       }
 
       &.has--slider--flagAlign--right {
         grid-template-areas: 'content images';
-        grid-template-columns: clamp(300px, 40vw, 600px) auto;
+        grid-template-columns: minmax(0, clamp(300px, 40vw, 600px)) minmax(
+            0,
+            1fr
+          );
       }
       &.has--slider--flagAlign--left {
         grid-template-areas: 'images content';
-        grid-template-columns: auto clamp(300px, 40vw, 600px);
+        grid-template-columns: minmax(0, 1fr) minmax(
+            0,
+            clamp(300px, 40vw, 600px)
+          );
+      }
+
+      @container slider (max-width: #{$layout-container-width}) {
+        #page-edit &,
+        #page-add & {
+          &.has--slider--flagAlign--right {
+            grid-template-columns: minmax(0, 60%) minmax(0, 40%);
+          }
+          &.has--slider--flagAlign--left {
+            grid-template-columns: minmax(0, 40%) minmax(0, 60%);
+          }
+        }
       }
 
       .highlight-image-wrapper {
         grid-area: images;
-
+        @media only screen and (min-width: $large-monitor-width) {
+          align-self: start;
+        }
         img {
           aspect-ratio: var(
             --image-aspect-ratio,
@@ -183,6 +207,13 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
         grid-area: content;
         transform: none;
 
+        @media only screen and (min-width: $large-monitor-width) {
+          align-content: start;
+          .supertitle {
+            margin-top: 0;
+          }
+        }
+
         @media only screen and (max-width: $computer-width) {
           height: 100%;
           align-content: start;
@@ -207,8 +238,8 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
         }
         p {
           color: var(--theme-foreground-color);
-          -webkit-line-clamp: 10;
-          line-clamp: 10;
+          -webkit-line-clamp: 3;
+          line-clamp: 3;
         }
       }
       .slider-description {