Add some new requirements to selecting scrollable elements

1. The element must have some height to its bounding rect, this
can prevent strange things like meta tags from being used as the
anchor.

2. The element must be a <p> tag: the intent is to take the user
to a readable position, so this should fit better and eliminates
using things like outer container elements that could span the
entire document.

packages/web/lib/anchorElements.ts

@@ -11,12 +11,16 @@ export const getTopOmnivoreAnchorElement = (
 ): string | undefined => {
   let topVisibleRect: Element | undefined = undefined
   const anchors = Array.from(
-    document.querySelectorAll(`[data-omnivore-anchor-idx]`)
+    document.querySelectorAll(`p[data-omnivore-anchor-idx]`)
   ).reverse()
 
   for (const anchor of anchors) {
     const rect = anchor.getBoundingClientRect()
-    if (rect.top >= 0 && rect.bottom <= articleContentElement.clientHeight) {
+    if (
+      rect.height > 0 &&
+      rect.top >= 50 &&
+      rect.bottom <= articleContentElement.clientHeight
+    ) {
       if (
         topVisibleRect &&
         topVisibleRect.getBoundingClientRect().top < rect.top