Improve list item indentation (#134)

fern-api · Sep 21, 2023 · 006f715 · 006f715 · vercel · Sep 21, 2023
1 parent f2f6adb
commit 006f715
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/packages/ui/app/src/mdx/base-components.tsx b/packages/ui/app/src/mdx/base-components.tsx
@@ -267,26 +267,26 @@ export const P: React.FC<{ variant: "api" | "markdown" } & HTMLAttributes<HTMLPa
     );
 };
 
-export const Ol: React.FC<HTMLAttributes<HTMLOListElement>> = ({ className, ...rest }) => {
-    return <ol {...rest} className={classNames(className, "list-inside list-decimal space-y-2 mb-3")} />;
-};
-
 export const Strong: React.FC<HTMLAttributes<unknown>> = ({ className, ...rest }) => {
     return (
         <strong
             {...rest}
-            className={classNames(className, " !text-text-primary-light dark:!text-text-primary-dark font-semibold")}
+            className={classNames(className, "!text-text-primary-light dark:!text-text-primary-dark font-semibold")}
         />
     );
 };
 
+export const Ol: React.FC<HTMLAttributes<HTMLOListElement>> = ({ className, ...rest }) => {
+    return <ol {...rest} className={classNames(className, "list-outside list-decimal space-y-2 mb-3 ml-6")} />;
+};
+
 export const Ul: React.FC<HTMLAttributes<HTMLUListElement>> = ({ className, ...rest }) => {
     return (
         <ul
             {...rest}
             className={classNames(
                 className,
-                "list-image-dash-light dark:list-image-dash-dark list-inside space-y-2 mb-3"
+                "list-image-dash-light list-outside dark:list-image-dash-dark space-y-2 mb-3 ml-[22px]" // 22px is the width of the dash svg
             )}
         />
     );