scroll only if the entry doesn't entirely fit on screen (same as commafeed v1)

commafeed-client/src/app/constants.ts

@@ -8,6 +8,8 @@ export const Constants = {
         mobileBreakpoint: DEFAULT_THEME.breakpoints.md,
         headerHeight: 60,
         sidebarWidth: 350,
+        isTopVisible: (div: HTMLDivElement) => div.getBoundingClientRect().top >= Constants.layout.headerHeight,
+        isBottomVisible: (div: HTMLDivElement) => div.getBoundingClientRect().bottom <= window.innerHeight,
     },
     dom: {
         mainScrollAreaId: "main-scroll-area-id",

commafeed-client/src/components/content/FeedEntries.tsx

@@ -52,8 +52,7 @@ export function FeedEntries() {
         if (selectedEntry) {
             if (selectedEntry.expanded) {
                 const ref = refs.current[selectedEntry.id]
-                const bottomVisible = ref.getBoundingClientRect().bottom <= window.innerHeight
-                if (bottomVisible) {
+                if (Constants.layout.isBottomVisible(ref)) {
                     dispatch(selectNextEntry())
                 } else {
                     const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
@@ -73,8 +72,7 @@ export function FeedEntries() {
         if (selectedEntry) {
             if (selectedEntry.expanded) {
                 const ref = refs.current[selectedEntry.id]
-                const topVisible = ref.getBoundingClientRect().top >= Constants.layout.headerHeight
-                if (topVisible) {
+                if (Constants.layout.isTopVisible(ref)) {
                     dispatch(selectPreviousEntry())
                 } else {
                     const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)

commafeed-client/src/components/content/FeedEntry.tsx

@@ -58,6 +58,7 @@ export function FeedEntry(props: FeedEntryProps) {
         setTimeout(() => {
             if (!ref.current) return
             if (!props.expanded) return
+            if (Constants.layout.isTopVisible(ref.current) && Constants.layout.isBottomVisible(ref.current)) return
 
             document.getElementById(Constants.dom.mainScrollAreaId)?.scrollTo({
                 // having a small gap between the top of the content and the top of the page is sexier