Fix right menu position and a typo

components/AppShelf/AppShelf.tsx

@@ -4,11 +4,12 @@ import {
   Text,
   AspectRatio,
   createStyles,
-  Center,
   SimpleGrid,
   Card,
   useMantineTheme,
   Image,
+  Group,
+  Space,
 } from '@mantine/core';
 import AppShelfMenu from './AppShelfMenu';
 import AddItemShelfItem from './AddAppShelfItem';
@@ -60,6 +61,7 @@ export function AppShelfItem(props: any) {
   const [hovering, setHovering] = useState(false);
   return (
     <motion.div
+      key={service.name}
       onHoverStart={(e) => {
         setHovering(true);
       }}
@@ -74,19 +76,35 @@ export function AppShelfItem(props: any) {
         }}
         radius="md"
       >
-        <motion.div
-          animate={{
-            opacity: hovering ? 1 : 0,
-          }}
-        >
-          <AppShelfMenu name={service.name} removeitem={removeService} />
-        </motion.div>
         <Card.Section>
-          <Center>
+          <Group position="apart" mx="lg">
-            <Text mt="sm" weight={500}>
+            <Space />
+            <Text
+              // TODO: #1 Remove this hack to get the text to be centered.
+              ml={15}
+              style={{
+                alignSelf: 'center',
+                alignContent: 'center',
+                alignItems: 'center',
+                justifyContent: 'center',
+                justifyItems: 'center',
+              }}
+              mt="sm"
+              weight={500}
+            >
               {service.name}
             </Text>
-          </Center>
+            <motion.div
+              style={{
+                alignSelf: 'flex-end',
+              }}
+              animate={{
+                opacity: hovering ? 1 : 0,
+              }}
+            >
+              <AppShelfMenu name={service.name} removeitem={removeService} />
+            </motion.div>
+          </Group>
         </Card.Section>
         <Card.Section>
           <AspectRatio ratio={5 / 3} m="xl">

components/AppShelf/AppShelfMenu.tsx

@@ -5,17 +5,12 @@ import { Check, Edit, Trash } from 'tabler-icons-react';
 export default function AppShelfMenu(props: any) {
   const { name, removeitem: removeItem } = props;
   return (
-    <Menu
+    <Menu position="right">
-      style={{
-        position: 'absolute',
-        top: 10,
-        right: 10,
-      }}
-    >
       <Menu.Label>Settings</Menu.Label>
       <Menu.Item
         color="primary"
         icon={<Edit size={14} />}
+        // TODO: #2 Add the ability to edit the service.
         onClick={() => {
           showNotification({
             color: 'red',

components/Settings/SettingsMenu.tsx

@@ -46,7 +46,7 @@ function SettingsMenu(props: any) {
           color: '#a0aec0',
         }}
       >
-        tip: You can upload your config file by dragging and dropping it into the page
+        tip: You can upload your config file by dragging and dropping it onto the page
       </Text>
     </Group>
   );