fix(layout): fixed layout of progress bar in vertical mode (#3749)

apps/readest-app/biome.json

@@ -55,7 +55,7 @@
       },
       "correctness": {
         "noUnusedVariables": "warn",
-        "noUnusedImports": "warn",
+        "noUnusedImports": "error",
         "useExhaustiveDependencies": "off",
         "useHookAtTopLevel": "error",
         "useJsxKeyInIterable": "error",

apps/readest-app/src/__tests__/hooks/useSpatialNavigation.test.tsx

@@ -1,6 +1,6 @@
 import { cleanup, render, act } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import {
   useSpatialNavigation,
   _resetLastKeyboardTime,

apps/readest-app/src/app/reader/components/ProgressBar.tsx

@@ -179,12 +179,12 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
       style={
         isVertical
           ? {
+              top: `${(contentInsets.top - gridInsets.top) * 1.5}px`,
               bottom: `${(contentInsets.bottom - gridInsets.bottom) * 1.5}px`,
               left: showDoubleBorder
                 ? `calc(${contentInsets.left}px)`
                 : `calc(${Math.max(0, contentInsets.left - 32)}px)`,
               width: showDoubleBorder ? '32px' : `${contentInsets.left}px`,
-              height: `calc(100% - ${((contentInsets.top + contentInsets.bottom) / 2) * 3}px)`,
             }
           : {
               paddingInlineStart: `calc(${horizontalGap / 2}% + ${contentInsets.left / 2}px)`,

apps/readest-app/src/app/reader/components/SectionInfo.tsx

@@ -72,11 +72,11 @@ const SectionInfo: React.FC<SectionInfoProps> = ({
           isVertical
             ? {
                 top: `${(contentInsets.top - gridInsets.top) * 1.5}px`,
+                bottom: `${(contentInsets.bottom - gridInsets.bottom) * 1.5}px`,
                 right: showDoubleBorder
                   ? `calc(${contentInsets.right}px)`
                   : `calc(${Math.max(0, contentInsets.right - 32)}px)`,
                 width: showDoubleBorder ? '32px' : `${contentInsets.right}px`,
-                height: `calc(100% - ${contentInsets.top + contentInsets.bottom}px)`,
               }
             : {
                 top: `${topInset}px`,