Improve app gallery image sizing (no cropping) (#20287)

<img width="908" height="808" alt="Screenshot 2026-05-05 at 7 38 46 PM"
src="https://github.com/user-attachments/assets/a6f0a9b7-f676-46a3-8642-48c4bd06c7f4"
/>

Author: abdulrahmancodes

packages/twenty-docs/developers/extend/apps/publishing.mdx

@@ -198,6 +198,14 @@ export default defineApplication({
 
 See the [defineApplication accordion](/developers/extend/apps/building#defineentity-functions) in the Building Apps page for the full list of marketplace fields (`author`, `category`, `aboutDescription`, `websiteUrl`, `termsUrl`, etc.).
 
+#### Recommended screenshot dimensions
+
+The marketplace renders `screenshots` in a fixed `8:5` container (for example, `1600×1000 px`).
+
+<Note>
+Screenshots of any aspect ratio are displayed in full and are never cropped, but anything significantly taller or narrower than `8:5` will show empty bands on the sides.
+</Note>
+
 ### Publish
 
 ```bash filename="Terminal"

packages/twenty-front/src/modules/settings/applications/components/SettingsApplicationScreenshotGallery.tsx

@@ -29,8 +29,7 @@ const StyledScreenshotsContainer = styled.div`
 
 const StyledScreenshotImage = styled.img`
   height: 100%;
-  object-fit: cover;
-  object-position: center;
+  object-fit: contain;
   width: 100%;
 `;
 
@@ -43,6 +42,7 @@ const StyledScreenshotThumbnails = styled.div`
 
 const StyledThumbnail = styled.div<{ isSelected?: boolean }>`
   align-items: center;
+  aspect-ratio: 8 / 5;
   background-color: ${themeCssVariables.background.secondary};
   border: 1px solid
     ${({ isSelected }) =>
@@ -53,7 +53,6 @@ const StyledThumbnail = styled.div<{ isSelected?: boolean }>`
   cursor: pointer;
   display: flex;
   flex: 0 0 96px;
-  height: 56px;
   justify-content: center;
   overflow: hidden;
 
@@ -64,8 +63,7 @@ const StyledThumbnail = styled.div<{ isSelected?: boolean }>`
 
 const StyledThumbnailImage = styled.img`
   height: 100%;
-  object-fit: cover;
-  object-position: center;
+  object-fit: contain;
   width: 100%;
 `;