From 6067c5dfcf8336b6b0551041471206d792482a5e Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Mon, 6 Jun 2022 23:56:33 +0200
Subject: [PATCH] :lipstick: Styling changes for medias and AppShelf

---
 src/components/AppShelf/AppShelf.tsx           | 8 ++++++--
 src/components/modules/common/MediaDisplay.tsx | 4 ++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/AppShelf/AppShelf.tsx b/src/components/AppShelf/AppShelf.tsx
index 6b555b371..71aa98cff 100644
--- a/src/components/AppShelf/AppShelf.tsx
+++ b/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} />
diff --git a/src/components/modules/common/MediaDisplay.tsx b/src/components/modules/common/MediaDisplay.tsx
index e018bbf13..bd8297da1 100644
--- a/src/components/modules/common/MediaDisplay.tsx
+++ b/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>