From 46aa6c72b4cfb6171acf1c0ddf876b3df2f17179 Mon Sep 17 00:00:00 2001
From: rohitratannagar <rohitratannagar2003@gmail.com>
Date: Tue, 10 Feb 2026 15:26:47 +0530
Subject: [PATCH 1/8] fix(homepage): fixing homepage layout when quickstart is
 visible

Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>
---
 .../EntitySection/EntitySection.tsx           | 29 ++++++++-----
 .../OnboardingSection/OnboardingCard.tsx      |  2 +-
 .../OnboardingSection/OnboardingSection.tsx   | 43 ++++++++++++-------
 .../src/components/ReadOnlyGrid.tsx           |  9 ++++
 4 files changed, 55 insertions(+), 28 deletions(-)

diff --git a/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.tsx b/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.tsx
index 68ca394e90..121b3b6c73 100644
--- a/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.tsx
+++ b/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.tsx
@@ -258,6 +258,10 @@ export const EntitySection = () => {
         padding: '24px',
         border: muitheme => `1px solid ${muitheme.palette.grey[300]}`,
         overflow: 'auto',
+        flex: 1,
+        minHeight: 0,
+        display: 'flex',
+        flexDirection: 'column',
       }}
     >
       <Typography
@@ -267,21 +271,24 @@ export const EntitySection = () => {
           alignItems: 'center',
           fontWeight: '500',
           fontSize: '1.5rem',
+          flexShrink: 0,
         }}
       >
         {t('entities.title')}
       </Typography>
-      {content}
-      {entities?.length > 0 && (
-        <Box sx={{ pt: 2 }}>
-          <ViewMoreLink to="/catalog">
-            <Trans
-              message="entities.viewAll"
-              params={{ count: data?.totalItems?.toString() || '' }}
-            />
-          </ViewMoreLink>
-        </Box>
-      )}
+      <Box sx={{ flex: 1, minHeight: 0, overflow: 'auto' }}>
+        {content}
+        {entities?.length > 0 && (
+          <Box sx={{ pt: 2 }}>
+            <ViewMoreLink to="/catalog">
+              <Trans
+                message="entities.viewAll"
+                params={{ count: data?.totalItems?.toString() || '' }}
+              />
+            </ViewMoreLink>
+          </Box>
+        )}
+      </Box>
     </Card>
   );
 };
