Merge remote-tracking branch 'origin/main' into user_menu_fix

website/src/components/FlaggableElement.tsx

@@ -3,7 +3,6 @@ import {
   Button,
   Checkbox,
   Flex,
-  Grid,
   Popover,
   PopoverAnchor,
   PopoverArrow,
@@ -15,7 +14,6 @@ import {
   SliderFilledTrack,
   SliderThumb,
   SliderTrack,
-  Spacer,
   Tooltip,
   useBoolean,
   useColorMode,
@@ -23,6 +21,7 @@ import {
   useId,
 } from "@chakra-ui/react";
 import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
+import clsx from "clsx";
 import { useEffect, useReducer } from "react";
 import { FiAlertCircle } from "react-icons/fi";
 import { get, post } from "src/lib/api";
@@ -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="fit-content" p="3">
+      <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
@@ -207,9 +207,9 @@ export function FlagCheckbox(props: FlagCheckboxProps): JSX.Element {
   let AdditionalExplanation = null;
   if (props.label.help_text) {
     AdditionalExplanation = (
-      <a href="#" className="group flex items-center space-x-2.5 text-sm ">
+      <a href="#" className="text-sm inline group leading-4">
         <QuestionMarkCircleIcon
-          className="flex h-5 w-5 ml-3 text-gray-400 group-hover:text-gray-500"
+          className="h-5 w-5 ml-1 text-gray-400 group-hover:text-gray-500 inline"
           aria-hidden="true"
         />
       </a>
@@ -221,23 +221,30 @@ export function FlagCheckbox(props: FlagCheckboxProps): JSX.Element {
 
   const labelTextClass =
     colorMode === "light"
-      ? `text-${colors.light.text} hover:text-blue-700 float-left`
-      : `text-${colors.dark.text} hover:text-blue-400 float-left`;
+      ? `text-${colors.light.text} hover:text-blue-700`
+      : `text-${colors.dark.text} hover:text-blue-400`;
 
   return (
-    <Flex gap="2">
-      <Checkbox
-        id={id}
-        isChecked={props.checked}
-        onChange={(e) => {
-          props.checkboxHandler(e.target.checked, props.idx);
-        }}
-      />
-      <label className="text-sm form-check-label" htmlFor={id}>
-        <span className={labelTextClass}>{props.label.display_text}</span>
-        {AdditionalExplanation}
-      </label>
-      <Spacer />
+    <Flex gap="4" justifyContent="space-between" className="my-2">
+      <div className="flex items-start align-middle">
+        <Checkbox
+          id={id}
+          isChecked={props.checked}
+          onChange={(e) => {
+            props.checkboxHandler(e.target.checked, props.idx);
+          }}
+        />
+        <label
+          className={clsx(
+            "text-sm form-check-label ml-2 break-all inline align-middle first-line:leading-4",
+            labelTextClass
+          )}
+          htmlFor={id}
+        >
+          {props.label.display_text}
+          {AdditionalExplanation}
+        </label>
+      </div>
       <div
         onClick={() => {
           if (!props.checked) {

website/src/components/Layout.tsx

@@ -54,6 +54,7 @@ export const getDashboardLayout = (page: React.ReactElement) => (
     >
       {page}
     </SideMenuLayout>
+    <Footer />
   </div>
 );
 

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>

website/src/components/UsersCell.tsx

@@ -15,6 +15,7 @@ import {
 import Link from "next/link";
 import { useState } from "react";
 import { get } from "src/lib/api";
+import type { User } from "src/types/Users";
 import useSWR from "swr";
 
 /**
@@ -22,7 +23,7 @@ import useSWR from "swr";
  */
 const UsersCell = () => {
   const [pageIndex, setPageIndex] = useState(0);
-  const [users, setUsers] = useState([]);
+  const [users, setUsers] = useState<User[]>([]);
 
   // Fetch and save the users.
   // This follows useSWR's recommendation for simple pagination:
@@ -53,21 +54,23 @@ const UsersCell = () => {
           <Thead>
             <Tr>
               <Th>Id</Th>
-              <Th>Email</Th>
+              <Th>Auth Id</Th>
+              <Th>Auth Method</Th>
               <Th>Name</Th>
               <Th>Role</Th>
               <Th>Update</Th>
             </Tr>
           </Thead>
           <Tbody>
-            {users.map((user, index) => (
-              <Tr key={index}>
-                <Td>{user.id}</Td>
-                <Td>{user.email}</Td>
-                <Td>{user.name}</Td>
-                <Td>{user.role}</Td>
+            {users.map(({ id, user_id, auth_method, display_name, role }) => (
+              <Tr key={user_id}>
+                <Td>{user_id}</Td>
+                <Td>{id}</Td>
+                <Td>{auth_method}</Td>
+                <Td>{display_name}</Td>
+                <Td>{role}</Td>
                 <Td>
-                  <Link href={`/admin/manage_user/${user.id}`}>Manage</Link>
+                  <Link href={`/admin/manage_user/${user_id}`}>Manage</Link>
                 </Td>
               </Tr>
             ))}