fix: added max-width attribute to row to fit elements within page whe…

…n zoomed in (#773)
RedTurtle · Sep 17, 2024 · c94001f · c94001f
1 parent 7915b92
commit c94001f
Showing 1 changed file with 38 additions and 32 deletions.
diff --git 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;