Fix width issue for messages on desktop

Also replaced grid with box because it wasn't using any grid props and was just calling an extra element

website/src/components/FlaggableElement.tsx

@@ -3,7 +3,6 @@ import {
   Button,
   Checkbox,
   Flex,
-  Grid,
   Popover,
   PopoverAnchor,
   PopoverArrow,
@@ -146,24 +145,25 @@ export const FlaggableElement = (props: FlaggableElementProps) => {
       isLazy
       lazyBehavior="keepMounted"
     >
-      <Grid display="flex" alignItems="center" gap="2">
+      <Box display="flex" alignItems="center" gap="2">
         <PopoverAnchor>{props.children}</PopoverAnchor>
+
         <Tooltip label="Report" bg="red.500" aria-label="A tooltip">
-          <div>
+          <Box>
             <PopoverTrigger>
               <Box as="button" display="flex" alignItems="center" justifyContent="center" borderRadius="full" p="1">
                 <FiAlertCircle size="20" className="text-red-400" aria-hidden="true" />
               </Box>
             </PopoverTrigger>
-          </div>
+          </Box>
         </Tooltip>
-      </Grid>
+      </Box>
 
       <PopoverContent width="auto" p="3" m="4" maxWidth="calc(100vw - 2rem)">
         <PopoverArrow />
-        <div className="relative h-4">
+        <Box className="relative h-4">
           <PopoverCloseButton />
-        </div>
+        </Box>
         <PopoverBody>
           {report.label_values.map(({ label, checked, value }, i) => (
             <FlagCheckbox

website/src/components/Messages/MessageTableEntry.tsx

@@ -19,7 +19,7 @@ export function MessageTableEntry(props: MessageTableEntryProps) {
 
   return (
     <FlaggableElement message={item}>
-      <HStack w="100%" gap={2}>
+      <HStack w={["full", "full", "full", "fit-content"]} gap={2}>
         <Box borderRadius="full" border="solid" borderWidth="1px" borderColor={borderColor} bg={avatarColor}>
           <Avatar
             size="sm"
@@ -28,21 +28,20 @@ export function MessageTableEntry(props: MessageTableEntryProps) {
           />
         </Box>
         {props.enabled ? (
-          <Box maxWidth="xl">
+          <Box width={["full", "full", "full", "fit-content"]} maxWidth={["full", "full", "full", "2xl"]}>
             <Link href={`/messages/${item.id}`}>
-              <LinkBox
-                bg={item.is_assistant ? backgroundColor : backgroundColor2}
-                className={`p-4 rounded-md whitespace-pre-wrap w-full`}
-              >
+              <LinkBox bg={item.is_assistant ? backgroundColor : backgroundColor2} p="4" borderRadius="md">
                 {item.text}
               </LinkBox>
             </Link>
           </Box>
         ) : (
           <Box
-            maxWidth="xl"
+            width={["full", "full", "full", "fit-content"]}
+            maxWidth={["full", "full", "full", "2xl"]}
             bg={item.is_assistant ? backgroundColor : backgroundColor2}
-            className={`p-4 rounded-md whitespace-pre-wrap w-full`}
+            p="4"
+            borderRadius="md"
           >
             {item.text}
           </Box>