Merge pull request #177 from kwnt-dev/fix/#176_pdf-depth-label-overflow

fix: PDFプレビュー画面の表示改善

Author: kwnt-dev

app/admin/pdf-preview/page.tsx

@@ -242,6 +242,7 @@ function PDFPreviewContent() {
 
     link.click();
     URL.revokeObjectURL(downloadUrl);
+    toast.success("PDFダウンロードを開始しました");
   };
 
   /**
@@ -268,9 +269,14 @@ function PDFPreviewContent() {
   };
 
   return (
-    <div className="p-8">
-      <div className="mb-6 flex gap-4">
-        <button onClick={handleDownloadPDF}>PDFダウンロード</button>
+    <div className="p-8 flex flex-col items-center">
+      <div className="flex justify-end gap-4 mb-4 w-full">
+        <button
+          onClick={handleDownloadPDF}
+          className="px-4 py-2 bg-gray-700 text-white rounded hover:bg-gray-800"
+        >
+          PDFダウンロード
+        </button>
         {/* ダッシュボードから?send=trueで遷移してきた場合のみ送信ボタンを表示 */}
         {isSendMode && sessionIds && (
           <button

components/greens/GreenCardPDFExport.tsx

@@ -194,20 +194,32 @@ export default function GreenCardPDFExport({
         />
 
         {/* 奥行き数字 */}
-        {currentPin && (
-          <Text
-            text={`${Math.round(holeData.origin.y - currentPin.y)}`}
-            fontSize={450}
-            x={currentPin.x <= 30 ? ydToPx(45) : ydToPx(15)}
-            y={ydToPx(currentPin.y)}
-            offsetY={100}
-            align="center"
-            width={600}
-            offsetX={300}
-            fontStyle="bold"
-            fill="#000000"
-          />
-        )}
+        {currentPin &&
+          (() => {
+            const depthFontSize = 450;
+            const baseY = ydToPx(currentPin.y);
+            // はみ出る分だけ上にずらしてキャンバス内に収める
+            const bottomEdge = baseY - 100 + depthFontSize;
+            const textY =
+              bottomEdge > CANVAS_SIZE
+                ? baseY - (bottomEdge - CANVAS_SIZE)
+                : baseY;
+
+            return (
+              <Text
+                text={`${Math.round(holeData.origin.y - currentPin.y)}`}
+                fontSize={depthFontSize}
+                x={currentPin.x <= 30 ? ydToPx(45) : ydToPx(15)}
+                y={textY}
+                offsetY={100}
+                align="center"
+                width={600}
+                offsetX={300}
+                fontStyle="bold"
+                fill="#000000"
+              />
+            );
+          })()}
 
         {/* 中心線上の表示「C」 */}
         {currentPin && currentPin.x === 30 && (