fix highlighting

fern-api · Feb 22, 2024 · 2a46c62 · 2a46c62
1 parent de6f6a7
commit 2a46c62
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/packages/ui/app/src/docs/Header.tsx b/packages/ui/app/src/docs/Header.tsx
@@ -41,7 +41,7 @@ const UnmemoizedHeader = forwardRef<HTMLDivElement, PropsWithChildren<Header.Pro
     const { navbarLinks, colorsV3 } = config;
     const navbarLinksSection = (
         <div className="hidden lg:block">
-            <FernButtonGroup>
+            <FernButtonGroup className="ml-2">
                 {navbarLinks?.map((navbarLink, idx) => (
                     <FernLinkButton
                         key={idx}
@@ -88,7 +88,7 @@ const UnmemoizedHeader = forwardRef<HTMLDivElement, PropsWithChildren<Header.Pro
 
             {showSearchBar && searchService.isAvailable && (
                 <div
-                    className={classNames("max-w-content-width w-full max-lg:hidden", {
+                    className={classNames("max-w-content-width w-full max-lg:hidden shrink min-w-0", {
                         invisible: isSearchDialogOpen,
                     })}
                 >

diff --git a/packages/ui/app/src/docs/HeaderLogoSection.tsx b/packages/ui/app/src/docs/HeaderLogoSection.tsx
@@ -57,7 +57,7 @@ export const HeaderLogoSection: React.FC<HeaderLogoSectionProps> = ({
     };
 
     return (
-        <div className="relative flex h-full flex-1 items-center space-x-3 py-1">
+        <div className="relative mr-2 flex h-full flex-1 shrink-0 items-center space-x-3 py-1">
             {logoHref != null ? (
                 <Link href={logoHref} className="flex items-center">
                     {renderLogoContent()}

diff --git a/packages/ui/app/src/next-app/globals.scss b/packages/ui/app/src/next-app/globals.scss
@@ -30,7 +30,21 @@
     }
 
     ::selection {
-        @apply bg-accent-highlight;
+        @apply bg-accent-highlight-light;
+    }
+
+    ::-moz-selection {
+        @apply bg-accent-highlight-light;
+    }
+
+    :is(.dark) {
+        ::selection {
+            @apply bg-accent-highlight-dark;
+        }
+
+        ::-moz-selection {
+            @apply bg-accent-highlight-dark;
+        }
     }
 
     html,