From 66475cefafc0a09ad0cdd187c3b073a0e5a7e18d Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: 2025年10月22日 13:15:57 +0200
Subject: [PATCH 1/3] Tweak language dropdown styling
---
 .changeset/quiet-comics-act.md &#124; 5 ++++
 .../gitbook/src/components/Header/Header.tsx &#124; 13 +++++----
 .../src/components/Header/SpacesDropdown.tsx &#124; 2 +-
 .../SiteSections/SiteSectionTabs.tsx &#124; 7 +++--
 .../components/primitives/ScrollContainer.tsx &#124; 27 ++++++++++++++++---
 5 files changed, 40 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/quiet-comics-act.md
diff --git a/.changeset/quiet-comics-act.md b/.changeset/quiet-comics-act.md
new file mode 100644
index 0000000000..b3ed43a649
--- /dev/null
+++ b/.changeset/quiet-comics-act.md
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Tweak language dropdown styling
diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx
index 38529ac070..999c4d1fd2 100644
--- a/packages/gitbook/src/components/Header/Header.tsx
+++ b/packages/gitbook/src/components/Header/Header.tsx
@@ -188,13 +188,12 @@ export function Header(props: {
 <div className="transition-[padding] duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
 <sitesectiontabs sections={encodeClientSiteSections(context, sections)}>
 {withVariants === 'translations' ? (
- <div className="before:contents[] flex self-start py-2 before:mr-4 before:border-tint before:border-l">
- <div class="naked_tr">- </div>
+ <div class="naked_tr"> ) : null}
 </sitesectiontabs>
 </div>
diff --git a/packages/gitbook/src/components/Header/SpacesDropdown.tsx b/packages/gitbook/src/components/Header/SpacesDropdown.tsx
index 1d6dd2773f..bb72f1e2a9 100644
--- a/packages/gitbook/src/components/Header/SpacesDropdown.tsx
+++ b/packages/gitbook/src/components/Header/SpacesDropdown.tsx
@@ -76,7 +76,7 @@ export function TranslationsDropdown(props: {
 siteSpaces={siteSpaces}
 variant="blank"
 className={tcls(
- '-mx-2 bg-transparent px-2 md:py-1 lg:max-w-64 max-md:[&_.button-content]:hidden',
+ 'bg-transparent px-2 md:py-1 lg:max-w-64 max-md:[&_.button-content]:hidden',
 hasEmojiPrefix
 ? 'md:[&_.button-leading-icon]:hidden' // If the title starts with an emoji, don't show the icon (on desktop)
 : '',
diff --git a/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx b/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx
index dce92e949e..7d4926b3bb 100644
--- a/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx
+++ b/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx
@@ -67,15 +67,18 @@ export function SiteSectionTabs(props: {
 className={tcls(
 'grow',
 'md:-ml-8 -ml-4 sm:-ml-6',
- !children ? 'md:-mr-8 -mr-4 sm:-mr-6' : ''
+ !children
+ ? 'md:-mr-8 -mr-4 sm:-mr-6'
+ : 'after:contents[] after:absolute after:inset-y-2 after:right-0 after:border-transparent after:border-r'
 )}
 activeId={currentSection.id}
+ trailingEdgeClassName={children ? 'after:border-tint' : ''}
>
 <navigationmenu.list className={tcls( '-mx-3 flex grow gap-2 bg-transparent', 'pl-4 sm:pl-6 md:pl-8', - !children ? 'pr-4 sm:pr-6 md:pr-8' : '' + !children ? 'pr-4 sm:pr-6 md:pr-8' : 'pr-4' )} aria-label="Sections" id="sections" diff --git a/packages/gitbook/src/components/primitives/ScrollContainer.tsx b/packages/gitbook/src/components/primitives/ScrollContainer.tsx index edbab415f5..92ffff8d42 100644 --- a/packages/gitbook/src/components/primitives/ScrollContainer.tsx +++ b/packages/gitbook/src/components/primitives/ScrollContainer.tsx @@ -15,6 +15,12 @@ export type ScrollContainerProps = { children: React.ReactNode; className?: string; + /** Optional class(es) to apply to the leading edge of the scroll container. Only rendered when there is more content than the container can display. */ + leadingEdgeClassName?: string; + + /** Optional class(es) to apply to the trailing edge of the scroll container. Only rendered when there is more content than the container can display. */ + trailingEdgeClassName?: string; + /** The direction of the scroll container. */ orientation: 'horizontal' &#124; 'vertical'; @@ -23,7 +29,15 @@ export type ScrollContainerProps = { } & React.HTMLAttributes<htmldivelement>;
 
 export function ScrollContainer(props: ScrollContainerProps) {
- const { children, className, orientation, activeId, ...rest } = props;
+ const {
+ children,
+ className,
+ orientation,
+ activeId,
+ leadingEdgeClassName,
+ trailingEdgeClassName,
+ ...rest
+ } = props;
 
 const containerRef = React.useRef<htmldivelement>(null);
 
@@ -110,7 +124,12 @@ export function ScrollContainer(props: ScrollContainerProps) {
 
 return (
 <div - className={tcls('group/scroll-container relative flex overflow-hidden', className)} + className={tcls( + 'group/scroll-container relative flex overflow-hidden', + className, + scrollPosition> 0 ? leadingEdgeClassName : '',
+ scrollPosition < scrollSize ? trailingEdgeClassName : '' + )} {...rest}>
 {/* Scrollable content */}
@@ -140,7 +159,7 @@ export function ScrollContainer(props: ScrollContainerProps) {
 icon={orientation === 'horizontal' ? 'chevron-left' : 'chevron-up'}
 iconOnly
 size="xsmall"
- variant="secondary"
+ variant="header"
 tabIndex={-1}
 className={tcls(
 orientation === 'horizontal'
@@ -158,7 +177,7 @@ export function ScrollContainer(props: ScrollContainerProps) {
 icon={orientation === 'horizontal' ? 'chevron-right' : 'chevron-down'}
 iconOnly
 size="xsmall"
- variant="secondary"
+ variant="header"
 tabIndex={-1}
 className={tcls(
 orientation === 'horizontal'
From 367f3e0ac4302e8af9a11b16f7cfe97861d80008 Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: 2025年10月22日 13:21:18 +0200
Subject: [PATCH 2/3] Rename
---
 .../components/SiteSections/SiteSectionTabs.tsx &#124; 2 +-
 .../components/primitives/ScrollContainer.tsx &#124; 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)
diff --git a/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx b/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx
index 7d4926b3bb..67e0809e8f 100644
--- a/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx
+++ b/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx
@@ -72,7 +72,7 @@ export function SiteSectionTabs(props: {
 : 'after:contents[] after:absolute after:inset-y-2 after:right-0 after:border-transparent after:border-r'
 )}
 activeId={currentSection.id}
- trailingEdgeClassName={children ? 'after:border-tint' : ''}
+ trailingEdgeScrollClassName={children ? 'after:border-tint' : ''}
>
 <navigationmenu.list className={tcls( diff --git a/packages/gitbook/src/components/primitives/ScrollContainer.tsx b/packages/gitbook/src/components/primitives/ScrollContainer.tsx index 92ffff8d42..15bf1c30b5 100644 --- a/packages/gitbook/src/components/primitives/ScrollContainer.tsx +++ b/packages/gitbook/src/components/primitives/ScrollContainer.tsx @@ -15,11 +15,11 @@ export type ScrollContainerProps = { children: React.ReactNode; className?: string; - /** Optional class(es) to apply to the leading edge of the scroll container. Only rendered when there is more content than the container can display. */ - leadingEdgeClassName?: string; + /** Optional class(es) to apply when there the container can be scrolled on the leading (left or top) edge */ + leadingEdgeScrollClassName?: string; - /** Optional class(es) to apply to the trailing edge of the scroll container. Only rendered when there is more content than the container can display. */ - trailingEdgeClassName?: string; + /** Optional class(es) to apply when there the container can be scrolled on the trailing (right or bottom) edge */ + trailingEdgeScrollClassName?: string; /** The direction of the scroll container. */ orientation: 'horizontal' &#124; 'vertical'; @@ -34,8 +34,8 @@ export function ScrollContainer(props: ScrollContainerProps) { className, orientation, activeId, - leadingEdgeClassName, - trailingEdgeClassName, + leadingEdgeScrollClassName, + trailingEdgeScrollClassName, ...rest } = props; @@ -127,8 +127,8 @@ export function ScrollContainer(props: ScrollContainerProps) { className={tcls( 'group/scroll-container relative flex overflow-hidden', className, - scrollPosition> 0 ? leadingEdgeClassName : '',
- scrollPosition < scrollSize ? trailingEdgeClassName : '' + scrollPosition> 0 ? leadingEdgeScrollClassName : '',
+ scrollPosition < scrollSize ? trailingEdgeScrollClassName : '' )} {...rest}>
From 39738dcce2399508df259519cf3de3a48fccf3b9 Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: 2025年10月22日 15:18:02 +0200
Subject: [PATCH 3/3] Alignment
---
 packages/gitbook/src/components/Header/SpacesDropdown.tsx &#124; 2 +-
 .../gitbook/src/components/SiteSections/SiteSectionTabs.tsx &#124; 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/gitbook/src/components/Header/SpacesDropdown.tsx b/packages/gitbook/src/components/Header/SpacesDropdown.tsx
index bb72f1e2a9..1d6dd2773f 100644
--- a/packages/gitbook/src/components/Header/SpacesDropdown.tsx
+++ b/packages/gitbook/src/components/Header/SpacesDropdown.tsx
@@ -76,7 +76,7 @@ export function TranslationsDropdown(props: {
 siteSpaces={siteSpaces}
 variant="blank"
 className={tcls(
- 'bg-transparent px-2 md:py-1 lg:max-w-64 max-md:[&_.button-content]:hidden',
+ '-mx-2 bg-transparent px-2 md:py-1 lg:max-w-64 max-md:[&_.button-content]:hidden',
 hasEmojiPrefix
 ? 'md:[&_.button-leading-icon]:hidden' // If the title starts with an emoji, don't show the icon (on desktop)
 : '',
diff --git a/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx b/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx
index 67e0809e8f..9bf7be4a4c 100644
--- a/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx
+++ b/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx
@@ -69,7 +69,7 @@ export function SiteSectionTabs(props: {
 'md:-ml-8 -ml-4 sm:-ml-6',
 !children
 ? 'md:-mr-8 -mr-4 sm:-mr-6'
- : 'after:contents[] after:absolute after:inset-y-2 after:right-0 after:border-transparent after:border-r'
+ : 'after:contents[] after:absolute after:inset-y-2 after:right-0 after:border-transparent after:border-r after:transition-colors'
 )}
 activeId={currentSection.id}
 trailingEdgeScrollClassName={children ? 'after:border-tint' : ''}
</div><div class="naked_ctrl">
<form action="/index.cgi/larger-text" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://patch-diff.githubusercontent.com/raw/GitbookIO/gitbook/pull/3748.patch">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://patch-diff.githubusercontent.com/raw/GitbookIO/gitbook/pull/3748.patch" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast">配色反転</option>
<option value="larger-text" selected="selected">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>