Update MessageBase to show date on new line for mobile screens

[hpatel292-seneca]

This Fixes #747

I added a Flex component around heading and date and set direction of flex to row for sm screens

                 <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={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" }}
                    >
                      <Link as={ReactRouterLink} to={`/c/${chatId}#${id}`}>
                        {formatDate(date, isNarrowScreen)}
                      </Link>
                    </Text>
                  </Flex>

Demo:

[hpatel292-seneca]

Hi @humphd @tarasglek, Please review the PR and let me know if any changes are required.

[humphd]

Nice. A few things I notice:

Font Too Large, Vertical Gap Too Large

I think we can reduce the font size of the date, and amount of space between the two stacked divs:

Vertically Centre Star Icon

I wonder if we should vertically centre the star icon on mobile? It seems to be unaligned with anything now

[cloudflare-workers-and-pages]

Deploying chatcraft-org with    Cloudflare Pages

Latest commit:	cc4f800
Status:	✅  Deploy successful!
Preview URL:	https://5e9d33b6.console-overthinker-dev.pages.dev
Branch Preview URL:	https://issue-747.console-overthinker-dev.pages.dev

View logs

[hpatel292-seneca]

Hi @humphd ,
I made the changes, Please review.

Demo:

[humphd]

nit: prefer putting comments above vs. to the right of content, so lines don't extend horizontally. Vertical > horizontal.

[humphd]

This is really nice, great work!