From f3884af4b904b38ef354e8e494422fd3fbbe0bb3 Mon Sep 17 00:00:00 2001
From: Gophlet <z@v1c0.com>
Date: Mon, 18 Aug 2025 18:18:44 +0800
Subject: [PATCH] fix(Artboard): update dimensions to use CSS variables for
 better layout control (#9277)

---
 .../src/pages/paintings/components/Artboard.tsx        | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/pages/paintings/components/Artboard.tsx b/src/renderer/src/pages/paintings/components/Artboard.tsx
index 7a46b8e32c..2c56c40c18 100644
--- a/src/renderer/src/pages/paintings/components/Artboard.tsx
+++ b/src/renderer/src/pages/paintings/components/Artboard.tsx
@@ -50,8 +50,8 @@ const Artboard: FC<ArtboardProps> = ({
               src={getCurrentImageUrl()}
               preview={{ mask: false }}
               style={{
-                maxWidth: '70vh',
-                maxHeight: '70vh',
+                maxWidth: 'var(--artboard-max)',
+                maxHeight: 'var(--artboard-max)',
                 objectFit: 'contain',
                 backgroundColor: 'var(--color-background-soft)',
                 cursor: 'pointer'
@@ -109,12 +109,14 @@ const Container = styled.div`
   flex-direction: row;
   justify-content: center;
   align-items: center;
+
+  --artboard-max: calc(100vh - 256px);
 `
 
 const ImagePlaceholder = styled.div`
   display: flex;
-  width: 70vh;
-  height: 70vh;
+  width: var(--artboard-max);
+  height: var(--artboard-max);
   background-color: var(--color-background-soft);
   align-items: center;
   justify-content: center;