Merge pull request #4382 from urbit/lf/fe-fixes

interface: all assigned QA bugs

pkg/interface/src/logic/lib/useModal.tsx

@@ -28,11 +28,11 @@ export function useModal(props: UseModalProps): UseModalResult {
 
   const dismiss = useCallback(() => {
     setModalShown(false);
-  }, [setModalShown]);
+  }, []);
 
   const showModal = useCallback(() => {
     setModalShown(true);
-  }, [setModalShown]);
+  }, []);
 
   const inner = useMemo(
     () =>

pkg/interface/src/logic/reducers/contact-update.ts

@@ -55,7 +55,6 @@ const edit = (json: ContactUpdate, state: S) => {
     data &&
     (ship in state.contacts)
   ) {
-    console.log(data);
     const [field] = Object.keys(data['edit-field']);
     if (!field) {
       return;

pkg/interface/src/views/apps/chat/ChatResource.tsx

@@ -36,7 +36,6 @@ export function ChatResource(props: ChatResourceProps) {
 
   const [,, owner, name] = station.split('/');
   const ourContact = contacts?.[`~${window.ship}`];
-  console.log(contacts);
 
   const chatInput = useRef<ChatInput>();
 

pkg/interface/src/views/landscape/components/DeleteGroup.tsx

@@ -38,14 +38,19 @@ export function DeleteGroup(props: {
 
   const icon = props.owner ? "X" : "SignOut";
   const { modal, showModal } = useModal({ modal: 
-    (dismiss: () => void) => (
+    (dismiss: () => void) => {
+      const onCancel = (e) => {
+        e.stopPropagation();
+        dismiss();
+      };
+      return (
         <Col p="4">
           <Label>{action} Group</Label>
           <Label gray mt="2">
             {description}
           </Label>
           <Row mt="2" justifyContent="flex-end">
-            <Button onClick={dismiss}>Cancel</Button>
+            <Button onClick={onCancel}>Cancel</Button>
             <StatelessAsyncButton
               name={`delete-${props.association.group}`}
               onClick={onDelete}
@@ -57,7 +62,8 @@ export function DeleteGroup(props: {
             </StatelessAsyncButton>
           </Row>
         </Col>
-      )});
+      );
+    }});
   return (
     <Row px="3" py="1" onClick={showModal} cursor="pointer">
       {modal}

pkg/interface/src/views/landscape/components/GroupSwitcher.tsx

@@ -167,11 +167,9 @@ export function GroupSwitcher(props: {
             }
           >
             <Row flexGrow={1} alignItems="center" width='100%' minWidth='0' flexShrink={0}>
-              { metadata && <MetadataIcon mr="2" border="1" borderColor="lightGray" borderRadius="1" metadata={metadata} height="24px" width="24px" /> }
-              <Row justifyContent="space-between" mr={1} flexShrink={0} flexGrow={1} minWidth='0'>
-                <Text lineHeight="1.1" fontSize='2' fontWeight="700" overflow='hidden' display='inline-block' flexShrink='1' style={{ textOverflow: 'ellipsis', whiteSpace: 'pre' }}>{title}</Text>
+              { metadata && <MetadataIcon flexShrink={0} mr="2" border="1" borderColor="lightGray" borderRadius="1" metadata={metadata} height="24px" width="24px" /> }
+              <Text flexShrink={1} lineHeight="1.1" fontSize='2' fontWeight="700" overflow='hidden' display='inline-block' flexShrink='1' style={{ textOverflow: 'ellipsis', whiteSpace: 'pre' }}>{title}</Text>
               </Row>
-            </Row>
           </Dropdown>
           <Row pr='3' verticalAlign="middle">
             {(workspace.type === 'group') && (

pkg/interface/src/views/landscape/components/JoinGroup.tsx

@@ -127,14 +127,14 @@ export function JoinGroup(props: JoinGroupProps) {
 
   return (
     <>
-      <Col width="100%" alignItems="center" overflowY="auto" p="4">
+      <Col overflowY="auto" p="3">
         <Box mb={3}>
           <Text fontSize="2" fontWeight="bold">
             Join a Group
           </Text>
         </Box>
         {_.isString(preview) ? (
-          <Col width="100%" maxWidth="300px" gapY="4">
+          <Col width="100%" gapY="4">
             <Text>The host appears to be offline. Join anyway?</Text>
             <StatelessAsyncButton primary name="join" onClick={onConfirm}>
               Join anyway
@@ -175,7 +175,7 @@ export function JoinGroup(props: JoinGroupProps) {
             </StatelessAsyncButton>
           </GroupSummary>
         ) : (
-          <Col width="100%" maxWidth="300px" gapY="4">
+          <Col width="100%" gapY="4">
             <Formik
               validationSchema={formSchema}
               initialValues={initialValues}

pkg/interface/src/views/landscape/components/NewChannel.tsx

@@ -5,6 +5,7 @@ import {
   Col,
   Text
 } from '@tlon/indigo-react';
+import _ from 'lodash';
 import { Formik, Form } from 'formik';
 import * as Yup from 'yup';
 import GlobalApi from '~/logic/api/global';

pkg/interface/src/views/landscape/components/Skeleton.tsx

@@ -48,7 +48,9 @@ export function Skeleton(props: SkeletonProps) {
   return (
     <Body
       display="grid"
-      gridTemplateColumns={['100%', '250px 1fr']}
+      gridTemplateColumns={
+        ['100%', 'minmax(150px, 1fr) 3fr', 'minmax(250px, 1fr) 4fr']
+      }
       gridTemplateRows="100%"
     >
       <Sidebar