Tweak language dropdown styling (#3748)

.changeset/quiet-comics-act.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Tweak language dropdown styling

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">
-                                <TranslationsDropdown
-                                    context={context}
-                                    siteSpace={siteSpace}
-                                    siteSpaces={siteSpaces}
-                                />
-                            </div>
+                            <TranslationsDropdown
+                                context={context}
+                                siteSpace={siteSpace}
+                                siteSpaces={siteSpaces}
+                                className="my-2 ml-2 self-start"
+                            />
                         ) : null}
                     </SiteSectionTabs>
                 </div>

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"

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' | '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'