💄 Styling changes for medias and AppShelf

src/components/AppShelf/AppShelf.tsx

@@ -134,11 +134,15 @@ const AppShelf = (props: any) => {
           onChange={(idx) => settoggledCategories(idx)}
         >
           {categoryList.map((category, idx) => (
-            <Accordion.Item label={category}>{item(category)}</Accordion.Item>
+            <Accordion.Item key={category} label={category}>
+              {item(category)}
+            </Accordion.Item>
           ))}
           {/* Return the item for all services without category */}
           {noCategory && noCategory.length > 0 ? (
-            <Accordion.Item label="Other">{item()}</Accordion.Item>
+            <Accordion.Item key="Other" label="Other">
+              {item()}
+            </Accordion.Item>
           ) : null}
         </Accordion>
         <ModuleWrapper mt="xl" module={DownloadsModule} />

src/components/modules/common/MediaDisplay.tsx

@@ -86,9 +86,9 @@ export function MediaDisplay(props: { media: IMedia }) {
           )}
         </Group>
         <Group direction="column" position="apart">
-          <ScrollArea style={{ height: 250, maxWidth: 700 }}>{media.overview}</ScrollArea>
+          <ScrollArea style={{ height: 280, maxWidth: 700 }}>{media.overview}</ScrollArea>
           <Group align="center" position="center" spacing="xs">
-            {media.genres.map((genre: string, i: number) => (
+            {media.genres.slice(-5).map((genre: string, i: number) => (
               <Badge size="sm" key={i}>
                 {genre}
               </Badge>