fix: #1210 #1206 - tweak standalone page css

packages/marketplace/src/components/pages/client-app-detail/__test__/__snapshots__/app-content.test.tsx.snap

@@ -17,6 +17,9 @@ exports[`AppContent AppContent - should match snapshot 1`] = `
     </Component>
     <ul />
   </div>
+  <div
+    className=" "
+  />
   <div>
     <div>
       <Component>
@@ -166,25 +169,29 @@ exports[`AppContent renderDesktopIntegrationTypes - should match snapshot 1`] =
 exports[`AppContent renderExtraMedia - should match snapshot 1`] = `
 <div>
   <div
-    key="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/7d88729f-2366-4561-9d5c-282615f3946b.jpeg"
-  >
-    <img
-      src="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/7d88729f-2366-4561-9d5c-282615f3946b.jpeg"
-    />
-  </div>
-  <div
-    key="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/c4a36706-aa44-47f9-9fb6-9053eef4e581.png"
-  >
-    <img
-      src="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/c4a36706-aa44-47f9-9fb6-9053eef4e581.png"
-    />
-  </div>
-  <div
-    key="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/65bd3b97-e78c-41cd-b75f-e06e1d2f00df.png"
+    className=" "
   >
-    <img
-      src="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/65bd3b97-e78c-41cd-b75f-e06e1d2f00df.png"
-    />
+    <div
+      key="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/7d88729f-2366-4561-9d5c-282615f3946b.jpeg"
+    >
+      <img
+        src="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/7d88729f-2366-4561-9d5c-282615f3946b.jpeg"
+      />
+    </div>
+    <div
+      key="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/c4a36706-aa44-47f9-9fb6-9053eef4e581.png"
+    >
+      <img
+        src="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/c4a36706-aa44-47f9-9fb6-9053eef4e581.png"
+      />
+    </div>
+    <div
+      key="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/65bd3b97-e78c-41cd-b75f-e06e1d2f00df.png"
+    >
+      <img
+        src="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/65bd3b97-e78c-41cd-b75f-e06e1d2f00df.png"
+      />
+    </div>
   </div>
 </div>
 `;

packages/marketplace/src/components/pages/client-app-detail/__test__/__snapshots__/client-app-detail.test.tsx.snap

@@ -394,6 +394,9 @@ exports[`ClientAppDetail should not render loader when client.appDetail.data is
                   </Component>
                   <ul />
                 </div>
+                <div
+                  className=" "
+                />
                 <div>
                   <div>
                     <Component>

packages/marketplace/src/components/pages/client-app-detail/app-content.tsx

@@ -38,7 +38,7 @@ export const renderCategory = (category: CategoryModel | undefined) => {
   if (!category) {
     return (
       <div className={clientAppDetailStyles.gutter}>
-        <H5 className={standAloneAppDetailStyles.headerWithoutMargin}>Category</H5>
+        <H5>Category</H5>
         <p>None</p>
       </div>
     )
@@ -56,7 +56,7 @@ export const renderDesktopIntegrationTypes = (desktopIntegrationTypes: DesktopIn
   if (desktopIntegrationTypes.length === 0) {
     return (
       <div className={clientAppDetailStyles.gutter}>
-        <H5 className={standAloneAppDetailStyles.headerWithoutMargin}>Destop Integration</H5>
+        <H5>Destop Integration</H5>
         <p>None</p>
       </div>
     )
@@ -72,12 +72,16 @@ export const renderDesktopIntegrationTypes = (desktopIntegrationTypes: DesktopIn
   )
 }
 
-export const renderExtraMedia = (media: MediaModel[] = []) =>
-  media.map(({ uri }) => (
-    <div key={uri} className={clientAppDetailStyles.gutter}>
-      <img src={uri} />
-    </div>
-  ))
+const renderExtraMediaClassNames = [clientAppDetailStyles.renderImageContainer, clientAppDetailStyles.gutter]
+export const renderExtraMedia = (media: MediaModel[] = []) => (
+  <div className={renderExtraMediaClassNames.join(' ')}>
+    {media.map(({ uri }) => (
+      <div key={uri}>
+        <img src={uri} />
+      </div>
+    ))}
+  </div>
+)
 
 const AppContent: React.FC<AppContentProps> = ({ appDetailData, desktopIntegrationTypes = [] }) => {
   const { summary = '', description = '', category, scopes = [], media = [] } = appDetailData

packages/marketplace/src/components/pages/developer-app-detail/app-detail/app-content/app-content.tsx

@@ -114,7 +114,7 @@ const AppContent: React.FC<AppContentProps> = ({ appDetailData }) => {
   return (
     <div className={clientAppDetailStyles.appContentContainer}>
       {isVisibleUninstallModal && (
-        <Modal visible={isVisibleUninstallModal}>
+        <Modal renderChildren className="nghia-test-test" visible={isVisibleUninstallModal}>
           <ConfirmUninstall
             isSetAppDetailStaleAfterUninstallSuccess={false}
             appName={name}

packages/marketplace/src/styles/blocks/standalone-app-detail.scss

@@ -67,6 +67,8 @@
 
     img {
       background: $white;
+      width: 100%;
+      height: 100%;
     }
   }
 

packages/marketplace/src/styles/pages/client-app-detail.scss

@@ -1,6 +1,19 @@
 @import '../base/colors.scss';
 @import '../base/screen-size.scss';
 
+.renderImageContainer {
+  display: flex;
+
+  div {
+    flex: 1;
+    margin-right: 1rem;
+
+    img {
+      width: 100%;
+    }
+  }
+}
+
 .check {
   color: #a0c862;
 }