ResourceSkeleton: dynamically truncate description

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

@@ -1,5 +1,5 @@
 import React, { ReactElement, ReactNode } from 'react';
-import { Icon, Box, Col, Text } from '@tlon/indigo-react';
+import { Icon, Box, Col, Row, Text } from '@tlon/indigo-react';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import urbitOb from 'urbit-ob';
@@ -12,7 +12,7 @@ import GlobalApi from '~/logic/api/global';
 import { isWriter } from '~/logic/lib/group';
 import { getItemTitle } from '~/logic/lib/util';
 
-const TruncatedBox = styled(Box)`
+const TruncatedText = styled(RichText)`
   white-space: pre;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -88,7 +88,7 @@ export function ResourceSkeleton(props: ResourceSkeletonProps): ReactElement {
         >
           <Link to={`/~landscape${workspace}`}> {'<- Back'}</Link>
         </Box>
-        <Box px={1} mr={2} minWidth={0} display="flex">
+        <Box px={1} mr={2} minWidth={0} display="flex" flexShrink={0}>
           <Text
             mono={urbitOb.isValidPatp(title)}
             fontSize='2'
@@ -99,28 +99,30 @@ export function ResourceSkeleton(props: ResourceSkeletonProps): ReactElement {
             overflow="hidden"
             whiteSpace="pre"
             minWidth={0}
+            flexShrink={0}
           >
             {title}
           </Text>
         </Box>
-        <TruncatedBox
-          display={['none', 'block']}
+        <Row
+          display={['none', 'flex']}
           verticalAlign="middle"
-          maxWidth='60%'
           flexShrink={1}
+          minWidth={0}
           title={association?.metadata?.description}
-          color="gray"
         >
-          <RichText
+          <TruncatedText
             display={(workspace === '/messages' && (urbitOb.isValidPatp(title))) ? 'none' : 'inline-block'}
             mono={(workspace === '/messages' && !(urbitOb.isValidPatp(title)))}
             color="gray"
+            minWidth={0}
+            width="100%"
             mb="0"
             disableRemoteContent
           >
             {(workspace === '/messages') ? recipient : association?.metadata?.description}
-          </RichText>
-        </TruncatedBox>
+          </TruncatedText>
+        </Row>
         <Box flexGrow={1} />
         {canWrite && (
           <Link to={resourcePath('/new')} style={{ flexShrink: '0' }}>