From cbd2a017da52ad8e1a99aa997246d9389906b82a Mon Sep 17 00:00:00 2001
From: Abdul Rahman <81605929+abdulrahmancodes@users.noreply.github.com>
Date: Tue, 5 May 2026 22:58:39 +0530
Subject: [PATCH] Improve app gallery image sizing (no cropping) (#20287)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<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"
/>
---
 .../twenty-docs/developers/extend/apps/publishing.mdx     | 8 ++++++++
 .../components/SettingsApplicationScreenshotGallery.tsx   | 8 +++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/twenty-docs/developers/extend/apps/publishing.mdx b/packages/twenty-docs/developers/extend/apps/publishing.mdx
index 2cbd596730..8ed1f40b99 100644
--- a/packages/twenty-docs/developers/extend/apps/publishing.mdx
+++ b/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"
diff --git a/packages/twenty-front/src/modules/settings/applications/components/SettingsApplicationScreenshotGallery.tsx b/packages/twenty-front/src/modules/settings/applications/components/SettingsApplicationScreenshotGallery.tsx
index 3362004175..6d8ab07b92 100644
--- a/packages/twenty-front/src/modules/settings/applications/components/SettingsApplicationScreenshotGallery.tsx
+++ b/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%;
 `;