launch: fluid layout

fixes https://github.com/urbit/landscape/issues/107

pkg/interface/src/views/apps/launch/app.js

@@ -37,8 +37,7 @@ export default class LaunchApp extends React.Component {
           <Box
             ml='2'
             display='grid'
-            gridAutoRows='124px'
-            gridTemplateColumns='repeat(auto-fit, 124px)'
+            gridTemplateColumns='repeat(auto-fill, minmax(128px, 1fr))'
             gridGap={3}
             p={2}
           >
@@ -75,12 +74,9 @@ export default class LaunchApp extends React.Component {
               location={props.userLocation}
               weather={props.weather}
             />
+            <Box display={["none", "block"]} width="100%" gridColumn="1 / -1"></Box>
+            <Groups groups={props.groups} associations={props.associations} invites={props.invites} api={props.api}/>
           </Box>
-          <Groups
-            associations={props.associations}
-            groups={props.groups}
-            invites={props.invites}
-            api={props.api} />
         </Box>
         <Box
           position="absolute"

pkg/interface/src/views/apps/launch/components/Groups.tsx

@@ -35,17 +35,7 @@ export default function Groups(props: GroupsProps & Parameters<typeof Box>[0]) {
   };
 
   return (
-    <Box
-      {...boxProps}
-      ml='2'
-      display="grid"
-      gridAutoRows="124px"
-      gridTemplateColumns="repeat(auto-fit, 124px)"
-      gridGap={3}
-      px={2}
-      pt={2}
-      pb="7"
-    >
+    <>
       {incomingGroups.map((invite) => (
         <Box
           height='100%'
@@ -92,6 +82,6 @@ export default function Groups(props: GroupsProps & Parameters<typeof Box>[0]) {
           <Text>{group.metadata.title}</Text>
         </Tile>
       ))}
-    </Box>
+    </>
   );
 }

pkg/interface/src/views/apps/launch/components/tiles/tile.js

@@ -1,8 +1,24 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
 import defaultApps from '~/logic/lib/default-apps';
 
-import { Box, DisclosureBox } from "@tlon/indigo-react";
+import { Box } from "@tlon/indigo-react";
+
+const SquareBox = styled(Box)`
+  &::before {
+    content: "";
+    display: inline-block;
+    width: 1px;
+    height: 0;
+    padding-bottom: 100%;
+  }
+  & > * {
+    position: absolute;
+    top: 0;
+  }
+`;
 const routeList = defaultApps.map(a => `/~${a}`);
 
 export default class Tile extends React.Component {
@@ -26,7 +42,7 @@ export default class Tile extends React.Component {
 
 
     return (
-      <Box
+      <SquareBox
         borderRadius={2}
         overflow="hidden"
         bg={bg || "white"}
@@ -40,7 +56,7 @@ export default class Tile extends React.Component {
         >
           {childElement}
         </Box>
-      </Box>
+      </SquareBox>
     );
   }
 }