layout: fix dragbar flickering when opening a book (#2177)

apps/readest-app/src/app/reader/components/notebook/Notebook.tsx

@@ -230,7 +230,7 @@ const Notebook: React.FC = ({}) => {
           }
         `}</style>
         <div
-          className='drag-bar absolute -left-2 top-0 h-full w-0.5 cursor-col-resize bg-transparent p-2'
+          className='drag-bar bg-base-100 absolute -left-2 top-0 h-full w-0.5 cursor-col-resize p-2'
           role='slider'
           tabIndex={0}
           aria-label={_('Resize Notebook')}

apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx

@@ -293,7 +293,7 @@ const SideBar: React.FC<{
         )}
         <div
           className={clsx(
-            'drag-bar absolute -right-2 top-0 h-full w-0.5 cursor-col-resize bg-transparent p-1',
+            'drag-bar bg-base-100 absolute -right-2 top-0 h-full w-0.5 cursor-col-resize p-1',
             isMobile && 'hidden',
           )}
           role='slider'

apps/readest-app/src/app/reader/components/sidebar/TOCItem.tsx

@@ -137,6 +137,7 @@ export const StaticListRow: React.FC<ListRowProps> = ({
         'border-base-300 w-full border-b sm:border-none',
         'pe-4 ps-2 pt-[1px] sm:pe-2',
       )}
+      title={flatItem.item.label || ''}
     >
       <TOCItemView
         bookKey={bookKey}
@@ -166,7 +167,7 @@ export const VirtualListRow: React.FC<
   const flatItem = flatItems[index];
 
   return (
-    <div style={style}>
+    <div style={style} title={flatItem.item.label || ''}>
       <StaticListRow
         bookKey={bookKey}
         flatItem={flatItem}