From ea55e997eeba53016154cbe62c475eea643acbe6 Mon Sep 17 00:00:00 2001
From: xiaoqidun <xiaoqidun@gmail.com>
Date: Mon, 19 Oct 2026 18:12:12 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=98=85=E8=AF=BB=E7=BC=96=E8=BE=91):=20?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=E5=8D=95=E5=8F=8C=E9=A1=B5=E7=BC=A9=E7=95=A5?=
 =?UTF-8?q?=E5=9B=BE=E9=97=B4=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/webui/ofdgo.css |  7 ++++---
 assets/webui/ofdgo.js  | 11 ++++++-----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/assets/webui/ofdgo.css b/assets/webui/ofdgo.css
index 597aeff..71784dd 100644
--- a/assets/webui/ofdgo.css
+++ b/assets/webui/ofdgo.css
@@ -2563,8 +2563,9 @@ button.outline-link:hover {
 }
 
 .page-list {
+	--thumb-gap: 12px;
 	display: grid;
-	gap: 12px;
+	gap: var(--thumb-gap);
 }
 
 .virtual-pages {
@@ -3132,8 +3133,8 @@ button.outline-link:hover {
 	height: auto;
 }
 
-.grouped-pages .page-list-item.drop-before::before { left: -5px; right: auto; }
-.grouped-pages .page-list-item.drop-after::after { right: -5px; left: auto; }
+.grouped-pages .page-list-item.drop-before::before { left: calc(-1px - var(--thumb-gap) / 2); right: auto; }
+.grouped-pages .page-list-item.drop-after::after { right: calc(-1px - var(--thumb-gap) / 2); left: auto; }
 
 .edit-object.erasing {
 	background: var(--accent-soft);
diff --git a/assets/webui/ofdgo.js b/assets/webui/ofdgo.js
index 78cb4da..622d146 100644
--- a/assets/webui/ofdgo.js
+++ b/assets/webui/ofdgo.js
@@ -10874,12 +10874,13 @@ function layoutThumbnails() {
 	view.rotation = state.rotation;
 	view.layout = state.pageLayout;
 	view.host.classList.toggle("grouped-pages", state.pageLayout > 1);
+	const gap = Number.parseFloat(getComputedStyle(view.host).columnGap) || 0;
 	const offsets = new Float64Array(state.doc.pages.length + 1);
 	view.heights = new Float64Array(state.doc.pages.length);
 	view.lefts = state.pageLayout > 1 ? new Float64Array(state.doc.pages.length) : null;
 	view.scales = state.pageLayout > 1 ? new Float64Array(state.doc.pages.length) : null;
 	view.columns = state.pageLayout > 1 ? state.pageLayout : 0;
-	view.itemWidth = state.pageLayout > 1 ? Math.max(1, (width - 8) / 2) : width;
+	view.itemWidth = state.pageLayout > 1 ? Math.max(1, (width - gap) / 2) : width;
 	let top = 0;
 	for (let start = 0; start < state.doc.pages.length; start += state.pageLayout) {
 		if (state.pageLayout === 1) {
@@ -10887,7 +10888,7 @@ function layoutThumbnails() {
 			const ratio = size.width > 0 && size.height > 0 ? size.height / size.width : 1 / 0.707;
 			view.heights[start] = Math.max(1, width - 20) * ratio + 70;
 			offsets[start] = top;
-			top += view.heights[start] + 12;
+			top += view.heights[start] + gap;
 			continue;
 		}
 		const group = pageGroupSize(start), scale = Math.max(1, view.itemWidth - 20) / Math.max(...group.widths);
@@ -10897,14 +10898,14 @@ function layoutThumbnails() {
 			if (index >= state.doc.pages.length) break;
 			offsets[index] = top;
 			view.heights[index] = height;
-			view.lefts[index] = column * (view.itemWidth + 8);
+			view.lefts[index] = column * (view.itemWidth + gap);
 			view.scales[index] = scale;
 		}
-		top += height + 20;
+		top += height + gap;
 	}
 	offsets[state.doc.pages.length] = top;
 	view.offsets = offsets;
-	view.gap = 12;
+	view.gap = gap;
 	view.total = Math.ceil(offsets.at(-1));
 	for (const [index, button] of view.nodes) {
 		layoutThumbnail(button, state.doc.pages[index]);