fix header

src/dev/HeaderPreview.jsx

@@ -18,10 +18,7 @@ function ActualHeader() {
         <Header.Logo src={demoLogo} />
 
         <Header.Brand>
-          <Header.Title>سامانه نمونه هوش تجاری</Header.Title>
-          {/* <Header.Description>
-            پیش‌نمایش مستقیم کامپوننت Header از سورس UI Kit
-          </Header.Description>*/}
+          <Header.Title>سامانه مدیریت کاربران</Header.Title>
         </Header.Brand>
       </Header.BrandSection>
 

src/layout/Header.jsx

@@ -34,6 +34,7 @@ function BrandSection({ children, ...props }) {
   return (
     <HStack
       alignItems="center"
+      justifyContent="flex-start"
       h="100%"
       minW={0}
       flex="1"
@@ -64,11 +65,12 @@ function Logo(props) {
 function Brand({ children, ...props }) {
   return (
     <VStack
-      alignItems="start"
+      alignItems="flex-start"
       justifyContent="center"
       h="100%"
       minW={0}
-      flex="1"
+      maxW="100%"
+      flex="0 1 auto"
       spacing={{ base: 0, lg: 1 }}
       {...props}
     >
@@ -80,10 +82,11 @@ function Brand({ children, ...props }) {
 function Title({ children, ...props }) {
   return (
     <Text
-      w="100%"
+      maxW="100%"
       fontWeight="bold"
       fontSize={{ base: "15px", lg: "20px" }}
       lineHeight="short"
+      textAlign="start"
       noOfLines={1}
       {...props}
     >
@@ -95,9 +98,10 @@ function Title({ children, ...props }) {
 function Description({ children, ...props }) {
   return (
     <Text
-      w="100%"
+      maxW="100%"
       fontSize={{ base: "10px", sm: "11px", lg: "16px" }}
       lineHeight={{ base: "shorter", lg: "normal" }}
+      textAlign="start"
       noOfLines={1}
       {...props}
     >