update responsive featured image for mobile

src/components/FeaturedPost/FeaturedPost.tsx

@@ -1,13 +1,15 @@
-import Link from 'next/link'
 import { Grid, GridItem } from '../Grid/Grid'
 import styled from '@emotion/styled'
 import Post, { PostDataProps, PostSize } from '../Post/Post'
+import useWindowSize from '@/utils/ui.utils'
 
 type Props = {
   post: PostDataProps
 }
 
 const FeaturedPost = ({ post }: Props) => {
+  const { width } = useWindowSize()
+
   return (
     <CustomGrid>
       <GridItem className="w-16">
@@ -18,7 +20,7 @@ const FeaturedPost = ({ post }: Props) => {
               size: PostSize.LARGE,
               imageProps: {
                 fill: true,
-                height: '432px',
+                height: width > 786 ? '432px' : null,
                 nextImageProps: post.coverImage
                   ? {
                       quality: 100,

src/components/Post/Post.tsx

@@ -118,7 +118,7 @@ export default function Post({
         </Title>
       </TitleLink>
     ),
-    [title, size, slug, isFeatured],
+    [title, size, slug],
   )
 
   const _description = useMemo(
@@ -132,7 +132,7 @@ export default function Post({
           {description}
         </Description>
       ),
-    [classType, description, isFeatured],
+    [classType, description, isFeatured, size],
   )
 
   const _thumbnail = useMemo(() => {

src/components/ResponsiveImage/ResponsiveImage.tsx

@@ -4,7 +4,7 @@ import { ImageBlockEnhanced, UnbodyImageBlock } from '@/lib/unbody/unbody.types'
 import styled from '@emotion/styled'
 
 export type ResponsiveImageProps = {
-  height?: number | string
+  height?: number | string | null
   nextImageProps?: Partial<ImageProps>
   fill?: boolean
 }

src/components/Searchbar/Searchbar.tsx

@@ -132,7 +132,7 @@ export default function Searchbar(props: SearchbarProps) {
         )
       }, 130)
     }
-  }, [active, searchScope])
+  }, [active, searchScope, query.length])
 
   const showResultsNumber = resultsNumber !== null && active
   const renderTagFilters = tags.length > 0 && !isArticlePage

src/utils/ui.utils.ts

@@ -100,3 +100,28 @@ export function useIntersectionObserver(
 
   return headingElementsRef
 }
+
+export function useWindowSize() {
+  const [windowSize, setWindowSize] = useState({
+    width: 0,
+    height: 0,
+  })
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      })
+    }
+    window.addEventListener('resize', handleResize)
+    handleResize()
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+  const { width, height } = windowSize
+  return {
+    width,
+    height,
+  }
+}
+
+export default useWindowSize