fix: banner sizing on workspace (#267)

Author: Lasserich

src/components/ComponentsSelection/ComponentsSelectionContainer.tsx

@@ -69,12 +69,12 @@ export const ComponentsSelectionContainer: React.FC<ComponentsSelectionProps> =
   }
 
   if (error) {
-    return <IllustratedError />;
+    return <IllustratedError compact={true} />;
   }
 
   // Defensive: If the API returned no items, show error
   if (!componentsList || componentsList.length === 0) {
-    return <IllustratedError title={t('componentsSelection.cannotLoad')} />;
+    return <IllustratedError title={t('componentsSelection.cannotLoad')} compact={true} />;
   }
 
   return <ComponentsSelection componentsList={componentsList} setComponentsList={setComponentsList} />;

src/components/ControlPlane/FluxList.tsx

@@ -136,6 +136,7 @@ export default function FluxList() {
       <IllustratedError
         details={repoErr?.message || kustomizationErr?.message || t('FluxList.undefinedError')}
         title={t('FluxList.noFluxError')}
+        compact={true}
       />
     );
   }

src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx

@@ -58,6 +58,7 @@ export function ControlPlaneListWorkspaceGridTile({ projectName, workspace }: Pr
           <IllustratedError
             title={t('ControlPlaneListWorkspaceGridTile.permissionErrorMessage')}
             details={t('ControlPlaneListWorkspaceGridTile.permissionErrorMessageSubtitle')}
+            compact={true}
           />
         );
       } else {

src/components/Shared/IllustratedError.tsx

@@ -6,16 +6,18 @@ import IllustrationMessageType from '@ui5/webcomponents-fiori/dist/types/Illustr
 interface Props {
   title?: string;
   details?: string;
+  compact?: boolean;
 }
 
-export default function IllustratedError({ title, details }: Props) {
+export default function IllustratedError({ title, details, compact }: Props) {
   const { t } = useTranslation();
 
   return (
     <IllustratedBanner
       illustrationName={IllustrationMessageType.SimpleError}
       title={title ?? t('IllustratedError.titleText')}
       subtitle={details ?? t('IllustratedError.subtitleText')}
+      compact={compact}
     />
   );
 }

src/components/Ui/IllustratedBanner/IllustratedBanner.tsx

@@ -36,7 +36,7 @@ export const IllustratedBanner = ({
   return (
     <FlexBox direction="Column" alignItems="Center">
       <IllustratedMessage
-        design={compact ? IllustrationMessageDesign.ExtraSmall : IllustrationMessageDesign.Large}
+        design={compact ? IllustrationMessageDesign.Small : IllustrationMessageDesign.Large}
         name={illustrationName}
         titleText={title}
         subtitleText={subtitleText}