From 6ff1edb67c1b0e76113b6dd29518984714addbaa Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Wed, 9 Apr 2025 19:03:23 +0800
Subject: [PATCH] fix: no padding top for bookmark ribbon (#851)

---
 .../src/app/reader/components/BooksGrid.tsx   |  4 ++--
 .../src/app/reader/components/Ribbon.tsx      | 22 ++++++++++---------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/BooksGrid.tsx b/apps/readest-app/src/app/reader/components/BooksGrid.tsx
index c5e979fb..6516ea72 100644
--- a/apps/readest-app/src/app/reader/components/BooksGrid.tsx
+++ b/apps/readest-app/src/app/reader/components/BooksGrid.tsx
@@ -27,7 +27,7 @@ interface BooksGridProps {
 const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
   const { appService } = useEnv();
   const { getConfig, getBookData } = useBookDataStore();
-  const { getProgress, getViewState, getViewSettings } = useReaderStore();
+  const { getProgress, getViewState, getViewSettings, hoveredBookKey } = useReaderStore();
   const { isSideBarVisible, sideBarBookKey } = useSidebarStore();
   const { isFontLayoutSettingsDialogOpen, setFontLayoutSettingsDialogOpen } = useSettingsStore();
   const gridTemplate = getGridTemplate(bookKeys.length, window.innerWidth / window.innerHeight);
@@ -73,7 +73,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
               !isSideBarVisible && appService?.hasRoundedWindow && 'rounded-window',
             )}
           >
-            {isBookmarked && <Ribbon width={`${horizontalGapPercent}%`} />}
+            {isBookmarked && !hoveredBookKey && <Ribbon width={`${horizontalGapPercent}%`} />}
             <HeaderBar
               bookKey={bookKey}
               bookTitle={book.title}
diff --git a/apps/readest-app/src/app/reader/components/Ribbon.tsx b/apps/readest-app/src/app/reader/components/Ribbon.tsx
index fae69ba5..ece6eb2e 100644
--- a/apps/readest-app/src/app/reader/components/Ribbon.tsx
+++ b/apps/readest-app/src/app/reader/components/Ribbon.tsx
@@ -5,22 +5,24 @@ interface RibbonProps {
   width: string;
 }
 
-const Ribbon: React.FC<RibbonProps> = ({ width }) => {
+const Ribbon: React.FC<RibbonProps> = ({}) => {
   return (
     <div
-      className={clsx('absolute inset-0 z-10 flex h-11 justify-center')}
-      style={{ width: width }}
+      className={clsx(
+        'fixed inset-0 z-10 flex w-8 justify-center sm:w-6',
+        'h-[calc(env(safe-area-inset-top)+44px)]',
+      )}
     >
       <svg
-        stroke='currentColor'
-        fill='currentColor'
-        strokeWidth='0'
-        version='1'
-        viewBox='0 0 20 45'
-        enableBackground='new 0 0 20 45'
+        width='100%'
+        height='100%'
+        preserveAspectRatio='none'
+        viewBox='0 0 100 100'
         xmlns='http://www.w3.org/2000/svg'
+        shapeRendering='geometricPrecision'
+        imageRendering='optimizeQuality'
       >
-        <path fill='#F44336' d='M 20 45 L 10 35 L 0 45 L 0 0 L 20 0'></path>
+        <polygon fill='#F44336' points='100 100, 50 78, 0 100, 0 0, 100 0' />
       </svg>
     </div>
   );