From add4adb5b9c39cb0bc9a75621283f9427917b69e Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Thu, 4 Mar 2021 15:46:08 +1000
Subject: [PATCH] Participants: remove grid

running into https://bugs.chromium.org/p/chromium/issues/detail?id=688640
on large groups

Fixes urbit/landscape#513
---
 .../landscape/components/Participants.tsx     | 32 ++++++++-----------
 1 file changed, 14 insertions(+), 18 deletions(-)

diff --git a/pkg/interface/src/views/landscape/components/Participants.tsx b/pkg/interface/src/views/landscape/components/Participants.tsx
index 5090968d2b..c7c60607cb 100644
--- a/pkg/interface/src/views/landscape/components/Participants.tsx
+++ b/pkg/interface/src/views/landscape/components/Participants.tsx
@@ -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} />
   );
 }