fix: print paging

src/App.tsx

@@ -42,7 +42,7 @@ const App: Component = () => {
           <h1 class="text-2xl font-bold text-gray-900">TTRPG Tools</h1>
         </div>
       </header>
-      <main class="max-w-4xl mx-auto px-4 py-8 pt-20 md:ml-64">
+      <main class="max-w-4xl mx-auto px-4 py-8 pt-20 md:ml-64 print:p-0">
         <Article src={currentPath()} />
       </main>
     </div>

src/components/md-deck/CardPreview.tsx

@@ -36,7 +36,7 @@ export function CardPreview(props: CardPreviewProps) {
   let cardRef: HTMLDivElement | undefined;
 
   return (
-    <div class="flex justify-center">
+    <div class="flex justify-center overflow-hidden">
       <Show when={store.state.activeTab < store.state.cards.length}>
         <div
           ref={cardRef}

src/components/md-deck/PrintPreview.tsx

@@ -159,8 +159,8 @@ export function PrintPreview(props: PrintPreviewProps) {
   const visibleLayers = createMemo(() => store.state.layerConfigs.filter((l) => l.visible));
 
   return (
-    <div class="fixed inset-0 bg-black/50 z-50 overflow-auto">
+    <div class="fixed inset-0 bg-black/50 z-50 overflow-auto print:overflow-visible print:absolute">
-      <div class="min-h-screen py-20 px-4">
+      <div class="min-h-screen py-20 px-4 print:p-0">
         {/* 打印预览控制栏 */}
         <div class="fixed top-0 left-0 right-0 z-50 bg-white shadow-lg rounded-lg mx-4 mt-4 px-4 py-1 flex items-center justify-between gap-4">
           <div class="flex items-center gap-4">
@@ -185,11 +185,11 @@ export function PrintPreview(props: PrintPreviewProps) {
         </div>
 
         {/* A4 纸张预览 */}
-        <div class="flex flex-col items-center gap-8">
+        <div class="flex flex-col items-center gap-8 print-root">
           <For each={pages()}>
             {(page) => (
               <div
-                class="bg-white shadow-xl print:shadow-none print:w-full in-print"
+                class="bg-white shadow-xl print:shadow-none print:w-full"
                 style={{
                   width: `${A4_WIDTH}mm`,
                   height: `${A4_HEIGHT}mm`

src/styles.css

@@ -7,13 +7,16 @@
     visibility: hidden;
   }
   
-  body .in-print {
+  article > div > *:nth-child(1) {
+    margin-top: 0;
+  }
+  
+  body .print-root {
     visibility: visible;
     -webkit-print-color-adjust: exact !important;
     print-color-adjust: exact !important;
-    position: absolute;
+    width: 100vw;
-    top: 0;
+    gap: 0;
-    left: 0;
   }
   
   @page {