diff --git a/packages/web/components/patterns/HighlightBar.tsx b/packages/web/components/patterns/HighlightBar.tsx
index 1af77a63b..5e21a393e 100644
--- a/packages/web/components/patterns/HighlightBar.tsx
+++ b/packages/web/components/patterns/HighlightBar.tsx
@@ -48,6 +48,7 @@ export function HighlightBar(props: HighlightBarProps): JSX.Element {
zIndex: 999,
...(props.displayAtBottom && {
bottom: 'calc(38px + env(safe-area-inset-bottom, 40px))',
+ left: `calc(50% - ${(props.isNewHighlight ? 295 : 323) / 2}px)`
}),
...(props.displayAtBottom && {
'@smDown': {
diff --git a/packages/web/components/templates/article/pdf.js/PdfToolbar.tsx b/packages/web/components/templates/article/pdf.js/PdfToolbar.tsx
index c5b0dee66..1c83f5abc 100644
--- a/packages/web/components/templates/article/pdf.js/PdfToolbar.tsx
+++ b/packages/web/components/templates/article/pdf.js/PdfToolbar.tsx
@@ -119,6 +119,9 @@ export default function PdfToolbar(props: PdfArticleToolbarProps): JSX.Element {
css={{
borderTopLeftRadius: '10px',
borderBottomLeftRadius: '10px',
+ '@media only screen and (min-device-width: 20em) and (max-device-width: 30em)': {
+ display: 'none'
+ }
}}
>
@@ -135,6 +138,9 @@ export default function PdfToolbar(props: PdfArticleToolbarProps): JSX.Element {
borderTopRightRadius: '10px',
borderBottomRightRadius: '10px',
backgroundColor: '$thBackground5',
+ '@media only screen and (min-device-width: 20em) and (max-device-width: 30em)': {
+ display: 'none'
+ }
}}
>
diff --git a/packages/web/components/templates/article/pdf.js/PdfViewer.tsx b/packages/web/components/templates/article/pdf.js/PdfViewer.tsx
index dcc888cab..84a012c26 100644
--- a/packages/web/components/templates/article/pdf.js/PdfViewer.tsx
+++ b/packages/web/components/templates/article/pdf.js/PdfViewer.tsx
@@ -307,15 +307,21 @@ export default function PdfViewer(props: PdfArticleContainerProps) {
}
if (props.containerRef?.current) {
- props.containerRef.current.addEventListener(
- 'mouseup',
- detectHighlightedText
- )
+ const isTouch = isTouchScreenDevice()
- props.containerRef.current.addEventListener(
- 'touchend',
- detectHighlightedText
- )
+ if (!isTouch) {
+ props.containerRef.current.addEventListener(
+ 'mouseup',
+ detectHighlightedText
+ )
+ }
+
+ if (isTouch) {
+ props.containerRef.current.addEventListener(
+ 'touchend',
+ detectHighlightedText
+ )
+ }
}
return () => {
@@ -384,7 +390,6 @@ export default function PdfViewer(props: PdfArticleContainerProps) {
props.containerRef.current.clientHeight) /
props.containerRef.current.scrollHeight
- console.log(currentPageNum, props.saveLatestPage)
await props.articleMutations.articleReadingProgressMutation({
id: props.article.id,
readingProgressTopPercent: bottomProgress * 100,
diff --git a/packages/web/components/templates/article/pdf.js/Style.tsx b/packages/web/components/templates/article/pdf.js/Style.tsx
index 463533e1b..154f128f0 100644
--- a/packages/web/components/templates/article/pdf.js/Style.tsx
+++ b/packages/web/components/templates/article/pdf.js/Style.tsx
@@ -35,6 +35,12 @@ export const PageInput = styled('input', {
borderLeft: '0px',
borderRight: '1px',
backgroundColor: '$thBackground5',
+ '@media only screen and (min-device-width: 20em) and (max-device-width: 30em)': {
+ paddingLeft: '1px',
+ paddingRight: '1px',
+ width: '20px',
+ border: '0px',
+ }
})
export const SearchInput = styled('input', {