rtl: support rtl for more widgets in sidebar (#504)

apps/readest-app/src/app/reader/components/annotator/AnnotationPopup.tsx

@@ -7,6 +7,7 @@ import { HighlightColor, HighlightStyle } from '@/types/book';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 
 interface AnnotationPopupProps {
+  dir: 'ltr' | 'rtl';
   buttons: Array<{ tooltipText: string; Icon: React.ElementType; onClick: () => void }>;
   position: Position;
   trianglePosition: Position;
@@ -22,6 +23,7 @@ const OPTIONS_HEIGHT_PIX = 28;
 const OPTIONS_PADDING_PIX = 16;
 
 const AnnotationPopup: React.FC<AnnotationPopupProps> = ({
+  dir,
   buttons,
   position,
   trianglePosition,
@@ -35,7 +37,7 @@ const AnnotationPopup: React.FC<AnnotationPopupProps> = ({
   const highlightOptionsHeightPx = useResponsiveSize(OPTIONS_HEIGHT_PIX);
   const highlightOptionsPaddingPx = useResponsiveSize(OPTIONS_PADDING_PIX);
   return (
-    <div>
+    <div dir={dir}>
       <Popup
         width={popupWidth}
         height={popupHeight}

apps/readest-app/src/app/reader/components/annotator/Annotator.tsx

@@ -76,7 +76,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const dictPopupHeight = Math.min(300, maxHeight);
   const transPopupWidth = Math.min(480, maxWidth);
   const transPopupHeight = Math.min(360, maxHeight);
-  const annotPopupWidth = useResponsiveSize(280);
+  const annotPopupWidth = useResponsiveSize(300);
   const annotPopupHeight = useResponsiveSize(44);
   const androidSelectionHandlerHeight = 8;
 
@@ -487,6 +487,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       )}
       {showAnnotPopup && trianglePosition && annotPopupPosition && (
         <AnnotationPopup
+          dir={viewSettings.rtl ? 'rtl' : 'ltr'}
           buttons={buttons}
           position={annotPopupPosition}
           trianglePosition={trianglePosition}