From 32812012e8ee2d1ee6ee9efc42b40dd9b3e31294 Mon Sep 17 00:00:00 2001
From: thatsfelix <thatwasfelix@gmail.com>
Date: Wed, 22 Jul 2026 15:34:29 +0800
Subject: [PATCH] =?UTF-8?q?fix(responsive):=20=E4=BF=AE=E5=A4=8D=E4=B8=AD?=
 =?UTF-8?q?=E9=97=B4=E6=96=AD=E7=82=B9=E5=B8=83=E5=B1=80=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/subscribe-plan-list/index.scss | 12 +++--
 src/hooks/useViewportScale.ts                 |  8 ++--
 src/layouts/Layout/Layout.scss                |  2 +-
 src/pages/Characters/index.scss               | 48 +++++++++++++------
 src/pages/Explore/index.scss                  |  4 ++
 5 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/src/components/subscribe-plan-list/index.scss b/src/components/subscribe-plan-list/index.scss
index 91ba2b5..122ac2f 100644
--- a/src/components/subscribe-plan-list/index.scss
+++ b/src/components/subscribe-plan-list/index.scss
@@ -729,11 +729,11 @@
   }
 }
 
-@media (max-width: 820px) {
+@media (max-width: 900px) {
   .plans {
     .plans__points-row {
-      justify-content: flex-start;
-      overflow-x: auto;
+      justify-content: center;
+      overflow-x: visible;
       padding-bottom: 2px;
     }
 
@@ -745,13 +745,17 @@
 
     .plan-grid {
       grid-template-columns: minmax(0, 1fr);
-      width: min(100%, 360px);
+      width: 100%;
       justify-content: center;
     }
 
     .plan_grid_item {
       width: 100%;
     }
+
+    .plan_item__highlight-content {
+      width: 100%;
+    }
   }
 }
 
diff --git a/src/hooks/useViewportScale.ts b/src/hooks/useViewportScale.ts
index 8e298a2..f02eb61 100644
--- a/src/hooks/useViewportScale.ts
+++ b/src/hooks/useViewportScale.ts
@@ -118,7 +118,7 @@ function clearScaledElementStyles(inner: HTMLDivElement, spacer: HTMLDivElement)
 }
 
 function applyScaledElementStyles(inner: HTMLDivElement, spacer: HTMLDivElement, scale: number, viewportWidth: number, viewportHeight: number, designWidth: number, useZoom: boolean): void {
-  const scaledInnerWidth = scale > 0 ? Math.max(designWidth, viewportWidth / scale) : designWidth;
+  const scaledInnerWidth = scale > 0 ? viewportWidth / scale : designWidth;
   const scaledInnerHeight = viewportHeight > 0 && scale > 0 ? viewportHeight / scale : 0;
 
   inner.style.width = `${String(scaledInnerWidth)}px`;
@@ -184,8 +184,10 @@ export function useLayoutViewportScale(viewportRef: RefObject<HTMLElement | null
 
       const viewportWidth = measureElement?.clientWidth ?? document.documentElement.clientWidth;
       const viewportHeight = measureElement?.clientHeight ?? window.innerHeight;
-      const scale = computeLayoutViewportScale(viewportWidth, designWidth);
-      const scaling = isLayoutScalingActive(viewportWidth, scale);
+      const windowWidth = document.documentElement.clientWidth;
+      const scaleBasisWidth = windowWidth >= LAYOUT_SCALE_DISABLE_BELOW ? Math.max(viewportWidth, LAYOUT_SCALE_DISABLE_BELOW) : viewportWidth;
+      const scale = computeLayoutViewportScale(scaleBasisWidth, designWidth);
+      const scaling = isLayoutScalingActive(windowWidth, scale);
       const host = viewport ?? document.documentElement;
 
       syncHostScaleState(host, scale, scaling, useZoom);
diff --git a/src/layouts/Layout/Layout.scss b/src/layouts/Layout/Layout.scss
index 19f55b0..61804a6 100644
--- a/src/layouts/Layout/Layout.scss
+++ b/src/layouts/Layout/Layout.scss
@@ -1279,7 +1279,7 @@
   }
 }
 
-@media (max-width: 900px) {
+@media (max-width: 899px) {
   .layoutShellViewport {
     height: 100dvh;
   }
diff --git a/src/pages/Characters/index.scss b/src/pages/Characters/index.scss
index b923064..d02792d 100644
--- a/src/pages/Characters/index.scss
+++ b/src/pages/Characters/index.scss
@@ -775,6 +775,24 @@ button.character_library_sections__card {
     padding-left: 32px;
   }
 
+  .character_library_sections__grid {
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    justify-content: stretch;
+  }
+
+  .character_library_sections__card {
+    width: 100%;
+    height: auto;
+    min-height: 248px;
+    flex-basis: auto;
+  }
+
+  .character_library_sections__card_image {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1 / 1;
+  }
+
   .character_library_sections__hero_avatars {
     right: 32px;
   }
@@ -922,6 +940,21 @@ button.character_library_sections__card {
     justify-content: stretch;
   }
 
+  .character_library_sections__card {
+    width: 100%;
+    height: auto;
+    min-height: 230px;
+    flex-basis: auto;
+    padding: 8px;
+  }
+
+  .character_library_sections__card_image {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1 / 1;
+    border-radius: 16px;
+  }
+
   .character_library_sections__category_control .categoryDropdown__trigger {
     width: 94px;
   }
@@ -944,21 +977,6 @@ button.character_library_sections__card {
     gap: 12px;
   }
 
-  .character_library_sections__card {
-    width: 100%;
-    height: auto;
-    min-height: 230px;
-    flex-basis: auto;
-    padding: 8px;
-  }
-
-  .character_library_sections__card_image {
-    width: 100%;
-    height: auto;
-    aspect-ratio: 1 / 1;
-    border-radius: 16px;
-  }
-
   .character_library_sections__card_meta {
     height: 40px;
     padding-right: 10px;
diff --git a/src/pages/Explore/index.scss b/src/pages/Explore/index.scss
index adc3913..fb3f066 100644
--- a/src/pages/Explore/index.scss
+++ b/src/pages/Explore/index.scss
@@ -133,6 +133,10 @@
     padding-right: 24px;
   }
 
+  @media (max-width: 1280px) {
+    padding-left: 24px;
+  }
+
   @media (max-width: 720px) {
     padding-right: 14px;
     padding-left: 14px;