Refactor: limit description length to 120 chars and re-style them (#7377

)
impress-org · Apr 29, 2024 · 27cd65b · 27cd65b
1 parent 3a5fc46
commit 27cd65b
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/src/DonationForms/resources/styles/components/_amount.scss b/src/DonationForms/resources/styles/components/_amount.scss
@@ -130,7 +130,7 @@ $borderColor: #9A9A9A;
 
         .givewp-fields-amount__level-container {
             display: flex;
-            align-items: center;
+            align-items: start;
             flex: 1;
             gap: var(--givewp-spacing-4);
             min-width: calc((100% - var(--givewp-spacing-2)) / 2);
@@ -145,17 +145,16 @@ $borderColor: #9A9A9A;
         ;
 
             .givewp-fields-amount__level {
-                height: 100%;
-
                 &--description {
                     max-width: 144px;
                 }
             }
 
-            .givewp-fields-amount__description {
-                margin-bottom: 0;
+            .givewp-fields-amount__level__description {
+                align-items: center;
                 color: var(--givewp-grey-700);
-                font-size: 1rem;
+                display: flex;
+                min-height: 100%;
             }
         }
     }

diff --git a/src/FormBuilder/resources/js/form-builder/src/blocks/fields/amount/inspector/index.tsx b/src/FormBuilder/resources/js/form-builder/src/blocks/fields/amount/inspector/index.tsx
@@ -226,6 +226,7 @@ const Inspector = ({attributes, setAttributes}) => {
                         toggleLabel={__('Enable amount description', 'give')}
                         toggleEnabled={descriptionsEnabled}
                         onHandleToggle={(value) => setAttributes({descriptionsEnabled: value})}
+                        maxLabelLength={120}
                     />
                 )}
             </PanelBody>