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/SiteSections/SiteSectionTabs.tsx b/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx
index dce92e949e..9bf7be4a4c 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 after:transition-colors'
 )}
 activeId={currentSection.id}
+ trailingEdgeScrollClassName={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..15bf1c30b5 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 when there the container can be scrolled on the leading (left or top) edge */ + leadingEdgeScrollClassName?: 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'; @@ -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,
+ leadingEdgeScrollClassName,
+ trailingEdgeScrollClassName,
+ ...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 ? leadingEdgeScrollClassName : '',
+ scrollPosition < scrollSize ? trailingEdgeScrollClassName : '' + )} {...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'
</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.diff">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://patch-diff.githubusercontent.com/raw/GitbookIO/gitbook/pull/3748.diff" 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>