fix styling of breadcrumbs on mobile

konfig-dev · Mar 28, 2024 · 931802e · 931802e
1 parent 882d20a
commit 931802e
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/generator/konfig-docs/src/components/Breadcrumbs.tsx b/generator/konfig-docs/src/components/Breadcrumbs.tsx
@@ -34,12 +34,12 @@ export function Breadcrumbs({
       <div
         data-dark={dark}
         className={cn(
-          "data-[dark=true]:text-black text-white mx-0 sm:mx-auto px-3 max-w-[375px] sm:max-w-none sm:px-24 text-lg font-semibold",
+          "data-[dark=true]:text-black text-white mx-0 sm:mx-auto px-3 max-w-[375px] sm:max-w-none sm:px-24 text-sm sm:text-lg font-semibold",
           className
         )}
       >
         <nav>
-          <ol className="px-0 mb-0 flex gap-1 list-none items-center">
+          <ol className="px-0 mb-0 flex gap-0 sm:gap-1 list-none items-center">
             <li>
               <BreadcrumbLink href="/sdk/category/all">SDKs</BreadcrumbLink>
             </li>
@@ -107,7 +107,7 @@ function BreadcrumbSeparator() {
   return (
     <IconChevronRight
       data-dark={dark}
-      className="h-5 data-[dark=true]:text-slate-800 text-blue-200"
+      className="h-4 sm:h-5 shrink-0 data-[dark=true]:text-slate-800 text-blue-200"
     />
   );
 }