.github/workflows/merge-main-into-main2.yml

@@ -0,0 +1,17 @@
+name: Merge main into main2 on every commit
+on:
+  push:
+    branches:
+      - 'main'
+jobs:
+  merge-branch:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+
+      - name: Merge main -> main2
+        uses: devmasx/merge-branch@master
+        with:
+          type: now
+          target_branch: main2
+          github_token: ${{ github.token }}

web/components/feed/feed-comments.tsx

@@ -109,12 +109,18 @@ export const FeedComment = memo(function FeedComment(props: {
   }
   const totalAwarded = bountiesAwarded ?? 0
 
-  const router = useRouter()
-  const highlighted = router.asPath.endsWith(`#${comment.id}`)
+  const { isReady, asPath } = useRouter()
+  const [highlighted, setHighlighted] = useState(false)
   const commentRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    if (highlighted && commentRef.current != null) {
+    if (isReady && asPath.endsWith(`#${comment.id}`)) {
+      setHighlighted(true)
+    }
+  }, [isReady, asPath, comment.id])
+
+  useEffect(() => {
+    if (highlighted && commentRef.current) {
       commentRef.current.scrollIntoView(true)
     }
   }, [highlighted])
@@ -126,7 +132,7 @@ export const FeedComment = memo(function FeedComment(props: {
       className={clsx(
         'relative',
         indent ? 'ml-6' : '',
-        highlighted ? `-m-1.5 rounded bg-indigo-500/[0.2] p-1.5` : ''
+        highlighted ? `-m-1.5 rounded bg-indigo-500/[0.2] px-2 py-4` : ''
       )}
     >
       {/*draw a gray line from the comment to the left:*/}

web/components/nav/more-button.tsx

@@ -11,13 +11,13 @@ function SidebarButton(props: {
 }) {
   const { text, children } = props
   return (
-    <button className="group flex w-full items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:cursor-pointer hover:bg-gray-100">
+    <div className="group flex w-full items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:cursor-pointer hover:bg-gray-100">
       <props.icon
         className="-ml-1 mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
         aria-hidden="true"
       />
       <span className="truncate">{text}</span>
       {children}
-    </button>
+    </div>
   )
 }