cosmik.network
A social knowledge tool for researchers built on ATProto
feat: scrollable semble tabs
+18
-7
+18
-7
src/webapp/features/semble/components/sembleTabs/SembleTabs.tsx
+18
-7
src/webapp/features/semble/components/sembleTabs/SembleTabs.tsx
···
1
-
import { Box, Tabs, TabsList, TabsPanel } from '@mantine/core';
1
+
import {
2
+
Box,
3
+
Group,
4
+
ScrollAreaAutosize,
5
+
Tabs,
6
+
TabsList,
7
+
TabsPanel,
8
+
} from '@mantine/core';
2
9
import SembleNotesContainer from '../../containers/sembleNotesContainer/SembleNotesContainer';
3
10
import SembleNotesContainerSkeleton from '../../containers/sembleNotesContainer/Skeleton.SembleNotesContainer';
4
11
import SembleCollectionsContainerSkeleton from '../../containers/sembleCollectionsContainer/Skeleton.SembleCollectionsContainer';
···
17
24
export default function SembleTabs(props: Props) {
18
25
return (
19
26
<Tabs defaultValue={'similar'}>
20
-
<TabsList>
21
-
<TabItem value="similar">Similar Cards</TabItem>
22
-
<TabItem value="notes">Notes</TabItem>
23
-
<TabItem value="collections">Collections</TabItem>
24
-
<TabItem value="addedBy">Added by</TabItem>
25
-
</TabsList>
27
+
<ScrollAreaAutosize type="scroll">
28
+
<TabsList>
29
+
<Group wrap="nowrap">
30
+
<TabItem value="similar">Similar Cards</TabItem>
31
+
<TabItem value="notes">Notes</TabItem>
32
+
<TabItem value="collections">Collections</TabItem>
33
+
<TabItem value="addedBy">Added by</TabItem>
34
+
</Group>
35
+
</TabsList>
36
+
</ScrollAreaAutosize>
26
37
27
38
<Box mt={'md'}>
28
39
<TabsPanel value="similar">