Skip to content

Commit abbae3e

Browse files
nolannbironzenoachtig
nolannbiron
and
zenoachtig
authored
Remove scroll-nojump utility and update layout structure (#3494)
Co-authored-by: Zeno Kapitein <zeno@gitbook.io>
1 parent 1b8609a commit abbae3e

File tree

10 files changed

+411
-423
lines changed

10 files changed

+411
-423
lines changed

‎packages/gitbook/src/components/AI/server-actions/AIToolCallsSummary.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ async function DescriptionForSearchToolCall(props: {
187187
) : null}
188188
</summary>
189189
{hasResults ? (
190-
<div className="mt-1 max-h-0 overflow-y-auto circular-corners:rounded-2xl rounded-corners:rounded-lg border border-tint-subtle p-2 opacity-0 transition-all transition-discrete duration-500 group-open:max-h-96 group-open:opacity-11">
190+
<div className="hide-scrollbar mt-1 max-h-0 overflow-y-auto circular-corners:rounded-2xl rounded-corners:rounded-lg border border-tint-subtle p-2 opacity-0 transition-all transition-discrete duration-500 group-open:max-h-96 group-open:opacity-11">
191191
<ol className="space-y-1">
192192
{searchResultsWithHrefs.map((result, index) => (
193193
<li

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ export function AIChatBody(props: {
213213
<>
214214
<div
215215
ref={scrollContainerRef}
216-
className="flex grow scroll-pt-4 flex-col gap-4 overflow-y-auto p-4"
216+
className="gutter-stable flex grow scroll-pt-4 flex-col gap-4 overflow-y-auto p-4"
217217
style={{
218218
paddingBottom: `${inputHeight}px`,
219219
}}

‎packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx‎

Lines changed: 61 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -34,69 +34,67 @@ export function AnnouncementBanner(props: {
3434
className="theme-bold:bg-header-background pt-4 pb-2"
3535
data-nosnippet=""
3636
>
37-
<div className="scroll-nojump">
38-
<div className="transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
39-
<div className={tcls('relative', CONTAINER_STYLE)}>
40-
<Tag
41-
href={contentRef?.href ?? ''}
42-
className={tcls(
43-
'flex w-full items-start justify-center overflow-hidden circular-corners:rounded-xl rounded-md straight-corners:rounded-none px-4 py-3 text-neutral-strong text-sm theme-bold:ring-1 theme-gradient:ring-1 ring-inset transition-colors',
44-
style.container,
45-
closeable && 'pr-12',
46-
hasLink && style.hover
47-
)}
48-
insights={
49-
announcement.link
50-
? {
51-
type: 'link_click',
52-
link: {
53-
target: announcement.link.to,
54-
position: SiteInsightsLinkPosition.Announcement,
55-
},
56-
}
57-
: undefined
58-
}
59-
>
60-
<Icon
61-
icon={style.icon as IconName}
62-
className={`mt-0.5 mr-3 size-4 shrink-0 ${style.iconColor}`}
63-
/>
64-
<div>
65-
{announcement.message}
66-
{hasLink ? (
67-
<div className={tcls(LinkStyles, style.link, 'ml-1 inline')}>
68-
{contentRef?.icon ? (
69-
<span className="mr-1 ml-2 *:inline">
70-
{contentRef?.icon}
71-
</span>
72-
) : null}
73-
{announcement.link?.title && (
74-
<span className="mr-1">{announcement.link?.title}</span>
75-
)}
76-
<Icon
77-
icon={
78-
announcement.link?.to.kind === 'url'
79-
? 'arrow-up-right'
80-
: 'chevron-right'
81-
}
82-
className={tcls('mb-0.5 inline size-3')}
83-
/>
84-
</div>
85-
) : null}
86-
</div>
87-
</Tag>
88-
{closeable ? (
89-
<Button
90-
iconOnly
91-
icon="close"
92-
label={tString(language, 'close')}
93-
variant="blank"
94-
size="default"
95-
onClick={dismissAnnouncement}
96-
className={`absolute top-0 right-4 mt-2 mr-2 circular-corners:rounded-lg rounded-sm straight-corners:rounded-none p-1.5 transition-all hover:ring-1 sm:right-6 md:right-8 ${style.close}`}
97-
/>
98-
) : null}
99-
</div>
37+
<div className="transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
38+
<div className={tcls('relative', CONTAINER_STYLE)}>
39+
<Tag
40+
href={contentRef?.href ?? ''}
41+
className={tcls(
42+
'flex w-full items-start justify-center overflow-hidden circular-corners:rounded-xl rounded-md straight-corners:rounded-none px-4 py-3 text-neutral-strong text-sm theme-bold:ring-1 theme-gradient:ring-1 ring-inset transition-colors',
43+
style.container,
44+
closeable && 'pr-12',
45+
hasLink && style.hover
46+
)}
47+
insights={
48+
announcement.link
49+
? {
50+
type: 'link_click',
51+
link: {
52+
target: announcement.link.to,
53+
position: SiteInsightsLinkPosition.Announcement,
54+
},
55+
}
56+
: undefined
57+
}
58+
>
59+
<Icon
60+
icon={style.icon as IconName}
61+
className={`mt-0.5 mr-3 size-4 shrink-0 ${style.iconColor}`}
62+
/>
63+
<div>
64+
{announcement.message}
65+
{hasLink ? (
66+
<div className={tcls(LinkStyles, style.link, 'ml-1 inline')}>
67+
{contentRef?.icon ? (
68+
<span className="mr-1 ml-2 *:inline">
69+
{contentRef?.icon}
70+
</span>
71+
) : null}
72+
{announcement.link?.title && (
73+
<span className="mr-1">{announcement.link?.title}</span>
74+
)}
75+
<Icon
76+
icon={
77+
announcement.link?.to.kind === 'url'
78+
? 'arrow-up-right'
79+
: 'chevron-right'
80+
}
81+
className={tcls('mb-0.5 inline size-3')}
82+
/>
83+
</div>
84+
) : null}
85+
</div>
86+
</Tag>
87+
{closeable ? (
88+
<Button
89+
iconOnly
90+
icon="close"
91+
label={tString(language, 'close')}
92+
variant="blank"
93+
size="default"
94+
onClick={dismissAnnouncement}
95+
className={`absolute top-0 right-4 mt-2 mr-2 circular-corners:rounded-lg rounded-sm straight-corners:rounded-none p-1.5 transition-all hover:ring-1 sm:right-6 md:right-8 ${style.close}`}
96+
/>
97+
) : null}
10098
</div>
10199
</div>
102100
</div>

0 commit comments

Comments
 (0)