fix header again

src/layout/Header.jsx

@@ -8,17 +8,22 @@ function HeaderRoot({ children, ...props }) {
     <Box
       as="header"
       w="100%"
-      h="110px"
+      h={{ base: "64px", lg: "110px" }}
+      flexShrink={0}
       borderBottom="1px"
       borderColor="gray.200"
       bg="#4299E1"
-      px="20px"
-      zIndex={10}
-      position="fixed"
+      px={{ base: 3, sm: 4, lg: "20px" }}
       color="white"
       {...props}
     >
-      <HStack h="100%" alignItems="center" justifyContent="space-between">
+      <HStack
+        h="100%"
+        w="100%"
+        minW={0}
+        alignItems="center"
+        justifyContent="space-between"
+      >
         {children}
       </HStack>
     </Box>
@@ -27,14 +32,33 @@ function HeaderRoot({ children, ...props }) {
 
 function BrandSection({ children, ...props }) {
   return (
-    <HStack alignItems="center" h="100%" py="10px" {...props}>
+    <HStack
+      alignItems="center"
+      h="100%"
+      minW={0}
+      flex="1"
+      spacing={{ base: 2.5, lg: 3 }}
+      py={{ base: "6px", lg: "10px" }}
+      {...props}
+    >
       {children}
     </HStack>
   );
 }
 
 function Logo(props) {
-  return <Image loading="lazy" alt="logo" maxW="80px" maxH="80px" {...props} />;
+  return (
+    <Image
+      loading="lazy"
+      alt="logo"
+      w={{ base: "46px", lg: "80px" }}
+      maxW={{ base: "46px", lg: "80px" }}
+      maxH={{ base: "48px", lg: "80px" }}
+      objectFit="contain"
+      flexShrink={0}
+      {...props}
+    />
+  );
 }
 
 function Brand({ children, ...props }) {
@@ -43,7 +67,9 @@ function Brand({ children, ...props }) {
       alignItems="start"
       justifyContent="center"
       h="100%"
-      spacing={1}
+      minW={0}
+      flex="1"
+      spacing={{ base: 0, lg: 1 }}
       {...props}
     >
       {children}
@@ -53,27 +79,60 @@ function Brand({ children, ...props }) {
 
 function Title({ children, ...props }) {
   return (
-    <Text fontWeight="bold" fontSize="20px" {...props}>
+    <Text
+      w="100%"
+      fontWeight="bold"
+      fontSize={{ base: "15px", lg: "20px" }}
+      lineHeight="short"
+      noOfLines={1}
+      {...props}
+    >
       {children}
     </Text>
   );
 }
 
 function Description({ children, ...props }) {
-  return <Text {...props}>{children}</Text>;
+  return (
+    <Text
+      w="100%"
+      fontSize={{ base: "10px", sm: "11px", lg: "16px" }}
+      lineHeight={{ base: "shorter", lg: "normal" }}
+      noOfLines={1}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
 }
 
 function Bi({ logoSrc = biLogo, ...props }) {
   return (
     <VStack
       w="fit-content"
+      flexShrink={0}
       alignItems="center"
       justifyContent="center"
-      py="10px"
+      spacing={{ base: 0, lg: 1 }}
+      py={{ base: "6px", lg: "10px" }}
       {...props}
     >
-      <Image src={logoSrc} loading="lazy" maxW="90px" />
-      <Text fontSize="xs" fontWeight="bold" textAlign="center">
+      <Image
+        src={logoSrc}
+        alt="نشان مؤسسه باقرالعلوم"
+        loading="lazy"
+        w={{ base: "38px", lg: "90px" }}
+        maxH={{ base: "46px", lg: "72px" }}
+        objectFit="contain"
+      />
+
+      <Text
+        display={{ base: "none", lg: "block" }}
+        fontSize="xs"
+        fontWeight="bold"
+        textAlign="center"
+        whiteSpace="nowrap"
+      >
         مؤسسه تولید سیستم‌های خبره و هوشمند اسلامی باقرالعلوم(ع)
       </Text>
     </VStack>