fix: overflowing help text in Numbers block sidebar (#367)

Co-authored-by: Piero Nicolli <[email protected]>
RedTurtle · Oct 13, 2023 · ab68178 · ab68178
1 parent e584f63
commit ab68178
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 52 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -41,7 +41,6 @@
 - ...
 -->
 
-
 ## Versione X.X.X (dd/mm/yyyy)
 
 ### Migliorie
@@ -56,6 +55,7 @@
 - Risolto un bug nel componente Object Browser che permetteva di selezionare più elementi di quelli consentiti
 - Alcune icone mancanti nel widget icone fontawesome sono state rese nuovamente visibili
 - Sistemate inconsistenze nella visualizzazione di alcuni tipi di elementi della lista degli allegati in Cartella Modulistica
+- Visualizzazione sidebar in edit del blocco Numeri: sistemato overflowing del testo di aiuto
 
 ## Versione 8.7.8 (12/10/2023)
 

diff --git a/src/components/ItaliaTheme/Blocks/NumbersBlock/Sidebar.jsx b/src/components/ItaliaTheme/Blocks/NumbersBlock/Sidebar.jsx
@@ -35,58 +35,63 @@ const Sidebar = ({
   const intl = useIntl();
 
   return (
-    <Segment.Group raised>
-      <header className="header pulled">
-        <h2>
-          <FormattedMessage id="numbers_block" defaultMessage="Blocco numeri" />
-        </h2>
-      </header>
-      <Accordion className="form">
-        <Accordion.Content active={true}>
-          <ObjectBrowserWidget
-            id="background"
-            title={intl.formatMessage(messages.backgroundImage)}
-            description=""
-            required={false}
-            widgetOptions={{
-              pattern_options: {
-                selectableTypes: ['Image'],
-                maximumSelectionSize: 1,
-              },
-            }}
-            value={data.background ?? []}
-            onChange={(id, value) =>
-              onChangeBlock(block, { ...data, [id]: value })
-            }
-          />
+    <div className="numbers-block-sidebar-form-container">
+      <Segment.Group raised>
+        <header className="header pulled">
+          <h2>
+            <FormattedMessage
+              id="numbers_block"
+              defaultMessage="Blocco numeri"
+            />
+          </h2>
+        </header>
+        <Accordion className="form">
+          <Accordion.Content active={true}>
+            <ObjectBrowserWidget
+              id="background"
+              title={intl.formatMessage(messages.backgroundImage)}
+              description=""
+              required={false}
+              widgetOptions={{
+                pattern_options: {
+                  selectableTypes: ['Image'],
+                  maximumSelectionSize: 1,
+                },
+              }}
+              value={data.background ?? []}
+              onChange={(id, value) =>
+                onChangeBlock(block, { ...data, [id]: value })
+              }
+            />
 
-          <IconWidget
-            id="icon1"
-            value={data.icon1 ?? ''}
-            defaultOptions={defaultIconWidgetOptions}
-            onChange={(name, value) => {
-              onChangeBlock(block, { ...data, [name]: value });
-            }}
-          />
-          <IconWidget
-            id="icon2"
-            value={data.icon2 ?? ''}
-            defaultOptions={defaultIconWidgetOptions}
-            onChange={(name, value) => {
-              onChangeBlock(block, { ...data, [name]: value });
-            }}
-          />
-          <IconWidget
-            id="icon3"
-            value={data.icon3 ?? ''}
-            defaultOptions={defaultIconWidgetOptions}
-            onChange={(name, value) => {
-              onChangeBlock(block, { ...data, [name]: value });
-            }}
-          />
-        </Accordion.Content>
-      </Accordion>
-    </Segment.Group>
+            <IconWidget
+              id="icon1"
+              value={data.icon1 ?? ''}
+              defaultOptions={defaultIconWidgetOptions}
+              onChange={(name, value) => {
+                onChangeBlock(block, { ...data, [name]: value });
+              }}
+            />
+            <IconWidget
+              id="icon2"
+              value={data.icon2 ?? ''}
+              defaultOptions={defaultIconWidgetOptions}
+              onChange={(name, value) => {
+                onChangeBlock(block, { ...data, [name]: value });
+              }}
+            />
+            <IconWidget
+              id="icon3"
+              value={data.icon3 ?? ''}
+              defaultOptions={defaultIconWidgetOptions}
+              onChange={(name, value) => {
+                onChangeBlock(block, { ...data, [name]: value });
+              }}
+            />
+          </Accordion.Content>
+        </Accordion>
+      </Segment.Group>
+    </div>
   );
 };
 

diff --git a/src/theme/_cms-ui.scss b/src/theme/_cms-ui.scss
@@ -268,6 +268,9 @@ body.cms-ui {
     }
   }
   .sidebar-container {
+    .numbers-block-sidebar-form-container {
+      padding-bottom: 1rem;
+    }
     .breadcrumbs {
       .breadcrumb {
         flex-wrap: wrap;