From 92ab5867ee677280e326b9af2af14decbc163cc8 Mon Sep 17 00:00:00 2001
From: sabrina-bongiovanni
 <116291154+sabrina-bongiovanni@users.noreply.github.com>
Date: Tue, 17 Sep 2024 12:13:59 +0200
Subject: [PATCH] fix: added max-width attribute to row to fit elements within
 page when zoomed in (#773)

---
 src/theme/ItaliaTheme/Blocks/_form.scss | 70 ++++++++++++++-----------
 1 file changed, 38 insertions(+), 32 deletions(-)

diff --git a/src/theme/ItaliaTheme/Blocks/_form.scss b/src/theme/ItaliaTheme/Blocks/_form.scss
index b0d405abd..b347483a9 100644
--- a/src/theme/ItaliaTheme/Blocks/_form.scss
+++ b/src/theme/ItaliaTheme/Blocks/_form.scss
@@ -1,45 +1,50 @@
 .public-ui {
   .block.form {
-    @media (max-width: #{map-get($grid-breakpoints, md)}) {
-      .form-group {
-        display: flex;
-        flex-direction: column;
-
-        label {
-          position: relative;
-          order: 1;
-          font-size: 0.777rem;
-          line-height: 1.375rem;
-          transform: none;
-          transform: none;
-          white-space: normal;
-
-          &.active {
+    .row {
+      max-width: 100%;
+
+      @media (max-width: #{map-get($grid-breakpoints, md)}) {
+        .form-group {
+          display: flex;
+          flex-direction: column;
+          max-width: 100%;
+
+          label {
+            position: relative;
+            order: 1;
             font-size: 0.777rem;
+            line-height: 1.375rem;
+            transform: none;
             transform: none;
+            white-space: normal;
+
+            &.active {
+              font-size: 0.777rem;
+              transform: none;
+            }
           }
-        }
 
-        input,
-        textarea,
-        .form-input-file {
-          order: 2;
-        }
+          input,
+          textarea,
+          .form-input-file {
+            order: 2;
+          }
 
-        input[type='date'] ~ label {
-          font-size: 0.777rem;
-          transform: none;
-        }
+          input[type='date'] ~ label {
+            font-size: 0.777rem;
+            transform: none;
+          }
 
-        small.form-text {
-          position: relative;
-          order: 3;
+          small.form-text {
+            position: relative;
+            order: 3;
+          }
         }
-      }
 
-      .form-input-file {
-        .dropzone-placeholder {
-          margin-top: 0;
+        .form-input-file {
+          .dropzone-placeholder {
+            margin-top: 0;
+          }
         }
       }
     }
@@ -65,6 +70,7 @@
   &,
   .volto-subblocks-wrapper,
   .form-field {
+    max-width: 100%;
     .single-block {
       .dragsubblock {
         top: 0.3rem;