From 8fa651684f3b00c505620fe350d6a89890d24a3d Mon Sep 17 00:00:00 2001
From: gunshiz <spsshop1047@gmail.com>
Date: Tue, 1 Sep 2026 16:03:34 +0700
Subject: [PATCH] fix artifact export layout

---
 .../[guideId]/artifacts/image/route.tsx       | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/app/api/guides/[guideId]/artifacts/image/route.tsx b/app/api/guides/[guideId]/artifacts/image/route.tsx
index 8173b7f..3f0d342 100644
--- a/app/api/guides/[guideId]/artifacts/image/route.tsx
+++ b/app/api/guides/[guideId]/artifacts/image/route.tsx
@@ -119,13 +119,15 @@ export async function GET(
 
   const profile = guide.profile;
   const groupRowHeights = guide.groups.map((group) => group.rows.map((row) => Math.max(76, 76 + (row.note ? Math.ceil(row.note.length / 58) * 22 : 0))));
-  const leftHeight = guide.groups.reduce((sum, _group, groupIndex) => sum + 68 + groupRowHeights[groupIndex].reduce((groupSum, rowHeight) => groupSum + rowHeight, 0), 0) + Math.max(0, guide.groups.length - 1) * 16;
+  const tierListHeight = guide.groups.reduce((sum, _group, groupIndex) => sum + 68 + groupRowHeights[groupIndex].reduce((groupSum, rowHeight) => groupSum + rowHeight, 0), 0) + Math.max(0, guide.groups.length - 1) * 16;
   const detailHeight = profile
     ? 60 + profile.targets.length * 40 + (profile.talents.length ? 82 : 0) + (profile.note ? Math.max(48, Math.ceil(profile.note.length / 58) * 24) : 0)
     : 0;
-  const rightHeight = profile
-    ? 242 + (profile.substats.length ? 76 + profile.substats.length * 18 : 0) + (detailHeight > 60 ? detailHeight + 16 : 0) + 32
+  const profileHeight = profile
+    ? 242 + (profile.substats.length ? 92 + profile.substats.length * 18 : 0)
     : 0;
+  const leftHeight = tierListHeight + (profile ? profileHeight + 16 : 0);
+  const rightHeight = detailHeight > 60 ? detailHeight : 0;
   const height = Math.max(520, 190 + Math.max(leftHeight, rightHeight));
 
   return new ImageResponse(
@@ -154,7 +156,7 @@ export async function GET(
       </div>
 
       <div style={{ display: "flex", alignItems: "flex-start", gap: 16 }}>
-        <div style={{ display: "flex", flex: profile ? 1.2 : 1, flexDirection: "column", gap: 16 }}>
+        <div style={{ display: "flex", flex: detailHeight > 60 ? 1.2 : 1, flexDirection: "column", gap: 16 }}>
           {guide.groups.map((group, groupIndex) => (
             <div
               key={group.id}
@@ -200,10 +202,8 @@ export async function GET(
               </div>
             </div>
           ))}
-        </div>
 
-        {profile ? (
-          <div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 16 }}>
+          {profile ? (
             <div style={{ display: "flex", flexDirection: "column", overflow: "hidden", border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25" }}>
               <div style={{ display: "flex", justifyContent: "center", background: "#ddb45a", color: "#211a0d", padding: "14px 20px", fontSize: 24, fontWeight: 700 }}>
                 ออฟหลัก
@@ -225,18 +225,21 @@ export async function GET(
                 ))}
               </div>
             </div>
+          ) : null}
 
-            {profile.substats.length ? (
-                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25", padding: "16px", fontSize: 14, textAlign: "center" }}>
-                <strong>ลำดับค่าสถานะ:</strong>
-                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2 }}>
-                  {profile.substats.map((stat, index) => <span key={`${stat}-${index}`} style={{ color: statPriorityColor(index) }}>{statLabel(stat)}</span>)}
-                </div>
+          {profile?.substats.length ? (
+            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25", padding: "16px", fontSize: 14, textAlign: "center" }}>
+              <strong>ลำดับค่าสถานะ:</strong>
+              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2 }}>
+                {profile.substats.map((stat, index) => <span key={`${stat}-${index}`} style={{ color: statPriorityColor(index) }}>{statLabel(stat)}</span>)}
               </div>
-            ) : null}
+            </div>
+          ) : null}
+        </div>
 
-            {detailHeight > 60 ? (
-              <div style={{ display: "flex", flexDirection: "column", gap: 14, border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25", padding: "18px 20px" }}>
+        {profile && detailHeight > 60 ? (
+          <div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 16 }}>
+            <div style={{ display: "flex", flexDirection: "column", gap: 14, border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25", padding: "18px 20px" }}>
                 <div style={{ display: "flex", fontSize: 20, fontWeight: 700 }}>รายละเอียดเพิ่มเติม</div>
                 {profile.targets.length ? (
                   <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
@@ -274,8 +277,7 @@ export async function GET(
                     <div style={{ display: "flex", fontSize: 14, lineHeight: 1.55 }}>{profile.note}</div>
                   </div>
                 ) : null}
-              </div>
-            ) : null}
+            </div>
           </div>
         ) : null}
       </div>