Bugfix wave 1

Add `xs` viewport
Add scroll into view on search bar click / focus / highlight
Fix tablet visualization of some cards
Fix responsiveness of homepage texts
Fix highlight animation not being removed

Author: Giuseppetm

components/course-card/index.tsx

@@ -36,8 +36,8 @@ const CourseCard: React.FC<CourseCardProps> = ({ data }) => {
       position="relative"
       _hover={{ shadow: "md" }}
       bg={useColorModeValue("gray.50", "gray.700")}
-      w={{ base: "full", lg: "178px" }}
-      h={{ base: "72px", lg: "160px" }}
+      w={{ base: "full", md: "178px" }}
+      h={{ base: "72px", md: "160px" }}
       p={4}
     >
       {/* Mobile: titolo + chevron */}
@@ -68,7 +68,7 @@ const CourseCard: React.FC<CourseCardProps> = ({ data }) => {
 
       {/* Tag anno */}
       <Tag
-        display={{ base: "none", lg: "flex" }}
+        display={{ base: "none", md: "flex" }}
         position="absolute"
         bottom={2}
         left="50%"
@@ -107,7 +107,7 @@ const CourseCard: React.FC<CourseCardProps> = ({ data }) => {
         w="100%"
         h="100%"
         bg={overlayBg}
-        display={{ base: "none", lg: "flex" }}
+        display={{ base: "none", md: "flex" }}
         flexDir="column"
         justifyContent="center"
         alignItems="center"

components/degree-card/index.tsx

@@ -1,7 +1,7 @@
 import React from "react"
-import { Box, Flex, Text, HStack, useColorModeValue, Image, Link as ChakraLink, Stack } from "@chakra-ui/react"
+import { Box, Flex, Text, HStack, useColorModeValue, Link as ChakraLink, Stack } from "@chakra-ui/react"
 import { motion } from "framer-motion"
-import { ArrowUpRight, ChevronRight } from "lucide-react"
+import { ArrowRight, ArrowUpRight } from "lucide-react"
 import { Degree } from "@/types/api"
 import { useCustomRouter } from "@/hooks/router"
 import { getDegreeLabel } from "@/utils/degree"
@@ -50,12 +50,13 @@ const DegreeCard: React.FC<DegreeCardProps> = ({ degree, bgColor }) => {
               {description}
             </Text>
           </Stack>
-          <ChevronRight size={18} strokeWidth={2} />
+          <Box>
+            <ArrowRight size={18} strokeWidth={2} />
+          </Box>
         </HStack>
 
         {/* Desktop: icona + titolo + descrizione */}
         <Flex direction="column" justify="center" align="flex-start" w="full" h="full" display={{ base: "none", md: "flex" }} p={2}>
-          {degree.icon && <Image src={degree.icon} alt={degree.name} boxSize="40px" mb={2} objectFit="contain" />}
           <Text fontWeight="bold" fontSize="md" noOfLines={3} mb={0.5}>
             {degree.name}
           </Text>

components/degree-group-card/index.tsx

@@ -33,12 +33,12 @@ const DegreeGroupCard: React.FC<DegreeGroupCardProps> = ({ degree, group }) => {
       position="relative"
       _hover={{ shadow: "md" }}
       bgGradient={useColorModeValue("linear(to-br, blue.400, blue.500, blue.600)", "linear(to-br, blue.600, blue.700, blue.800)")}
-      w={{ base: "full", lg: "178px" }}
-      h={{ base: "72px", lg: "160px" }}
+      w={{ base: "full", md: "178px" }}
+      h={{ base: "72px", md: "160px" }}
       p={4}
     >
       {/* Mobile: titolo + chevron */}
-      <HStack w="full" h="full" align="center" justify="space-between" display={{ base: "flex", lg: "none" }}>
+      <HStack w="full" h="full" align="center" justify="space-between" display={{ base: "flex", md: "none" }}>
         <Text fontWeight="semibold" fontSize="md" noOfLines={1} color={titleColor}>
           {t("degreeGroup.main")}
         </Text>
@@ -53,7 +53,7 @@ const DegreeGroupCard: React.FC<DegreeGroupCardProps> = ({ degree, group }) => {
         w="full"
         h="full"
         spacing={"2px"}
-        display={{ base: "none", lg: "flex" }}
+        display={{ base: "none", md: "flex" }}
         p={2}
         opacity={1}
         transition="opacity 0.3s ease"

components/item-list/index.tsx

@@ -120,7 +120,7 @@ const ItemList = <T,>({
       )}
 
       {filteredItems.length > 0 ? (
-        <Stack direction={itemsDirection ?? { base: "column", sm: "row" }} flexWrap="wrap" justifyContent={{ base: "center", lg: "flex-start" }}>
+        <Stack direction={itemsDirection ?? { base: "column", md: "row" }} flexWrap="wrap" justifyContent={{ base: "center", lg: "flex-start" }}>
           {filteredItems}
         </Stack>
       ) : (

components/search-bar/index.tsx

@@ -1,4 +1,3 @@
-"use client"
 import { useState, useEffect, useRef } from "react"
 import { InputGroup, InputLeftElement, Input, VStack, Text, useColorModeValue, InputRightElement, Button, Fade, StackProps } from "@chakra-ui/react"
 import { Search } from "lucide-react"
@@ -27,6 +26,13 @@ const SearchBar = ({ enableLabel = true, sidebarMode = false, onSearch, focusOnO
   const tipColor = useColorModeValue("blue.600", "blue.300")
   const labelColor = useColorModeValue("gray.500", "gray.400")
 
+  const handleFocus = () => {
+    inputRef.current?.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+    })
+  }
+
   const handleSearch = () => {
     if (query.trim()) {
       router.push(`/search?q=${query}`)
@@ -36,15 +42,21 @@ const SearchBar = ({ enableLabel = true, sidebarMode = false, onSearch, focusOnO
 
   const handleHighlight = () => {
     setHighlight(true)
+    handleFocus()
     setTimeout(() => {
       inputRef.current?.focus()
     }, 500)
+
+    setTimeout(() => {
+      setHighlight(false)
+    }, 1500)
   }
 
   useEffect(() => {
     if (inputRef.current && focusOnOpen) {
       setTimeout(() => {
         inputRef.current?.focus()
+        handleFocus()
       }, 300)
     }
   }, [focusOnOpen])
@@ -57,7 +69,7 @@ const SearchBar = ({ enableLabel = true, sidebarMode = false, onSearch, focusOnO
   return (
     <VStack spacing={3} w="100%" maxW="700px" mx="auto" py={8} {...props} id="search-bar">
       {enableLabel && (
-        <Text fontSize="lg" fontWeight="semibold" color={labelColor} textAlign="center">
+        <Text fontSize={{ base: "md", md: "lg" }} fontWeight="semibold" color={labelColor} textAlign="center">
           {t("searchBar.label")}
         </Text>
       )}
@@ -73,7 +85,7 @@ const SearchBar = ({ enableLabel = true, sidebarMode = false, onSearch, focusOnO
           value={query}
           onChange={(e) => setQuery(e.target.value)}
           placeholder={!sidebarMode ? t("searchBar.placeholder.main") : t("searchBar.placeholder.sidebar")}
-          fontSize={!sidebarMode ? "lg" : "sm"}
+          fontSize={{ base: sidebarMode ? "sm" : "md", md: "md", lg: "lg" }}
           bg={bg}
           _focus={{ bg: focusBg }}
           _placeholder={{ color: placeholderColor }}
@@ -86,11 +98,18 @@ const SearchBar = ({ enableLabel = true, sidebarMode = false, onSearch, focusOnO
           onKeyDown={(e) => {
             if (e.key === "Enter") handleSearch()
           }}
+          onClick={() => handleFocus()}
         />
 
         {/* Bottone ricerca */}
         <InputRightElement w="5.5rem" h="100%">
-          <Button colorScheme="blue" size={!sidebarMode ? "sm" : "xs"} fontSize={!sidebarMode ? "sm" : "xs"} rounded="md" onClick={handleSearch}>
+          <Button
+            colorScheme="blue"
+            size={sidebarMode ? "xs" : { base: "xs", xs: "sm" }}
+            fontSize={!sidebarMode ? "sm" : "xs"}
+            rounded="md"
+            onClick={handleSearch}
+          >
             {t("searchBar.button")}
           </Button>
         </InputRightElement>

components/service/card/index.tsx

@@ -20,7 +20,7 @@ export default function ServiceCard({ service }: ServiceCardProps) {
     <Link href={service.link} target="_blank" rel="noopener noreferrer" prefetch={false}>
       <Box
         role="group"
-        w={{ base: "100%", sm: "230px", md: "250px" }}
+        w={{ base: "100%", sm: "full", md: "250px" }}
         h={{ base: "100px", md: "270px" }}
         borderWidth="1px"
         borderRadius="2xl"

pages/index.tsx

@@ -28,7 +28,7 @@ const Homepage = ({ groups, associations }: HomepageProps) => {
 
       <MainContainer>
         <Box pt={12}>
-          <Heading as="h1" size="4xl" mb={3} textAlign="center">
+          <Heading as="h1" size={{ base: "3xl", lg: "4xl" }} mb={3} textAlign="center">
             {t("networkTagline")}
           </Heading>
 

pages/search/index.tsx

@@ -71,7 +71,7 @@ const SearchPage = ({ query, degrees, groups, associations }: SearchPageProps) =
               items={associations}
               getItemName={(association) => association.title}
               renderItem={(association) => (
-                <PrivacyButton key={association.id} href={association.invite_link}>
+                <PrivacyButton key={association.id} href={association.external_url}>
                   <GroupCard title={association.name[locale]} description={association.description[locale]} category={association.category} />
                 </PrivacyButton>
               )}

styles/index.ts

@@ -7,6 +7,14 @@ const config: ThemeConfig = {
 
 export const theme = extendTheme({
   config,
+  breakpoints: {
+    xs: "22.5rem", // 360px
+    sm: "30rem", // 480px
+    md: "48rem", // 768px
+    lg: "62rem", // 992px
+    xl: "80rem", // 1280px
+    "2xl": "96rem", // 1536px
+  },
   styles: {
     global: {
       "html, body, #__next": {

types/api.ts

@@ -72,7 +72,7 @@ export interface ExtraGroup extends Group {
   user_count: number
   button_name: LocalizedField | null
   image_url: string | null
-  external_url: string | null
+  external_url: string
   category: GroupCategory
 }