css/styles.css

@@ -1556,7 +1556,7 @@ input:checked + .slider:before {
    Modal Avatar Detail Widescreen Expansion
    ========================================================================== */
 #modal-avatar-detail .modal-content {
-  max-width: 980px !important;
+  max-width: 1120px !important;
   width: 96% !important;
   max-height: 92vh !important;
   overflow-y: auto !important;
@@ -3759,3 +3759,19 @@ input:checked + .slider:before {
 .console-suggestion-command { min-width:0; overflow-wrap:anywhere; }
 .console-suggestion-description { max-width:55%; }
 @media(max-width:640px) { .console-suggestion-option { flex-wrap:wrap; gap:.2rem .5rem; } .console-suggestion-description { display:block; width:100%; max-width:100%; margin-left:1.1rem; } }
+
+/* การ์ดกว้างตามเนื้อหาจริง ไม่ล็อก 1050px และไม่ตัดขอบ */
+.showcase-card-layout {
+  width: max-content;       /* เดิม: width/min-width 1050px */
+  min-width: 0;
+  overflow: visible;        /* เดิม: hidden ทำให้ส่วนเกินโดนตัด */
+  grid-template-columns: 360px 340px max-content;
+  gap: 1.25rem;
+  padding: 1.5rem;
+}
+
+.showcase-splash-col { width: 360px; }
+
+/* คอลัมน์รีลิกส์ขยายตามชื่อเซ็ตและ main stat ที่ยาวที่สุด */
+.showcase-relics-col { min-width: 420px; }
+.showcase-relic-card:hover { transform: none; }

index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>GaCy-Srtool</title>
-  <link rel="stylesheet" href="css/styles.css?v=2.16">
+  <link rel="stylesheet" href="css/styles.css?v=2.19">
   <link rel="stylesheet" href="css/item-catalog.css?v=2">
   <link rel="icon" type="image/png" href="assets/logo.png">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

js/app.js

@@ -5579,22 +5579,19 @@ async function exportShowcaseImage(avatarId) {
 
   if (typeof html2canvas !== 'undefined') {
     try {
-      const origWidth = showcaseEl.style.width;
-      const origMinWidth = showcaseEl.style.minWidth;
-      showcaseEl.style.width = '1050px';
-      showcaseEl.style.minWidth = '1050px';
+      const fullWidth = showcaseEl.scrollWidth || showcaseEl.offsetWidth;
+      const fullHeight = showcaseEl.scrollHeight || showcaseEl.offsetHeight;
 
       const canvas = await html2canvas(showcaseEl, {
         useCORS: true,
         allowTaint: true,
         scale: 2,
         backgroundColor: '#0c1222',
-        windowWidth: 1280
+        width: fullWidth,
+        height: fullHeight,
+        windowWidth: fullWidth
       });
 
-      showcaseEl.style.width = origWidth;
-      showcaseEl.style.minWidth = origMinWidth;
-
       const dataUrl = canvas.toDataURL('image/png');
       const a = document.createElement('a');
       a.href = dataUrl;

version.json

@@ -1,5 +1,5 @@
 {
-  "branch": "main",
+  "branch": "test-gay",
   "version": "1.0.0",
-  "updatedAt": "2026-10-17T05:11:28.794Z"
+  "updatedAt": "2026-10-31T17:15:16.482Z"
 }