From 5279601105c6fec49903a03655d32be18f47f3ec Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 30 Sep 2025 21:53:15 +0300
Subject: [PATCH] fix(website): screenshot would not fit properly on some
 screen sizes

---
 apps/website/src/pages/Home/index.css | 7 ++++++-
 apps/website/src/pages/Home/index.tsx | 4 +++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/website/src/pages/Home/index.css b/apps/website/src/pages/Home/index.css
index aa20da29d..1de3b5f65 100644
--- a/apps/website/src/pages/Home/index.css
+++ b/apps/website/src/pages/Home/index.css
@@ -47,7 +47,8 @@ section.hero-section {
     }
 
     .title-section {
-        flex-basis: 40%;
+        flex-basis: 30%;
+        flex-shrink: 0;
         color: var(--muted-color);
 
         h1 {
@@ -57,6 +58,10 @@ section.hero-section {
         }
     }
 
+    .screenshot-container {
+        flex-grow: 1;
+    }
+
     .screenshot {
         position: relative;
         width: 100%;
diff --git a/apps/website/src/pages/Home/index.tsx b/apps/website/src/pages/Home/index.tsx
index 92a6b6a3d..d9e52e819 100644
--- a/apps/website/src/pages/Home/index.tsx
+++ b/apps/website/src/pages/Home/index.tsx
@@ -86,7 +86,9 @@ function HeroSection() {
 
             </div>
 
-            {screenshotUrl && <img class="screenshot" src={screenshotUrl} alt="Screenshot of the Trilium Notes desktop application" />}
+            <div className="screenshot-container">
+                {screenshotUrl && <img class="screenshot" src={screenshotUrl} alt="Screenshot of the Trilium Notes desktop application" />}
+            </div>
         </Section>
     )
 }