From db457b504a35261089c9fe0de6edd28320a95c3a Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Thu, 22 Oct 2020 13:39:08 -0700
Subject: [PATCH] launch: fluid layout

fixes https://github.com/urbit/landscape/issues/107
---
 pkg/interface/src/views/apps/launch/app.js    | 10 +++------
 .../views/apps/launch/components/Groups.tsx   | 14 ++----------
 .../apps/launch/components/tiles/tile.js      | 22 ++++++++++++++++---
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/pkg/interface/src/views/apps/launch/app.js b/pkg/interface/src/views/apps/launch/app.js
index a0ba6285f..cc234d231 100644
--- a/pkg/interface/src/views/apps/launch/app.js
+++ b/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"
diff --git a/pkg/interface/src/views/apps/launch/components/Groups.tsx b/pkg/interface/src/views/apps/launch/components/Groups.tsx
index 1363bb89d..268688287 100644
--- a/pkg/interface/src/views/apps/launch/components/Groups.tsx
+++ b/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>
+    </>
   );
 }
diff --git a/pkg/interface/src/views/apps/launch/components/tiles/tile.js b/pkg/interface/src/views/apps/launch/components/tiles/tile.js
index 3d6d8d966..64124351f 100644
--- a/pkg/interface/src/views/apps/launch/components/tiles/tile.js
+++ b/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>
     );
   }
 }