Fix auto read (#1466)

* add height to bottom anchor

* add width to bottom anchor

* add make bottom anchor inline-block

* try mark as read on focus receive

src/app/hooks/useDocumentFocusChange.ts

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+export const useDocumentFocusChange = (onChange: (focus: boolean) => void) => {
+  useEffect(() => {
+    let localFocus = document.hasFocus();
+
+    const handleFocus = () => {
+      if (document.hasFocus()) {
+        if (localFocus) return;
+        localFocus = true;
+        onChange(localFocus);
+      } else if (localFocus) {
+        localFocus = false;
+        onChange(localFocus);
+      }
+    };
+
+    document.addEventListener('focusin', handleFocus);
+    document.addEventListener('focusout', handleFocus);
+    return () => {
+      document.removeEventListener('focusin', handleFocus);
+      document.removeEventListener('focusout', handleFocus);
+    };
+  }, [onChange]);
+};