diff --git a/workspaces/homepage/plugins/dynamic-home-page/src/components/OnboardingSection/OnboardingCard.tsx b/workspaces/homepage/plugins/dynamic-home-page/src/components/OnboardingSection/OnboardingCard.tsx
index 57c3b7a4d4..0c065c9730 100644
--- a/workspaces/homepage/plugins/dynamic-home-page/src/components/OnboardingSection/OnboardingCard.tsx
+++ b/workspaces/homepage/plugins/dynamic-home-page/src/components/OnboardingSection/OnboardingCard.tsx
@@ -44,8 +44,8 @@ const OnboardingCard: FC<OnboardingCardProps> = ({
     <Box>
       <CardContent sx={{ backgroundColor: 'transparent' }}>
         <Typography
+          variant="h3"
           sx={{
-            fontSize: '1.75rem',
             fontWeight: 500,
             m: 0,
           }}
diff --git a/workspaces/homepage/plugins/dynamic-home-page/src/components/OnboardingSection/OnboardingSection.tsx b/workspaces/homepage/plugins/dynamic-home-page/src/components/OnboardingSection/OnboardingSection.tsx
index 9a5c264e80..755fca2396 100644
--- a/workspaces/homepage/plugins/dynamic-home-page/src/components/OnboardingSection/OnboardingSection.tsx
+++ b/workspaces/homepage/plugins/dynamic-home-page/src/components/OnboardingSection/OnboardingSection.tsx
@@ -81,15 +81,24 @@ export const OnboardingSection = () => {
 
   const content = (
     <Box>
-      <Grid container margin="auto">
+      <Grid
+        container
+        margin="auto"
+        sx={{
+          display: 'flex',
+          justifyContent: 'left',
+          alignItems: 'center',
+          overflow: 'auto',
+        }}
+        spacing={1}
+      >
         <Grid
-          item
-          xs={12}
-          md={6}
-          lg={3}
-          display="flex"
-          justifyContent="left"
-          alignItems="center"
+          size={{ xs: 12, md: 6, lg: 3 }}
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
         >
           <Box
             component="img"
@@ -104,14 +113,13 @@ export const OnboardingSection = () => {
         </Grid>
         {getLearningItems(t).map((item: LearningSectionItem) => (
           <Grid
-            item
-            xs={12}
-            md={6}
-            lg={3}
+            size={{ xs: 12, md: 6, lg: 3 }}
+            sx={{
+              display: 'flex',
+              justifyContent: 'left',
+              alignItems: 'center',
+            }}
             key={item.title}
-            display="flex"
-            justifyContent="left"
-            alignItems="center"
           >
             <OnboardingCard
               title={item.title}
@@ -135,6 +143,8 @@ export const OnboardingSection = () => {
         padding: '24px',
         border: muiTheme => `1px solid ${muiTheme.palette.grey[300]}`,
         overflow: 'auto',
+        flex: 1,
+        minHeight: 0,
       }}
     >
       {!profileLoading && (
@@ -145,12 +155,13 @@ export const OnboardingSection = () => {
             alignItems: 'center',
             fontWeight: '500',
             fontSize: '1.5rem',
+            flexShrink: 0,
           }}
         >
           {`${greeting}, ${profileDisplayName() || t('onboarding.guest')}!`}
         </Typography>
       )}
-      {content}
+      <Box sx={{ flex: 1, minHeight: 0, overflow: 'auto' }}>{content}</Box>
     </Card>
   );
 };
diff --git a/workspaces/homepage/plugins/dynamic-home-page/src/components/ReadOnlyGrid.tsx b/workspaces/homepage/plugins/dynamic-home-page/src/components/ReadOnlyGrid.tsx
index af30714e9c..ca4793ce76 100644
--- a/workspaces/homepage/plugins/dynamic-home-page/src/components/ReadOnlyGrid.tsx
+++ b/workspaces/homepage/plugins/dynamic-home-page/src/components/ReadOnlyGrid.tsx
@@ -84,9 +84,18 @@ const defaultProps: ResponsiveProps = {
 const useStyles = makeStyles()({
   // Make card content scrollable (so that cards don't overlap)
   cardWrapper: {
+    height: '100%',
+    minHeight: 0,
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
     '& > div[class*="MuiCard-root"]': {
       width: '100%',
       height: '100%',
+      minHeight: 0,
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden',
     },
     '& div[class*="MuiCardContent-root"]': {
       overflow: 'auto',

From e297bef6ff225a671413277b0365fefef81ad6af Mon Sep 17 00:00:00 2001
From: rohitratannagar <rohitratannagar2003@gmail.com>
Date: Tue, 10 Feb 2026 15:35:29 +0530
Subject: [PATCH 2/8] added changeset

Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>
---
 workspaces/homepage/.changeset/brave-rocks-wave.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 workspaces/homepage/.changeset/brave-rocks-wave.md

diff --git a/workspaces/homepage/.changeset/brave-rocks-wave.md b/workspaces/homepage/.changeset/brave-rocks-wave.md
new file mode 100644
index 0000000000..990412c2eb
--- /dev/null
+++ b/workspaces/homepage/.changeset/brave-rocks-wave.md
@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-dynamic-home-page': patch
+---
+
+Fixed Homepage Layout when quickstart is visible

From 272e41a22a70e918b30c9051361b8d916ca43e3b Mon Sep 17 00:00:00 2001
From: rohitratannagar <rohitratannagar2003@gmail.com>
Date: Tue, 10 Feb 2026 17:13:04 +0530
Subject: [PATCH 3/8] fixed according to yarn tsc

Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>
---
 .../components/OnboardingSection/OnboardingSection.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/workspaces/homepage/plugins/dynamic-home-page/src/components/OnboardingSection/OnboardingSection.tsx b/workspaces/homepage/plugins/dynamic-home-page/src/components/OnboardingSection/OnboardingSection.tsx
index 755fca2396..0d9358a4b9 100644
--- a/workspaces/homepage/plugins/dynamic-home-page/src/components/OnboardingSection/OnboardingSection.tsx
+++ b/workspaces/homepage/plugins/dynamic-home-page/src/components/OnboardingSection/OnboardingSection.tsx
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useState, useEffect } from 'react';
+import { useState, useEffect, type ComponentProps } from 'react';
 
 import { useUserProfile } from '@backstage/plugin-user-settings';
 import { useApi } from '@backstage/core-plugin-api';
@@ -93,7 +93,9 @@ export const OnboardingSection = () => {
         spacing={1}
       >
         <Grid
-          size={{ xs: 12, md: 6, lg: 3 }}
+          {...({
+            size: { xs: 12, md: 6, lg: 3 },
+          } as ComponentProps<typeof Grid>)}
           sx={{
             display: 'flex',
             justifyContent: 'center',
@@ -113,7 +115,9 @@ export const OnboardingSection = () => {
         </Grid>
         {getLearningItems(t).map((item: LearningSectionItem) => (
           <Grid
-            size={{ xs: 12, md: 6, lg: 3 }}
+            {...({
+              size: { xs: 12, md: 6, lg: 3 },
+            } as ComponentProps<typeof Grid>)}
             sx={{
               display: 'flex',
               justifyContent: 'left',

From 2d14fbfb491ae6e0cca28a100e709c431222bafa Mon Sep 17 00:00:00 2001
From: rohitratannagar <rohitratannagar2003@gmail.com>
Date: Tue, 10 Feb 2026 18:18:16 +0530
Subject: [PATCH 4/8] fixed the height of first card in software catalog
 section

Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>
---
 .../src/components/EntitySection/EntitySection.tsx              | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.tsx b/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.tsx
index 121b3b6c73..97e7dc6bc6 100644
--- a/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.tsx
+++ b/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.tsx
@@ -136,6 +136,7 @@ export const EntitySection = () => {
                     display: 'flex',
                     flexDirection: 'row',
                     alignItems: 'center',
+                    height: '100%',
                     position: 'relative',
                     transition:
                       'opacity 0.5s ease-out, transform 0.5s ease-in-out',
@@ -197,6 +198,7 @@ export const EntitySection = () => {
                   md={6}
                   lg={isRemoveFirstCard ? 3 : 3.5}
                   key={item.metadata.name}
+                  display="flex"
                 >
                   <EntityCard
                     entity={item}

From 8fd57f6a1b98fd320aef275266d98a882e753cc9 Mon Sep 17 00:00:00 2001
From: rohitratannagar <rohitratannagar2003@gmail.com>
Date: Tue, 10 Feb 2026 23:28:24 +0530
Subject: [PATCH 5/8] fixed the ui of software-catalog cards

Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>
---
 .../src/components/EntitySection/EntityCard.tsx     |  3 +++
 .../src/components/EntitySection/EntitySection.tsx  | 13 ++++++-------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntityCard.tsx b/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntityCard.tsx
index 4c5d045b1e..00173c0339 100644
--- a/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntityCard.tsx
+++ b/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntityCard.tsx
@@ -58,6 +58,9 @@ const EntityCard: FC<EntityCardProps> = ({
             pb: 2,
           },
           backgroundColor: 'transparent',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
         }}
       >
         <Box sx={{ overflow: 'hidden' }}>
diff --git a/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.tsx b/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.tsx
index 97e7dc6bc6..e36e5c74e3 100644
--- a/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.tsx
+++ b/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.tsx
@@ -128,13 +128,12 @@ export const EntitySection = () => {
         <Fragment>
           <Grid container spacing={1} alignItems="stretch">
             {!isRemoveFirstCard && !profileLoading && (
-              <Grid item xs={12} md={6} lg={5} key="entities illustration">
+              <Grid item xs={12} md={6} lg={4} key="entities illustration">
                 <Card
                   elevation={0}
                   sx={{
                     border: `1px solid ${theme.palette.grey[400]}`,
                     display: 'flex',
-                    flexDirection: 'row',
                     alignItems: 'center',
                     height: '100%',
                     position: 'relative',
@@ -149,10 +148,10 @@ export const EntitySection = () => {
                   {!imgLoaded && (
                     <Skeleton
                       variant="rectangular"
-                      height={300}
+                      height={231}
                       sx={{
                         borderRadius: 3,
-                        width: 'clamp(140px, 14vw, 266px)',
+                        width: 'clamp(126px, 12.6vw, 210px)',
                       }}
                     />
                   )}
@@ -161,9 +160,9 @@ export const EntitySection = () => {
                     src={HomePageEntityIllustration}
                     onLoad={() => setImgLoaded(true)}
                     alt=""
-                    height={300}
+                    height={231}
                     sx={{
-                      width: 'clamp(140px, 14vw, 266px)',
+                      width: 'clamp(126px, 12.6vw, 210px)',
                     }}
                   />
                   <Box sx={{ p: 2 }}>
@@ -196,7 +195,7 @@ export const EntitySection = () => {
                   item
                   xs={12}
                   md={6}
-                  lg={isRemoveFirstCard ? 3 : 3.5}
+                  lg={isRemoveFirstCard ? 3 : 4}
                   key={item.metadata.name}
                   display="flex"
                 >

From 792b272fc0d1573217d63ff47e2ba7973c87f836 Mon Sep 17 00:00:00 2001
From: rohitratannagar <rohitratannagar2003@gmail.com>
Date: Thu, 12 Feb 2026 17:14:27 +0530
Subject: [PATCH 6/8] fixed the ui of software-catalog cards

Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>
---
 .../components/EntitySection/EntityCard.tsx   |   3 +-
 .../EntitySection/EntitySection.tsx           | 145 ++++++++++++------
 .../TemplateSection/TemplateSection.tsx       |   1 +
 3 files changed, 103 insertions(+), 46 deletions(-)

diff --git a/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntityCard.tsx b/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntityCard.tsx
index 00173c0339..249da2e081 100644
--- a/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntityCard.tsx
+++ b/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntityCard.tsx
@@ -48,7 +48,8 @@ const EntityCard: FC<EntityCardProps> = ({
       sx={{
         border: theme => `1px solid ${theme.palette.grey[400]}`,
         overflow: 'auto',
-        maxHeight: '100%',
+        height: '100%',
+        width: '100%',
       }}
     >
       <CardContent
diff --git a/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.tsx b/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.tsx
index e36e5c74e3..bdf9941b11 100644
--- a/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.tsx
+++ b/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.tsx
@@ -15,7 +15,7 @@
  */
 import type { ReactNode } from 'react';
 
-import { useState, useEffect, Fragment } from 'react';
+import { useState, useEffect, Fragment, useRef } from 'react';
 
 import {
   CodeSnippet,
@@ -67,6 +67,22 @@ export const EntitySection = () => {
 
   const isMd = useMediaQuery(theme.breakpoints.only('md'));
 
+  const [contentWidth, setContentWidth] = useState(0);
+  const resizeObserverRef = useRef<ResizeObserver | null>(null);
+
+  const setContentNode = (node: HTMLDivElement | null) => {
+    if (!node) return;
+
+    resizeObserverRef.current?.disconnect();
+
+    resizeObserverRef.current = new ResizeObserver(entries => {
+      const width = entries[0].contentRect.width;
+      setContentWidth(width);
+    });
+
+    resizeObserverRef.current.observe(node);
+  };
+
   useEffect(() => {
     if (isMd) {
       setIsMediumBreakpoint(true);
@@ -126,7 +142,14 @@ export const EntitySection = () => {
     content = (
       <Box sx={{ padding: '8px 8px 8px 0' }}>
         <Fragment>
-          <Grid container spacing={1} alignItems="stretch">
+          <Grid
+            container
+            sx={{
+              display: 'flex',
+            }}
+            spacing={1}
+            alignItems="stretch"
+          >
             {!isRemoveFirstCard && !profileLoading && (
               <Grid item xs={12} md={6} lg={4} key="entities illustration">
                 <Card
@@ -134,9 +157,9 @@ export const EntitySection = () => {
                   sx={{
                     border: `1px solid ${theme.palette.grey[400]}`,
                     display: 'flex',
-                    alignItems: 'center',
-                    height: '100%',
                     position: 'relative',
+                    width: '100%',
+                    height: '100%',
                     transition:
                       'opacity 0.5s ease-out, transform 0.5s ease-in-out',
                     opacity: showDiscoveryCard ? 1 : 0,
@@ -145,45 +168,62 @@ export const EntitySection = () => {
                       : 'translateX(-50px)',
                   }}
                 >
-                  {!imgLoaded && (
-                    <Skeleton
-                      variant="rectangular"
-                      height={231}
-                      sx={{
-                        borderRadius: 3,
-                        width: 'clamp(126px, 12.6vw, 210px)',
-                      }}
-                    />
-                  )}
                   <Box
-                    component="img"
-                    src={HomePageEntityIllustration}
-                    onLoad={() => setImgLoaded(true)}
-                    alt=""
-                    height={231}
+                    ref={setContentNode}
                     sx={{
-                      width: 'clamp(126px, 12.6vw, 210px)',
+                      display: 'flex',
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                      flexDirection: contentWidth > 350 ? 'row' : 'column',
+                      minWidth: contentWidth > 350 ? '300px' : 0,
+                      // width: contentWidth > 350 ? 'auto' : '100%',
+                      width: '100%',
+                      maxWidth: '550px',
+                      minHeight: '100%',
                     }}
-                  />
-                  <Box sx={{ p: 2 }}>
-                    <Box>
-                      <Typography variant="body2" paragraph>
-                        {t('entities.description')}
-                      </Typography>
-                    </Box>
-                    {entities?.length > 0 && (
-                      <IconButton
-                        onClick={handleClose}
-                        aria-label={t('entities.close')}
-                        style={{
-                          position: 'absolute',
-                          top: '8px',
-                          right: '8px',
+                  >
+                    {!imgLoaded && (
+                      <Skeleton
+                        variant="rectangular"
+                        height={300}
+                        sx={{
+                          borderRadius: 3,
+                          width: 'clamp(140px, 14vw, 266px)',
                         }}
-                      >
-                        <CloseIcon style={{ width: '16px', height: '16px' }} />
-                      </IconButton>
+                      />
                     )}
+                    <Box
+                      component="img"
+                      src={HomePageEntityIllustration}
+                      onLoad={() => setImgLoaded(true)}
+                      alt=""
+                      height={300}
+                      sx={{
+                        width: 'clamp(140px, 14vw, 266px)',
+                      }}
+                    />
+                    <Box sx={{ p: 2, display: 'flex' }}>
+                      <Box sx={{ display: 'flex', minWidth: 0 }}>
+                        <Typography variant="body2" paragraph>
+                          {t('entities.description')}
+                        </Typography>
+                      </Box>
+                      {entities?.length > 0 && (
+                        <IconButton
+                          onClick={handleClose}
+                          aria-label={t('entities.close')}
+                          style={{
+                            position: 'absolute',
+                            top: '8px',
+                            right: '8px',
+                          }}
+                        >
+                          <CloseIcon
+                            style={{ width: '16px', height: '16px' }}
+                          />
+                        </IconButton>
+                      )}
+                    </Box>
                   </Box>
                 </Card>
               </Grid>
@@ -212,20 +252,33 @@ export const EntitySection = () => {
                 </Grid>
               ))}
             {entities?.length === 0 && (
-              <Grid item md={isRemoveFirstCard ? 12 : 7}>
+              <Grid
+                item
+                xs={12}
+                md={6}
+                lg={isRemoveFirstCard ? 3 : 4}
+                display="flex"
+              >
                 <Box
                   sx={{
                     display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
+                    flexDirection: 'column',
                     minHeight: 300,
+                    height: '100%',
+                    width: '100%',
                     border: muiTheme =>
                       `1px solid ${muiTheme.palette.grey[400]}`,
                     borderRadius: 3,
                     overflow: 'hidden',
                   }}
                 >
-                  <CardContent>
+                  <CardContent
+                    sx={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      flex: 1,
+                    }}
+                  >
                     <Typography sx={{ fontSize: '1.125rem', fontWeight: 500 }}>
                       {t('entities.empty')}
                     </Typography>
@@ -239,9 +292,11 @@ export const EntitySection = () => {
                     >
                       {t('entities.emptyDescription')}
                     </Typography>
-                    <StyledLink to="/catalog-import" underline="none">
-                      {t('entities.register')}
-                    </StyledLink>
+                    <Box sx={{ mt: 'auto', pt: 2 }}>
+                      <StyledLink to="/catalog-import" underline="none">
+                        {t('entities.register')}
+                      </StyledLink>
+                    </Box>
                   </CardContent>
                 </Box>
               </Grid>
diff --git a/workspaces/homepage/plugins/dynamic-home-page/src/components/TemplateSection/TemplateSection.tsx b/workspaces/homepage/plugins/dynamic-home-page/src/components/TemplateSection/TemplateSection.tsx
index 23ddfc0b1d..742dbea932 100644
--- a/workspaces/homepage/plugins/dynamic-home-page/src/components/TemplateSection/TemplateSection.tsx
+++ b/workspaces/homepage/plugins/dynamic-home-page/src/components/TemplateSection/TemplateSection.tsx
@@ -107,6 +107,7 @@ export const TemplateSection = () => {
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
+                    maxWidth: 550,
                     border: muiTheme =>
                       `1px solid ${muiTheme.palette.grey[400]}`,
                     borderRadius: 3,

From 1b67847792cda011a616060b62e5f7e98d75db10 Mon Sep 17 00:00:00 2001
From: rohitratannagar <rohitratannagar2003@gmail.com>
Date: Thu, 12 Feb 2026 17:37:22 +0530
Subject: [PATCH 7/8] fixed for some testcases

Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>
---
 .../src/components/EntitySection/EntitySection.tsx     | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.tsx b/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.tsx
index 0b9d34137e..ad13bb392f 100644
--- a/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.tsx
+++ b/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.tsx
@@ -175,8 +175,6 @@ export const EntitySection = () => {
                       justifyContent: 'center',
                       alignItems: 'center',
                       flexDirection: contentWidth > 350 ? 'row' : 'column',
-                      minWidth: contentWidth > 350 ? '300px' : 0,
-                      // width: contentWidth > 350 ? 'auto' : '100%',
                       width: '100%',
                       maxWidth: '550px',
                       minHeight: '100%',
@@ -204,7 +202,7 @@ export const EntitySection = () => {
                     />
                     <Box sx={{ p: 2, display: 'flex' }}>
                       <Box sx={{ display: 'flex', minWidth: 0 }}>
-                        <Typography variant="body2" paragraph>
+                        <Typography variant="body2" component="div">
                           {t('entities.description')}
                         </Typography>
                       </Box>
@@ -212,15 +210,13 @@ export const EntitySection = () => {
                         <IconButton
                           onClick={handleClose}
                           aria-label={t('entities.close')}
-                          style={{
+                          sx={{
                             position: 'absolute',
                             top: '8px',
                             right: '8px',
                           }}
                         >
-                          <CloseIcon
-                            style={{ width: '16px', height: '16px' }}
-                          />
+                          <CloseIcon sx={{ width: '16px', height: '16px' }} />
                         </IconButton>
                       )}
                     </Box>

From 34b3599064de12a8f40404fcb4008f3ad9a5d205 Mon Sep 17 00:00:00 2001
From: rohitratannagar <rohitratannagar2003@gmail.com>
Date: Thu, 12 Feb 2026 17:56:10 +0530
Subject: [PATCH 8/8] fixed for some testcases

Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>
---
 .../src/components/EntitySection/EntitySection.test.tsx   | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.test.tsx b/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.test.tsx
index 73094f2996..ae8783544e 100644
--- a/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.test.tsx
+++ b/workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.test.tsx
@@ -72,6 +72,14 @@ jest.mock('../../utils/utils', () => ({
 
 jest.mock('../../images/homepage-entities-1.svg', () => 'mock-image.svg');
 
+// ResizeObserver is not available in JSDOM
+class ResizeObserverMock {
+  observe = jest.fn();
+  unobserve = jest.fn();
+  disconnect = jest.fn();
+}
+window.ResizeObserver = ResizeObserverMock as unknown as typeof ResizeObserver;
+
 const theme = createTheme();
 
 const renderComponent = () =>