Added scroll bar to party component

This commit is contained in:
Mitchell McCaffrey 2020-08-06 09:54:59 +10:00
parent 0fb237fd10
commit 56b113b8e4

View File

@ -1,5 +1,6 @@
import React from "react";
import { Flex, Box, Text } from "theme-ui";
import SimpleBar from "simplebar-react";
import AddPartyMemberButton from "./AddPartyMemberButton";
import Nickname from "./Nickname";
@ -35,11 +36,11 @@ function Party({
bg="background"
sx={{
flexDirection: "column",
width: "112px",
minWidth: "112px",
overflow: "visible",
alignItems: "center",
position: "relative",
width: "112px",
minWidth: "112px",
}}
>
<Box
@ -51,10 +52,13 @@ function Party({
Party
</Text>
</Box>
<Box
sx={{
<SimpleBar
style={{
flexGrow: 1,
width: "100%",
minWidth: "112px",
padding: "0 16px",
height: "calc(100% - 232px)",
}}
>
<Nickname nickname={`${nickname} (you)`} />
@ -75,7 +79,7 @@ function Party({
index={timer ? index + 1 : index}
/>
))}
</Box>
</SimpleBar>
<Flex sx={{ flexDirection: "column" }}>
<ChangeNicknameButton nickname={nickname} onChange={onNicknameChange} />
<AddPartyMemberButton gameId={gameId} />