From de11511c30efd60515e7375fc1672b30fac81be8 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Sat, 11 Apr 2026 01:33:56 +0800
Subject: [PATCH] fix(layout): fixed bleed layout of images (#3823)

---
 .../src/__tests__/utils/style.test.ts         | 14 +++++------
 apps/readest-app/src/utils/style.ts           | 24 +++++++------------
 packages/foliate-js                           |  2 +-
 3 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/apps/readest-app/src/__tests__/utils/style.test.ts b/apps/readest-app/src/__tests__/utils/style.test.ts
index f8b7d763..8495821c 100644
--- a/apps/readest-app/src/__tests__/utils/style.test.ts
+++ b/apps/readest-app/src/__tests__/utils/style.test.ts
@@ -245,19 +245,17 @@ describe('transformStylesheet', () => {
     it('adds width when both left and right bleed', () => {
       const css = '.bleed { duokan-bleed: left right; }';
       const result = transformStylesheet(css, VW, VH, VERTICAL);
-      expect(result).toContain(
-        'width: calc(var(--_max-width) + var(--page-margin-left) + var(--page-margin-right)) !important',
-      );
-      expect(result).toContain('max-width: calc(var(--full-width) * 1px) !important');
+      expect(result).toContain('width: calc(var(--available-width) * 1px) !important');
+      expect(result).toContain('min-width: calc(var(--available-width) * 1px) !important');
+      expect(result).toContain('max-width: calc(var(--available-width) * 1px) !important');
     });
 
     it('adds height when both top and bottom bleed', () => {
       const css = '.bleed { duokan-bleed: top bottom; }';
       const result = transformStylesheet(css, VW, VH, VERTICAL);
-      expect(result).toContain(
-        'height: calc(100% + var(--page-margin-top) + var(--page-margin-bottom)) !important',
-      );
-      expect(result).toContain('max-height: calc(var(--full-height) * 1px) !important');
+      expect(result).toContain('height: calc(var(--available-height) * 1px) !important');
+      expect(result).toContain('min-height: calc(var(--available-height) * 1px) !important');
+      expect(result).toContain('max-height: calc(var(--available-height) * 1px) !important');
     });
 
     it('does not add bleed styles when vertical is true', () => {
diff --git a/apps/readest-app/src/utils/style.ts b/apps/readest-app/src/utils/style.ts
index 526e6ff2..7e398e4a 100644
--- a/apps/readest-app/src/utils/style.ts
+++ b/apps/readest-app/src/utils/style.ts
@@ -725,25 +725,17 @@ export const transformStylesheet = (css: string, vw: number, vh: number, vertica
       if (!/display\s*:/.test(block)) {
         block = block.replace(/}$/, ' display: flow-root !important; }');
       }
-      if (!/width\s*:/.test(block) && directions.includes('left') && directions.includes('right')) {
+      if (directions.includes('left') && directions.includes('right')) {
         block = block
-          .replace(
-            /}$/,
-            ' width: calc(var(--_max-width) + var(--page-margin-left) + var(--page-margin-right)) !important; }',
-          )
-          .replace(/}$/, ' max-width: calc(var(--full-width) * 1px) !important; }');
+          .replace(/}$/, ' width: calc(var(--available-width) * 1px) !important; }')
+          .replace(/}$/, ' min-width: calc(var(--available-width) * 1px) !important; }')
+          .replace(/}$/, ' max-width: calc(var(--available-width) * 1px) !important; }');
       }
-      if (
-        !/height\s*:/.test(block) &&
-        directions.includes('top') &&
-        directions.includes('bottom')
-      ) {
+      if (directions.includes('top') && directions.includes('bottom')) {
         block = block
-          .replace(
-            /}$/,
-            ' height: calc(100% + var(--page-margin-top) + var(--page-margin-bottom)) !important; }',
-          )
-          .replace(/}$/, ' max-height: calc(var(--full-height) * 1px) !important; }');
+          .replace(/}$/, ' height: calc(var(--available-height) * 1px) !important; }')
+          .replace(/}$/, ' min-height: calc(var(--available-height) * 1px) !important; }')
+          .replace(/}$/, ' max-height: calc(var(--available-height) * 1px) !important; }');
       }
     }
     return selector + block;
diff --git a/packages/foliate-js b/packages/foliate-js
index 183f296a..2476b0da 160000
--- a/packages/foliate-js
+++ b/packages/foliate-js
@@ -1 +1 @@
-Subproject commit 183f296aaf1484e143edd6c3eb55fb77673df3de
+Subproject commit 2476b0dabf5269884ee53ff2332536ae13a3531b