Participants: remove grid
running into
on large groups
Fixes urbit/landscape#513
@@ -211,13 +211,7 @@ export function Participants(props: {
onChange={onSearchChange}
/>
</Row>
- <Box
- display="grid"
- gridAutoRows={['48px 48px 1px', '48px 1px']}
- gridTemplateColumns={['48px 1fr', '48px 2fr 1fr', '48px 3fr 1fr']}
- gridRowGap={2}
- alignItems="center"
- >
+ <Col alignItems="center" >
{filtered.map((cs, idx) => (
<VisibilitySensor
key={idx}
@@ -243,7 +237,7 @@ export function Participants(props: {
}
</VisibilitySensor>
))}
- </Box>
+ </Col>
</Col>
</Col>
);
@@ -312,10 +306,12 @@ function Participant(props: {
return (
<>
+ <Row flexDirection={["column", "row"]} gapX="2" alignItems={["flex-start", "center"]} width="100%" justifyContent="space-between" height={["96px", "60px"]}>
+ <Row gapX="4" alignItems="center" height="100%">
<Box>{avatar}</Box>
- <Col justifyContent="center" gapY="1" height="100%" minWidth='0'>
+ <Col alignItems="self-start" justifyContent="center" gapY="1" height="100%" minWidth='0'>
{hasNickname && (
- <Row minWidth='0' flexShrink='1'>
+ <Row minWidth='0' flexShrink={1}>
<TruncText title={contact.nickname} color="black">
{contact.nickname}
</TruncText>
@@ -325,10 +321,12 @@ function Participant(props: {
{cite(contact.patp)}
</Text>
</Col>
+ </Row>
<Row
justifyContent="space-between"
- gridColumn={['1 / 3', 'auto']}
+ width={["100%", "128px"]}
alignItems="center"
+ gapX="4"
>
<Col>
<Text color="lightGray" mb="1">
@@ -387,21 +385,19 @@ function Participant(props: {
<Icon display="block" icon="Ellipsis" />
</Dropdown>
</Row>
+ </Row>
<Box
borderBottom={1}
borderBottomColor="washedGray"
- gridColumn={['1 / 3', '1 / 4']}
+ width="100%"
/>
</>
);
}
function BlankParticipant({ length }) {
+ const height = [`${length * 97}px`, `${length * 61}px`];
return (
- <Box
- gridRow={[`auto / span ${3 * length}`, `auto / span ${2 * length}`]}
- gridColumn={['1 / 3', '1 / 4']}
- height="100%"
- />
+ <Box width="100%" height={height} />
);
}
