tangled
alpha
login
or
join now
cosmik.network
/
semble
43
fork
atom
A social knowledge tool for researchers built on ATProto
43
fork
atom
overview
issues
13
pulls
pipelines
fix: text overflow on title and text components
Pouria Delfanazari
4 months ago
937917d6
e413c196
+33
-57
7 changed files
expand all
collapse all
unified
split
src
webapp
app
page.tsx
features
cards
components
urlCard
UrlCard.tsx
collections
components
collectionSelectorItem
CollectionSelectorItem.tsx
containers
collectionContainer
CollectionContainer.tsx
profile
components
profileHeader
ProfileHeader.tsx
semble
components
SembleHeader
SembleHeader.tsx
styles
theme.tsx
+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' ? (
0
0
0
0
0
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"
0
62
size="lg"
63
color="dark"
64
+
rightSection={<BiRightArrowAlt size={22} />}
65
>
66
+
Log in
67
</Button>
68
+
</Group>
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
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}>
0
0
0
0
0
0
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}>
0
0
0
0
0
0
0
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>
0
0
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' }}>
0
0
0
0
48
{profile.name}
49
</Title>
50
+
<Text c="blue" fw={600} fz={{ base: 'lg', md: 'xl' }}>
0
0
0
0
0
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>}
0
0
0
0
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,
0
0
14
} from '@mantine/core';
15
16
export const theme = createTheme({
···
122
Tooltip: Tooltip.extend({
123
defaultProps: {
124
position: 'top-start',
0
0
0
0
0
0
0
0
0
0
0
0
0
0
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
},