refactor(nui): Context menu style adjustments

web/src/components/ContextMenu.tsx

@@ -2,6 +2,7 @@ import { useNuiEvent } from "../hooks/useNuiEvent";
 import {
   Box,
   Text,
+  Flex,
   Popover,
   PopoverTrigger,
   Portal,
@@ -41,6 +42,16 @@ debugData<Props>([
           description: "Even cooler vehicle",
           metadata: ["Plate: JGM 971", "Status: In garage"],
         },
+        ["Burger"]: {
+          description: "Make a delicious burger",
+          metadata: {
+            ["Bun"]: 3,
+            ["Lettuce"]: 2,
+            ["Meat"]: 1,
+            ["Tomato"]: 1,
+            ["Cheese"]: 2,
+          },
+        },
       },
     },
   },
@@ -59,15 +70,15 @@ const ContextMenu: React.FC = () => {
   });
 
   return (
-    <Box
+    <Flex
       position="absolute"
-      w="xs"
+      w="75%"
-      h="fit-content"
+      h="80%"
-      maxH="20rem"
+      justifyContent="flex-end"
-      top="20%"
+      alignItems="center"
-      right="25%"
     >
-      <Box borderRadius="md" bg="gray.700" mb={3}>
+      <Box w="xs" h={580}>
+        <Box borderRadius="md" bg="gray.800" mb={3}>
           <Text
             fontFamily="Poppins"
             fontSize="md"
@@ -78,7 +89,7 @@ const ContextMenu: React.FC = () => {
             {contextMenu.title}
           </Text>
         </Box>
-      <Box maxH="33rem" overflowY="scroll">
+        <Box maxH={560} overflowY="scroll">
           {Object.entries(contextMenu.options).map((option, index) => (
             <Popover
               placement="right-start"
@@ -88,7 +99,7 @@ const ContextMenu: React.FC = () => {
             >
               <PopoverTrigger>
                 <Box
-                bg="gray.700"
+                  bg="gray.800"
                   borderRadius="md"
                   h="fit-content"
                   w="100%"
@@ -97,7 +108,7 @@ const ContextMenu: React.FC = () => {
                   fontFamily="Poppins"
                   fontSize="md"
                   transition="300ms"
-                _hover={{ bg: "gray.800" }}
+                  _hover={{ bg: "gray.700" }}
                   key={`option-${index}`}
                 >
                   {/* TODO: react-markdown (?) */}
@@ -112,7 +123,14 @@ const ContextMenu: React.FC = () => {
                     </Box>
                   )}
                   <Portal>
-                  <PopoverContent fontFamily="Poppins" bg="gray.800">
+                    <PopoverContent
+                      fontFamily="Poppins"
+                      bg="gray.800"
+                      outline="none"
+                      border="none"
+                      w="fit-content"
+                      maxW="2xs"
+                    >
                       <PopoverBody>
                         {option[1]?.metadata &&
                         Array.isArray(option[1].metadata) ? (
@@ -142,6 +160,7 @@ const ContextMenu: React.FC = () => {
           ))}
         </Box>
       </Box>
+    </Flex>
   );
 };
 

web/src/components/TextUI.tsx

@@ -38,6 +38,7 @@ const TextUI: React.FC = () => {
       w="100%"
       h="100%"
       p={3}
+      position="absolute"
       alignItems={data.position === "top-center" ? "baseline" : "center"}
       justifyContent={
         data.position === "right-center"

web/src/index.css

@@ -12,6 +12,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   height: 100vh;
   user-select: none;
+  overflow: hidden !important;
 }
 
 #root {