Update MessageBase to show date on new line for mobile screens (#751)

* Update MessageBase to show date on new line for mobile screens * added requested changes
tarasglek · Nov 22, 2024 · 9182252 · 9182252
1 parent 1420fd8
commit 9182252
Showing 1 changed file with 21 additions and 13 deletions.
diff --git a/src/components/Message/MessageBase.tsx b/src/components/Message/MessageBase.tsx
@@ -469,20 +469,28 @@ function MessageBase({
               <Box>{avatar}</Box>
               <Flex direction="column" justify="center">
                 <Flex h="100%" align="center" gap={2}>
-                  <Heading as="h2" size="xs" minW="fit-content">
-                    {heading}
-                  </Heading>
-                  <Text
-                    as="span"
-                    fontSize="sm"
-                    minW="fit-content"
-                    color="gray.500"
-                    _dark={{ color: "gray.300" }}
+                  <Flex
+                    direction={{ base: "column", sm: "row" }} // Stack on mobile, row on larger screens
+                    align={{ base: "flex-start", sm: "center" }} // Align items properly for both views
+                    justify="space-between"
+                    w="100%"
+                    gap={{ base: 0, sm: 2 }}
                   >
-                    <Link as={ReactRouterLink} to={`/c/${chatId}#${id}`}>
-                      {formatDate(date, isNarrowScreen)}
-                    </Link>
-                  </Text>
+                    <Heading as="h2" size="xs" minW="fit-content">
+                      {heading}
+                    </Heading>
+                    <Text
+                      as="span"
+                      fontSize="xs"
+                      minW="fit-content"
+                      color="gray.500"
+                      _dark={{ color: "gray.300" }}
+                    >
+                      <Link as={ReactRouterLink} to={`/c/${chatId}#${id}`}>
+                        {formatDate(date, isNarrowScreen)}
+                      </Link>
+                    </Text>
+                  </Flex>
                   {headingMenu}
                   {!isLoading && settings.countTokens && !!tokens && (
                     <Tag size="sm" variant="outline" colorScheme="gray">