feat: AppDetails - refactor component to have horizontal-scroll for app-info-cards

Author: RohitRaj011

src/components/app/details/appDetails/AppDetails.tsx

@@ -718,9 +718,7 @@ const Details: React.FC<DetailsType> = ({
     const isDeploymentAppDeleting = appDetails?.deploymentAppDeleteRequest || false
     return (
         <>
-            <div
-                className={`w-100 pt-16 pr-20 pb-16 pl-20 dc__gap-16 ${isDeploymentAppDeleting ? 'app-info-bg' : 'app-info-bg-gradient'}`}
-            >
+            <div className={`w-100 dc__gap-16 ${isDeploymentAppDeleting ? 'app-info-bg' : 'app-info-bg-gradient'}`}>
                 <SourceInfo
                     appDetails={appDetails}
                     setDetailed={setShowAppStatusModal}

src/components/app/details/appDetails/SourceInfo.tsx

@@ -171,7 +171,7 @@ export const SourceInfo = ({
 
     const renderAppDetailsCDButton = () => {
         const { buttonStyle, iconName } = getDeployButtonConfig(deploymentUserActionState)
-        
+
         return (
             <Button
                 dataTestId="deploy-button"
@@ -208,7 +208,7 @@ export const SourceInfo = ({
             : ''
 
         return (
-            <div className="flex left w-100 h-40">
+            <div className="flex left w-100 pt-16 px-20">
                 <AppEnvSelector {...(isAppView ? { isAppView, environments } : { isAppView: false, applications })} />
                 {appDetails?.deploymentAppType && (
                     <div className={`flex ${!appDetails.isVirtualEnvironment ? 'ml-16' : ''}`}>
@@ -415,7 +415,7 @@ export const SourceInfo = ({
                 ? shimmerLoaderBlocks()
                 : !isdeploymentAppDeleting &&
                   environment && (
-                      <div className="flex left w-100 flex-wrap dc__row-gap-12">
+                      <div className="app-details-info-card-container flex left w-100 dc__row-gap-12 pb-16 dc__overflow-auto">
                           {status && (
                               <AppStatusCard
                                   // TODO: Fix and remove

src/components/app/details/appDetails/appDetails.scss

@@ -1385,6 +1385,20 @@ table.resource-tree {
     }
 }
 
+.app-details-info-card-container {
+    > * {
+        flex-shrink: 0;
+
+        &:first-child {
+            margin-left: 20px;
+        }
+
+        &:last-child {
+            margin-right: 20px;
+        }
+    }
+}
+
 .deployed-commit-card {
     &:hover {
         .app-details-info-card:not(:first-child) {