Merge pull request #126 from animo/feature/G-121-truncate-agent-name

feat: Added title truncation
animo · May 8, 2023 · f81c2d1 · f81c2d1
2 parents 68fedd4 + 83894c7
commit f81c2d1
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 21 deletions.
diff --git a/packages/siera-ui/src/layout/LayoutAvatar.tsx b/packages/siera-ui/src/layout/LayoutAvatar.tsx
@@ -1,6 +1,6 @@
 import type { Agent } from '@aries-framework/core'
 
-import { Box, createStyles, Group, Text } from '@mantine/core'
+import { Box, createStyles, Flex, Text } from '@mantine/core'
 import React from 'react'
 
 import { SmartAvatar } from '../components/SmartAvatar'
@@ -22,16 +22,18 @@ export const LayoutAvatar = ({ agent }: LayoutAvatarProps) => {
   const avatarLabel = agent.config.label
 
   return (
-    <Group noWrap>
+    <Flex gap="sm" maw="100%" wrap="nowrap">
       <SmartAvatar src={agent.config.connectionImageUrl} size="md" radius="xl">
         {avatarLabel}
       </SmartAvatar>
-      <Box>
-        <Text className={classes.avatarLabel}>{avatarLabel}</Text>
+      <Box miw={0}>
+        <Text className={classes.avatarLabel} lineClamp={2}>
+          {avatarLabel}
+        </Text>
         <Text color="dimmed" size="xs" weight={500}>
           Native (AFJ)
         </Text>
       </Box>
-    </Group>
+    </Flex>
   )
 }
diff --git a/packages/siera-ui/src/layout/LayoutNavBar.tsx b/packages/siera-ui/src/layout/LayoutNavBar.tsx
@@ -1,6 +1,6 @@
 import type { Agent } from '@aries-framework/core'
 
-import { ActionIcon, createStyles, Group, Menu, Navbar, useMantineColorScheme } from '@mantine/core'
+import { ActionIcon, createStyles, Flex, Menu, Navbar, useMantineColorScheme } from '@mantine/core'
 import { IconChevronDown } from '@tabler/icons'
 import React, { useState } from 'react'
 
@@ -69,11 +69,11 @@ export const LayoutNavBar = ({ navigationItems, agent }: LayoutNavigationProps)
   return (
     <Navbar py="md" width={{ sm: 300 }} className={classes.navbar}>
       <Navbar.Section mx="md" className={classes.layoutAvatar}>
-        <Group position="apart">
+        <Flex gap="xs" justify="space-between">
           <LayoutAvatar agent={agent} />
           <Menu shadow="md" width={200} position="bottom-end">
             <Menu.Target>
-              <ActionIcon>
+              <ActionIcon mt="xs">
                 <IconChevronDown />
               </ActionIcon>
             </Menu.Target>
@@ -83,7 +83,7 @@ export const LayoutNavBar = ({ navigationItems, agent }: LayoutNavigationProps)
               <Menu.Item onClick={() => signOut()}>Log out</Menu.Item>
             </Menu.Dropdown>
           </Menu>
-        </Group>
+        </Flex>
       </Navbar.Section>
 
       <Navbar.Section grow>

diff --git a/packages/siera-ui/src/pages/AgentSelectionScreen.tsx b/packages/siera-ui/src/pages/AgentSelectionScreen.tsx
@@ -1,4 +1,4 @@
-import { Box, Card, Container, createStyles, Flex, Group, Text, Title, UnstyledButton } from '@mantine/core'
+import { Box, Card, Container, createStyles, Flex, Text, Title, UnstyledButton } from '@mantine/core'
 import React from 'react'
 
 import { Loading } from '../components/Loading'
@@ -65,18 +65,18 @@ export const AgentSelectionScreen = () => {
         {agents.map((agent) => (
           <UnstyledButton key={agent.id} onClick={() => switchToAgent(agent.id)}>
             <Card h={80} w={220} className={classes.card} radius="md">
-              <Flex align="center" h="100%">
-                <Group noWrap>
-                  <SmartAvatar src={agent.agentConfig.connectionImageUrl} size={38} radius="xl">
+              <Flex gap="sm" maw="100%" wrap="nowrap">
+                <SmartAvatar src={agent.agentConfig.connectionImageUrl} size={38} radius="xl">
+                  {agent.agentConfig.label}
+                </SmartAvatar>
+                <Box miw={0}>
+                  <Text className={classes.avatarLabel} truncate>
                     {agent.agentConfig.label}
-                  </SmartAvatar>
-                  <Box>
-                    <Text className={classes.avatarLabel}>{agent.agentConfig.label}</Text>
-                    <Text size="xs" color="dimmed" weight={500}>
-                      Native (AFJ)
-                    </Text>
-                  </Box>
-                </Group>
+                  </Text>
+                  <Text size="xs" color="dimmed" weight={500}>
+                    Native (AFJ)
+                  </Text>
+                </Box>
               </Flex>
             </Card>
           </UnstyledButton>