A social knowledge tool for researchers built on ATProto

fix: text overflow on title and text components

+33 -57
+11 -23
src/webapp/app/page.tsx
··· 50 Follow your peers’ research trails. Surface and discover new 51 connections. Built on ATProto so you own your data. 52 </Title> 53 - {process.env.VERCEL_ENV === 'production' ? ( 54 <Button 55 - component="a" 56 - href="https://forms.cosmik.network/waitlist" 57 - target="_blank" 58 size="lg" 59 color="dark" 60 - mt={'lg'} 61 > 62 - Join waitlist 63 </Button> 64 - ) : ( 65 - <Group gap="md" mt={'lg'}> 66 - <Button component={Link} href="/signup" size="lg"> 67 - Sign up 68 - </Button> 69 - 70 - <Button 71 - component={Link} 72 - href="/login" 73 - size="lg" 74 - color="dark" 75 - rightSection={<BiRightArrowAlt size={22} />} 76 - > 77 - Log in 78 - </Button> 79 - </Group> 80 - )} 81 </Stack> 82 83 <SimpleGrid
··· 50 Follow your peers’ research trails. Surface and discover new 51 connections. Built on ATProto so you own your data. 52 </Title> 53 + 54 + <Group gap="md" mt={'lg'}> 55 + <Button component={Link} href="/signup" size="lg"> 56 + Sign up 57 + </Button> 58 + 59 <Button 60 + component={Link} 61 + href="/login" 62 size="lg" 63 color="dark" 64 + rightSection={<BiRightArrowAlt size={22} />} 65 > 66 + Log in 67 </Button> 68 + </Group> 69 </Stack> 70 71 <SimpleGrid
+1 -7
src/webapp/features/cards/components/urlCard/UrlCard.tsx
··· 66 </Anchor> 67 </Tooltip> 68 {props.cardContent.title && ( 69 - <Text 70 - fw={500} 71 - lineClamp={2} 72 - style={{ 73 - wordBreak: 'break-word', 74 - }} 75 - > 76 {props.cardContent.title} 77 </Text> 78 )}
··· 66 </Anchor> 67 </Tooltip> 68 {props.cardContent.title && ( 69 + <Text fw={500} lineClamp={2}> 70 {props.cardContent.title} 71 </Text> 72 )}
+1 -8
src/webapp/features/collections/components/collectionSelectorItem/CollectionSelectorItem.tsx
··· 41 > 42 <Group justify="space-between" wrap="nowrap"> 43 <Group gap={'xs'} wrap="nowrap"> 44 - <Text 45 - fw={500} 46 - lineClamp={1} 47 - flex={1} 48 - style={{ 49 - wordBreak: 'break-all', 50 - }} 51 - > 52 {props.name} 53 </Text> 54 <Text c={'gray'}>·</Text>
··· 41 > 42 <Group justify="space-between" wrap="nowrap"> 43 <Group gap={'xs'} wrap="nowrap"> 44 + <Text fw={500} lineClamp={1} flex={1}> 45 {props.name} 46 </Text> 47 <Text c={'gray'}>·</Text>
+1 -3
src/webapp/features/collections/containers/collectionContainer/CollectionContainer.tsx
··· 59 <Text fw={700} c="grape"> 60 Collection 61 </Text> 62 - <Title order={1} style={{ wordBreak: 'break-all' }}> 63 - {firstPage.name} 64 - </Title> 65 {firstPage.description && ( 66 <Text c="gray" mt="lg"> 67 {firstPage.description}
··· 59 <Text fw={700} c="grape"> 60 Collection 61 </Text> 62 + <Title order={1}>{firstPage.name}</Title> 63 {firstPage.description && ( 64 <Text c="gray" mt="lg"> 65 {firstPage.description}
+2 -11
src/webapp/features/profile/components/profileHeader/ProfileHeader.tsx
··· 44 <GridCol span={{ base: 12, xs: 9 }}> 45 <Stack gap={'sm'}> 46 <Stack gap={0}> 47 - <Title 48 - order={1} 49 - fz={{ base: 'h2', md: 'h1' }} 50 - style={{ wordBreak: 'break-all' }} 51 - > 52 {profile.name} 53 </Title> 54 - <Text 55 - c="blue" 56 - fw={600} 57 - fz={{ base: 'lg', md: 'xl' }} 58 - style={{ wordBreak: 'break-all' }} 59 - > 60 @{profile.handle} 61 </Text> 62 </Stack>
··· 44 <GridCol span={{ base: 12, xs: 9 }}> 45 <Stack gap={'sm'}> 46 <Stack gap={0}> 47 + <Title order={1} fz={{ base: 'h2', md: 'h1' }}> 48 {profile.name} 49 </Title> 50 + <Text c="blue" fw={600} fz={{ base: 'lg', md: 'xl' }}> 51 @{profile.handle} 52 </Text> 53 </Stack>
+1 -5
src/webapp/features/semble/components/SembleHeader/SembleHeader.tsx
··· 48 </Tooltip> 49 </Text> 50 51 - {metadata.title && ( 52 - <Title order={1} style={{ wordBreak: 'break-all' }}> 53 - {metadata.title} 54 - </Title> 55 - )} 56 </Stack> 57 {metadata.description && ( 58 <Spoiler showLabel={'Read more'} hideLabel={'See less'}>
··· 48 </Tooltip> 49 </Text> 50 51 + {metadata.title && <Title order={1}>{metadata.title}</Title>} 52 </Stack> 53 {metadata.description && ( 54 <Spoiler showLabel={'Read more'} hideLabel={'See less'}>
+16
src/webapp/styles/theme.tsx
··· 11 Spoiler, 12 TabsTab, 13 Tooltip, 14 } from '@mantine/core'; 15 16 export const theme = createTheme({ ··· 122 Tooltip: Tooltip.extend({ 123 defaultProps: { 124 position: 'top-start', 125 }, 126 }), 127 },
··· 11 Spoiler, 12 TabsTab, 13 Tooltip, 14 + Title, 15 + Text, 16 } from '@mantine/core'; 17 18 export const theme = createTheme({ ··· 124 Tooltip: Tooltip.extend({ 125 defaultProps: { 126 position: 'top-start', 127 + }, 128 + }), 129 + Title: Text.extend({ 130 + styles: { 131 + root: { 132 + wordBreak: 'break-word', 133 + }, 134 + }, 135 + }), 136 + Text: Text.extend({ 137 + styles: { 138 + root: { 139 + wordBreak: 'break-word', 140 + }, 141 }, 142 }), 143 },