visual cleanup

website/src/components/Messages/MessageWithChildren.tsx

@@ -1,18 +1,33 @@
-import { Box, CircularProgress, Flex, HStack, Text } from "@chakra-ui/react";
+import { Box, CircularProgress, Flex, HStack, StackDivider, Text, TextProps, StackProps } from "@chakra-ui/react";
 import { useState } from "react";
 import useSWR from "swr";
 
 import fetcher from "src/lib/fetcher";
 import { MessageTableEntry } from "./MessageTableEntry";
+import { boolean } from "boolean";
+
+const MessageHeaderProps: TextProps = {
+  align: "center",
+  fontSize: "xl",
+  py: "2",
+};
+
+const MessageStackProps: StackProps = {
+  spacing: "2",
+  alignItems: "start",
+  justifyContent: "center",
+  divider: <StackDivider />,
+};
 
 interface MessageWithChildrenProps {
   id: string;
   depth?: number;
   maxDepth?: number;
+  isOnlyChild?: boolean;
 }
 
 export function MessageWithChildren(props: MessageWithChildrenProps) {
-  const { id, depth, maxDepth } = props;
+  const { id, depth, maxDepth, isOnlyChild = true } = props;
 
   const [message, setMessage] = useState(null);
   const [children, setChildren] = useState(null);
@@ -35,6 +50,8 @@ export function MessageWithChildren(props: MessageWithChildrenProps) {
   });
 
   const renderRecursive = maxDepth && ((depth && depth < maxDepth) || !depth);
+  const isFirst = depth === 0 || !depth;
+  const isFirstOrOnly = isFirst || boolean(isOnlyChild);
 
   if (isLoading || isLoadingChildren) {
     return <CircularProgress isIndeterminate />;
@@ -44,12 +61,10 @@ export function MessageWithChildren(props: MessageWithChildrenProps) {
     <>
       {message && (
         <>
-          <Text align="center" fontSize="xl">
-            {depth === 0 || !depth ? "Message" : depth === 1 ? "Children" : "Ancestor"}
-          </Text>
-          <Flex justifyContent="center">
-            <Box maxWidth="container.sm" flex="1" px={[4, 6, 8, 9]}>
-              <Box rounded="lg" p="2">
+          <Text {...MessageHeaderProps}>{isFirst ? "Message" : depth === 1 ? "Children" : "Ancestor"}</Text>
+          <Flex justifyContent="center" pb="2">
+            <Box maxWidth="container.sm" flex="1" px={isFirstOrOnly ? [4, 6, 8, 9] : "0"}>
+              <Box px={isFirstOrOnly ? "2" : "0"}>
                 <MessageTableEntry item={message} idx={1} />
               </Box>
             </Box>
@@ -58,24 +73,25 @@ export function MessageWithChildren(props: MessageWithChildrenProps) {
       )}
       {children && Array.isArray(children) && children.length > 0 ? (
         renderRecursive ? (
-          <HStack spacing={8} alignItems="start" justifyContent="center">
+          <HStack {...MessageStackProps}>
             {children.map((item, idx) => (
               <Box flex="1" key={`recursiveMessageWChildren_${idx}`}>
-                <MessageWithChildren id={item.id} depth={depth ? depth + 1 : 1} maxDepth={maxDepth} />
+                <MessageWithChildren
+                  id={item.id}
+                  depth={depth ? depth + 1 : 1}
+                  maxDepth={maxDepth}
+                  isOnlyChild={children.length === 1 && isOnlyChild}
+                />
               </Box>
             ))}
           </HStack>
         ) : (
           <>
-            <Text align="center" fontSize="xl">
-              {depth === 0 || !depth ? "Children" : "Ancestor"}
-            </Text>
-            <HStack spacing={8} alignItems="start" justifyContent="center">
+            <Text {...MessageHeaderProps}>{isFirstOrOnly ? "Children" : "Ancestor"}</Text>
+            <HStack {...MessageStackProps}>
               {children.map((item, idx) => (
-                <Box maxWidth="container.sm" flex="1" px={[4, 6, 8, 9]} key={idx}>
-                  <Box rounded="lg" p="2">
-                    <MessageTableEntry item={item} idx={idx * 2} />
-                  </Box>
+                <Box maxWidth="container.sm" flex="1" key={`recursiveMessageWChildren_${idx}`}>
+                  <MessageTableEntry item={item} idx={idx * 2} />
                 </Box>
               ))}
             </HStack>

website/src/pages/messages/[id]/index.tsx

@@ -48,7 +48,7 @@ const MessageDetail = ({ id }) => {
             </>
           )}
         </Container>
-        <Box pb="4">
+        <Box pb="4" maxW="full" px="2">
           <MessageWithChildren id={id} maxDepth={2} />
         </Box>
       </main>