Merge branch 'master' into M-DEV-1/add-mobile-support-to-infoicon

Author: M-DEV-1

README.md

@@ -71,12 +71,55 @@ To run tests:
 make tests
 ```
 
-To attach sistent to your project use:
+#### Using your local Sistent Fork in a Project
+
+1. Install your local Sistent package in the project
 
 ```
 npm install <path-to-sistent-on-local-machine>
 ```
 
+> Example:
+>
+> ```
+> # relative path
+> npm install ../../sistent
+>
+> # absolute path
+> npm install /home/five/code/sistent
+> ```
+
+This will update your Sistent dependency to:
+
+```
+"@layer5/sistent" : "file:../../sistent"
+```
+
+2. Build your local Sistent fork
+
+After making changes to your fork, run this command in your local Sistent package.
+
+```
+make build
+```
+
+3. Run the build command in the project where your local Sistent fork is installed.
+
+```
+# example, Meshery UI
+make ui-build
+```
+
+Now your project should reflect changes from your local Sistent fork.
+
+If you want to remove the local Sistent fork from your project, run:
+
+```
+npm uninstall @layer5/sistent
+```
+
+This will remove the local Sistent package from your project. You will have to install the standard package again after running this command.
+
 > [!NOTE]
 > Avoid using `type any` in your code. Always specify explicit types to ensure type safety and maintainability.
 

src/custom/CatalogDetail/OverviewSection.tsx

@@ -7,7 +7,7 @@ import MetricsDisplay from './MetricsDisplay';
 import PatternInfo from './PatternInfo';
 import SocialSharePopper from './SocialSharePopper';
 import UserInfo from './UserInfo';
-import { ContentRow, DesignHeading, OverviewContainer } from './style';
+import { ContentRow, DesignHeading, OverviewContainer, OverviewContainerHeader } from './style';
 import { Class } from './types';
 
 interface OverviewSectionProps {
@@ -50,15 +50,7 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
 }) => {
   return (
     <OverviewContainer>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          width: '100%',
-          flexWrap: 'wrap',
-          fontFamily: fontFamily || 'inherit'
-        }}
-      >
+      <OverviewContainerHeader>
         <DesignHeading>{details?.name}</DesignHeading>
         <SocialSharePopper
           details={details}
@@ -70,7 +62,7 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
           showShareAction={showShareAction}
           handleShare={handleShare}
         />
-      </div>
+      </OverviewContainerHeader>
       <Grid container spacing={2}>
         <Grid item lg={4} md={4} sm={12} xs={12}>
           <Grid container>

src/custom/CatalogDetail/style.tsx

@@ -200,6 +200,18 @@ export const OverviewContainer = styled('div')(({ theme }) => ({
   borderRadius: '0.4rem'
 }));
 
+export const OverviewContainerHeader = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  width: '100%',
+  flexWrap: 'wrap',
+  fontFamily: 'inherit',
+
+  [theme.breakpoints.down('sm')]: {
+    flexDirection: 'column'
+  }
+}));
+
 export const DesignHeading = styled('h1')(({ theme }) => ({
   textAlign: 'left',
   margin: '0rem 0rem 2rem 0rem',