UI fixes

Author: abrulic

docs/app/components/backdrop.tsx

@@ -3,7 +3,7 @@ import { cn } from "~/utils/css"
 export const Backdrop = ({ onClose }: { onClose: () => void }) => (
 	// biome-ignore lint/a11y/useKeyWithClickEvents: We don't need keyboard events for backdrop
 	<div
-		className={cn("fixed inset-0 bg-[var(--color-modal-backdrop)] backdrop-blur-sm transition-opacity duration-200")}
+		className={cn("fixed inset-0 bg-[var(--color-modal-backdrop)] backdrop-blur-sm transition-opacity duration-200 z-50")}
 		onClick={(e) => {
 			if (e.target === e.currentTarget) {
 				onClose()

docs/app/components/icon-link.tsx

@@ -22,7 +22,7 @@ export const IconLink = ({ name, className, ...props }: IconLinkProps) => {
 			href={href}
 			{...props}
 		>
-			<Icon name={name} className="size-4 transition-all duration-300 xl:size-5" />
+			<Icon name={name} className="size-4 transition-transform duration-300 xl:size-5" />
 		</a>
 	)
 }

docs/app/components/modal.tsx

@@ -65,8 +65,9 @@ export const Modal = ({
 	if (!isOpen) return null
 
 	return (
+		<>
+		<Backdrop onClose={onClose} />
 		<div className="fixed inset-0 z-50 overflow-y-auto overscroll-contain">
-			<Backdrop onClose={onClose} />
 			<div className="flex min-h-full items-start justify-center p-4 pt-16 sm:pt-24">
 				<div
 					ref={modalRef}
@@ -83,5 +84,6 @@ export const Modal = ({
 				</div>
 			</div>
 		</div>
+		</>
 	)
 }

docs/app/components/page-mdx-article.tsx

@@ -4,7 +4,7 @@ import { MDXWrapper } from "./mdx-wrapper"
 
 export default function PageMdxArticle({ page }: { page: Page }) {
 	return (
-		<article className="prose prose-invert w-full min-w-0 max-w-4xl flex-grow px-3 py-3 prose-headings:text-[var(--color-text-active)] prose-p:text-[var(--color-text-active)] text-sm leading-6 sm:text-base md:px-6 md:py-4 md:text-lg xl:leading-8">
+		<article className="prose prose-invert w-full min-w-0 max-w-4xl flex-grow px-3 py-3 prose-headings:text-[var(--color-text-active)] prose-p:text-[var(--color-text-active)] text-sm leading-7 md:leading-8 sm:text-base md:px-6 md:py-4 md:text-lg xl:leading-9">
 			<header className=" border-[var(--color-border)] border-b">
 				<Title className="mt-0 font-bold text-[var(--color-text-heading)]" as="h1">
 					{page.title}

docs/app/tailwind.css

@@ -14,11 +14,6 @@
 --animate-scroll: scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite;
 --animate-spotlight: spotlight 2s ease .75s 1 forwards;
 --animate-meteor-effect: meteor 5s linear infinite;
-
-/* Keyframes */
---keyframes-scroll: 0% { transform: translate(0); } 100% { transform: translate(calc(-50% - 0.5rem)); };
---keyframes-meteor: 0% { transform: rotate(215deg) translateX(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: rotate(215deg) translateX(-1900px); opacity: 0; };
---keyframes-spotlight: 0% { opacity: 0; transform: translate(-72%, -62%) scale(0.5); } 100% { opacity: 1; transform: translate(-50%,-40%) scale(1); };
 }
 
 @keyframes scroll {
@@ -74,7 +69,7 @@
 		--color-code-keyword: #0369a1;
 		--color-code-string: #04825b;
 		--color-code-number: #c84b0a;
-		--color-code-comment: #64748b;
+		--color-code-comment: #7f90a7;
 		--color-code-operator: #be185d;
 		--color-code-punctuation: #64748b;
 		--color-code-function: #7c3aed;
@@ -83,7 +78,7 @@
 		--color-diff-added-border: rgba(34, 197, 94, 0.3);
 		--color-diff-removed-bg: rgba(239, 68, 68, 0.1);
 		--color-diff-removed-border: rgba(239, 68, 68, 0.3);
-		--color-diff-indicator: #64748b;
+		--color-diff-indicator: #08162b;
 
 		--color-info-bg: #eff6ff;
 		--color-info-border: #bfdbfe;

docs/app/ui/alert.tsx

@@ -56,7 +56,7 @@ export const Alert = ({ children, title, variant, className = "" }: AlertProps)
 		<div className={cn("my-6 flex flex-col gap-2 rounded-xl border p-4 md:p-6", styles.container, className)}>
 			<div className="inline-flex items-center gap-2">
 				<div className={cn("inline-flex", styles.icon)}>{getIcon()}</div>
-				<p className={cn("mt-0 mb-0 font-semibold text-sm md:text-base", styles.title)}>{title || defaultTitle}</p>
+				<p className={cn("mt-0 mb-0 font-semibold text-sm leading-6 sm:text-base md:text-lg", styles.title)}>{title || defaultTitle}</p>
 			</div>
 
 			<div

docs/app/ui/icon-button.tsx

@@ -13,12 +13,12 @@ export const IconButton = ({ name, className, ...props }: IconButtonProps) => {
 		<button
 			type="button"
 			className={cn(
-				"group relative inline-flex cursor-pointer items-center justify-center rounded-full text-[var(--color-text-active)] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border)] focus-visible:ring-offset-2",
+				"group  inline-flex cursor-pointer items-center justify-center rounded-full text-[var(--color-text-active)] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border)] focus-visible:ring-offset-2",
 				className
 			)}
 			{...props}
 		>
-			<Icon name={name} className={cn("size-4 transition-all duration-300 xl:size-5", className)} />
+			<Icon name={name} className={cn("size-4 transition-transform duration-300 xl:size-5", className)} />
 		</button>
 	)
 }

docs/app/ui/inline-code.tsx

@@ -14,7 +14,7 @@ export const InlineCode = (props: ComponentPropsWithoutRef<"code">) => {
 	return (
 		<code
 			{...props}
-			className="rounded bg-[var(--color-code-inline-bg)] py-1 px-2 mx-1 text-[var(--color-code-inline-text)] text-xs sm:text-sm md:text-base "
+			className="rounded bg-[var(--color-code-inline-bg)] py-1 px-2 mx-0.5 text-[var(--color-code-inline-text)] text-xs sm:text-sm md:text-base "
 		/>
 	)
 }

docs/content/03-configuration/01-client.mdx

@@ -143,7 +143,7 @@ By default the breakpoints are set to tailwind breakpoints but you can change th
 
 Eg:
 ```ts
-    breakpoints: [{name: "lg", min: 0, max: 768}, {name: "xl", min: 768, max: 1024}, {name: "2xl", min: 1024, max: Infinity}],
+breakpoints: [{name: "lg", min: 0, max: 768}, {name: "xl", min: 768, max: 1024}, {name: "2xl", min: 1024, max: Infinity}],
 ```
 
 ## Show breakpoint indicator