fix

Author: lucasgoral

src/components/ComponentsSelection/ComponentsSelection.tsx

@@ -101,7 +101,7 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
       />
 
       <Grid>
-        <div data-layout-span="XL8 L8 M8 S8">
+        <div data-layout-span="XL7 L7 M7 S7">
           {searchResults.length > 0 ? (
             searchResults.map((component) => {
               const providerDisabled = isProviderDisabled(component);
@@ -173,7 +173,7 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
           )}
         </div>
 
-        <div data-layout-span="XL4 L4 M4 S4">
+        <div data-layout-span="XL5 L5 M5 S5">
           {templateDefaultsError ? (
             <div style={{ marginBottom: 8 }}>
               <IllustratedError title={templateDefaultsError} compact />
@@ -191,7 +191,7 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
               ))}
             </List>
           ) : (
-            <Infobox fullWidth variant="success" icon="add">
+            <Infobox variant="success" icon="add">
               <Text>{t('componentsSelection.pleaseSelectComponents')}</Text>
             </Infobox>
           )}

src/components/Ui/Infobox/Infobox.module.css

@@ -5,21 +5,22 @@
   padding: 1rem;
   margin: 1rem 0;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
 }
 
 .icon {
   font-size: 4.5rem;
   flex-shrink: 0;
-  width: 2rem;
-  height: 2rem;
+  width: 1.5rem;
+  height: 1.5rem;
   color: #fff;
-  margin: 0 1rem;
-  margin-right: 2rem;
+
+  margin-right: 1rem;
 }
 
 .content {
   flex-grow: 1;
-  padding-right: 3rem;
+  padding-right: 0.5rem;
 }
 
 .full-width {