Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 191dd67

Browse files
Fix styling
1 parent 633eebc commit 191dd67

File tree

4 files changed

+32
-36
lines changed

4 files changed

+32
-36
lines changed

‎packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -71,20 +71,18 @@ export function SpaceLayout(props: {
7171
<MobileMenuSheet>
7272
<TOCScrollContent
7373
innerHeader={
74-
<div className="pl-5">
75-
{isMultiVariants ? (
76-
<SpacesDropdown
77-
context={context}
78-
siteSpace={siteSpace}
79-
siteSpaces={siteSpaces}
80-
className={tcls(
81-
'w-full',
82-
'page-no-toc:hidden',
83-
'site-header-none:page-no-toc:flex'
84-
)}
85-
/>
86-
) : null}
87-
</div>
74+
isMultiVariants ? (
75+
<SpacesDropdown
76+
context={context}
77+
siteSpace={siteSpace}
78+
siteSpaces={siteSpaces}
79+
className={tcls(
80+
'w-full',
81+
'page-no-toc:hidden',
82+
'site-header-none:page-no-toc:flex'
83+
)}
84+
/>
85+
) : null
8886
}
8987
context={context}
9088
/>
@@ -123,7 +121,7 @@ export function SpaceLayout(props: {
123121
}
124122
innerHeader={
125123
// displays the search button and/or the space dropdown in the ToC according to the header/variant settings. E.g if there is no header, the search button will be displayed in the ToC.
126-
<divclassName="inline-flex w-full flex-col gap-2 px-4">
124+
<>
127125
{!withTopHeader && (
128126
<div className={tcls('hidden', 'lg:block')}>
129127
<React.Suspense fallback={null}>
@@ -155,11 +153,12 @@ export function SpaceLayout(props: {
155153
className={tcls(
156154
'w-full',
157155
'page-no-toc:hidden',
158-
'site-header-none:page-no-toc:flex'
156+
'site-header-none:page-no-toc:flex',
157+
'mb-2'
159158
)}
160159
/>
161160
)}
162-
</div>
161+
</>
163162
}
164163
/>
165164
<div className="flex min-w-0 flex-1 flex-col">{children}</div>

‎packages/gitbook/src/components/TableOfContents/TOCScrollContent.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,15 @@ export function TOCScrollContent(props: {
3131
'straight-corners:rounded-none'
3232
)}
3333
>
34-
{innerHeader && <div className="*:mt-0.5 max-lg:mt-2 max-lg:pr-12">{innerHeader}</div>}
34+
{!!innerHeader && (
35+
<div className="inline-flex w-full flex-col gap-2 px-3 *:mt-0.5 max-lg:mt-3 max-lg:pr-12 lg:px-2 lg:pr-4">
36+
{innerHeader}
37+
</div>
38+
)}
3539

3640
<TOCScrollContainer // The scrollview inside the sidebar
3741
className={tcls(
38-
'flex flex-grow flex-col p-2',
42+
'flex flex-grow flex-col p-3 lg:p-2',
3943
innerHeader ? 'mt-0' : 'mt-8',
4044
customization.trademark.enabled && 'pb-20',
4145
'gutter-stable overflow-y-auto',

‎packages/gitbook/src/components/TableOfContents/Trademark.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,9 @@ export function Trademark(props: {
2525
'absolute',
2626

2727
'lg:left-0',
28-
'left-2',
29-
'right-2',
28+
'left-3',
29+
'lg:right-2',
30+
'right-3',
3031
'bottom-0',
3132

3233
'py-2',

‎packages/gitbook/src/components/utils/Sheet.tsx‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -54,17 +54,19 @@ export function SheetContent({
5454
<SheetPrimitive.Content
5555
data-slot="sheet-content"
5656
className={tcls(
57-
'fixed z-30 flex flex-col shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
57+
'fixed z-30 flex flex-col rounded-xl shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
5858
'border-tint-subtle',
59+
'inset-x-1.5 inset-y-1.5 w-10/12 border sm:max-w-sm',
5960
'bg-tint-base',
61+
'theme-gradient:bg-gradient-primary',
62+
'sidebar-filled:bg-tint-subtle',
63+
'theme-muted:bg-tint-subtle',
6064
'sidebar-filled:bg-tint-subtle',
6165
'theme-muted:bg-tint-subtle',
6266
'[html.sidebar-filled.theme-bold.tint_&]:bg-tint-subtle',
6367
'[html.sidebar-filled.theme-muted_&]:bg-tint-base',
6468
'[html.sidebar-filled.theme-bold.tint_&]:bg-tint-base',
65-
'[html.sidebar-default.theme-gradient_&]:bg-gradient-primary',
66-
'[html.sidebar-default.theme-gradient.tint_&]:bg-gradient-tint',
67-
'inset-x-1.5 inset-y-1.5 w-10/12 rounded-xl border sm:max-w-sm',
69+
'straight-corners:rounded-none',
6870
side === 'right' &&
6971
'right-1.5 data-[state=closed]:animate-exitToRight data-[state=open]:animate-enterFromRight',
7072
side === 'left' &&
@@ -82,7 +84,7 @@ export function SheetContent({
8284
icon="close"
8385
iconOnly
8486
size="default"
85-
className="absolute top-3 right-2"
87+
className="absolute top-3 right-2 z-50"
8688
>
8789
<span className="sr-only">Close</span>
8890
</Button>
@@ -102,16 +104,6 @@ export function SheetHeader({ className, ...props }: React.ComponentProps<'div'>
102104
);
103105
}
104106

105-
export function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
106-
return (
107-
<div
108-
data-slot="sheet-footer"
109-
className={tcls('mt-auto flex flex-col gap-2 p-4', className)}
110-
{...props}
111-
/>
112-
);
113-
}
114-
115107
export function SheetTitle({
116108
className,
117109
...props

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /