From 3383a7febb98147657c7a69b2ab883fd06cbdcbd Mon Sep 17 00:00:00 2001
From: Piumal Rathnayake <piumal1999@gmail.com>
Date: Thu, 31 Oct 2024 21:21:02 +0530
Subject: [PATCH] Fix alignment of read only label in top menu

---
 .../Apis/Details/components/APIDetailsTopMenu.jsx         | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/components/APIDetailsTopMenu.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/components/APIDetailsTopMenu.jsx
index 2c63cf1d4f0..b7c2bcb3768 100644
--- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/components/APIDetailsTopMenu.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/components/APIDetailsTopMenu.jsx
@@ -60,6 +60,7 @@ const classes = {
     topRevisionStyle: `${PREFIX}-topRevisionStyle`,
     readOnlyStyle: `${PREFIX}-readOnlyStyle`,
     active: `${PREFIX}-active`,
+    alertMargin: `${PREFIX}-alertMargin`,
 };
 
 const Root = styled('div')(({ theme }) => ({
@@ -140,6 +141,9 @@ const Root = styled('div')(({ theme }) => ({
         borderRadius: '50%',
         alignItems: 'center',
     },
+    [`.${classes.alertMargin}`]: {
+        marginLeft: theme.spacing(1),
+    },
 }));
 
 const APIDetailsTopMenu = (props) => {
@@ -294,6 +298,7 @@ const APIDetailsTopMenu = (props) => {
                         variant='outlined'
                         severity='warning'
                         icon={false}
+                        className={classes.alertMargin}
                     >
                         <FormattedMessage
                             id='Apis.Details.components.APIDetailsTopMenu.read.only.label'
@@ -301,13 +306,13 @@ const APIDetailsTopMenu = (props) => {
                         />
                     </MUIAlert>
                 )}
-                <div className={classes.dateWrapper} />
                 {(api.subtypeConfiguration?.subtype === 'AIAPI') && (
                     <MUIAlert
                         data-testid='itest-ai-api-label'
                         variant='outlined'
                         severity='info'
                         icon={false}
+                        className={classes.alertMargin}
                     >
                         <FormattedMessage
                             id='Apis.Details.components.APIDetailsTopMenu.ai.api.label'
@@ -321,6 +326,7 @@ const APIDetailsTopMenu = (props) => {
                         variant='outlined'
                         severity='warning'
                         icon={false}
+                        className={classes.alertMargin}
                     >
                         <FormattedMessage
                             id='Apis.Details.components.APIDetailsTopMenu.advertise.only.label'