nandi.uk
This repository has no description
fix: semble tabs not spanning full outer container width
author
Pouria Delfanazari
date
(May 7, 2026, 4:36 PM -0700)
commit
ec102b3d
ec102b3d4008bf9e0fce88dd1ea5112787e69720
parent
cdc1dffa
cdc1dffac221d37448e5d1140f0e7c7e8d28ccaf
+39
-26
+37
-24
src/webapp/features/semble/components/sembleTabs/SembleTabs.tsx
+37
-24
src/webapp/features/semble/components/sembleTabs/SembleTabs.tsx
···
1
1
'use client';
2
2
3
3
import { useState, Suspense } from 'react';
4
-
import { Box, Paper, Scroller, Tabs, TabsList, TabsPanel } from '@mantine/core';
4
+
import {
5
+
Box,
6
+
Container,
7
+
Paper,
8
+
Scroller,
9
+
Tabs,
10
+
TabsList,
11
+
TabsPanel,
12
+
} from '@mantine/core';
5
13
import TabItem from './TabItem';
6
14
import { useFeatureFlags } from '@/lib/clientFeatureFlags';
7
15
import useUrlMetadata from '@/features/cards/lib/queries/useUrlMetadata';
···
61
69
}}
62
70
>
63
71
<Paper radius={0}>
64
-
<TabsList style={{ flexWrap: 'nowrap' }}>
65
-
<Scroller>
66
-
<TabItem value="similar">Similar cards</TabItem>
67
-
<TabItem value="collections" count={stats?.collectionCount}>
68
-
Collections
69
-
</TabItem>
70
-
<TabItem value="mentions">Mentions</TabItem>
71
-
<TabItem value="connections" count={stats?.connections.all.total}>
72
-
Connections
73
-
</TabItem>
74
-
<TabItem value="notes" count={stats?.noteCount}>
75
-
Notes
76
-
</TabItem>
77
-
<TabItem value="addedBy" count={stats?.libraryCount}>
78
-
Added by
79
-
</TabItem>
80
-
{featureFlags?.graphView && (
81
-
<TabItem value="graph">Graph</TabItem>
82
-
)}
83
-
</Scroller>
84
-
</TabsList>
72
+
<Container px={'xs'} size={'xl'}>
73
+
<TabsList style={{ flexWrap: 'nowrap' }}>
74
+
<Scroller>
75
+
<TabItem value="similar">Similar cards</TabItem>
76
+
<TabItem value="collections" count={stats?.collectionCount}>
77
+
Collections
78
+
</TabItem>
79
+
<TabItem value="mentions">Mentions</TabItem>
80
+
<TabItem
81
+
value="connections"
82
+
count={stats?.connections.all.total}
83
+
>
84
+
Connections
85
+
</TabItem>
86
+
<TabItem value="notes" count={stats?.noteCount}>
87
+
Notes
88
+
</TabItem>
89
+
<TabItem value="addedBy" count={stats?.libraryCount}>
90
+
Added by
91
+
</TabItem>
92
+
{featureFlags?.graphView && (
93
+
<TabItem value="graph">Graph</TabItem>
94
+
)}
95
+
</Scroller>
96
+
</TabsList>
97
+
</Container>
85
98
</Paper>
86
99
</Box>
87
100
88
-
<Box mt="md">
101
+
<Container px={'xs'} size={'xl'} mt="md">
89
102
<TabsPanel value="notes">
90
103
<Suspense fallback={<SembleNotesContainerSkeleton />} key={props.url}>
91
104
<SembleNotesContainer url={props.url} />
···
139
152
<SembleMentionsContainer url={props.url} />
140
153
</Suspense>
141
154
</TabsPanel>
142
-
</Box>
155
+
</Container>
143
156
</Tabs>
144
157
);
145
158
}
+2
-2
src/webapp/features/semble/containers/sembleContainer/SembleContainer.tsx
+2
-2
src/webapp/features/semble/containers/sembleContainer/SembleContainer.tsx