correct some flex/grid spacings

components/activity-calendar.tsx

@@ -48,7 +48,7 @@ const Calendar = ({
           <Tooltip>
             <TooltipTrigger asChild>{block}</TooltipTrigger>
             <TooltipContent>
-              <span className="text-xs font-medium">{`${activity.count === 0 ? "No" : activity.count} ${noun}${activity.count === 1 ? "" : "s"} on ${format(activity.date, "MMMM do")}`}</span>
+              <span className="text-[0.825rem] font-medium">{`${activity.count === 0 ? "No" : activity.count} ${noun}${activity.count === 1 ? "" : "s"} on ${format(activity.date, "MMMM do")}`}</span>
             </TooltipContent>
           </Tooltip>
         )}

components/code-block.tsx

@@ -1,6 +1,6 @@
 import { codeToHtml } from "shiki";
 import reactToText from "react-to-text";
-import { CodeIcon } from "lucide-react";
+import { CodeIcon, TerminalIcon } from "lucide-react";
 import CopyButton from "@/components/copy-button";
 import { cn } from "@/lib/utils";
 import type { ComponentProps, ComponentPropsWithoutRef } from "react";
@@ -38,37 +38,11 @@ const CodeBlock = async ({
     },
   });
 
-  const getFullLang = (lang: string) => {
-    // replace the file extension with the full language name when it makes sense to
-    switch (lang.toLowerCase()) {
-      case "js":
-        return "JavaScript";
-      case "jsx":
-        return "JavaScript (JSX)";
-      case "ts":
-        return "TypeScript";
-      case "tsx":
-        return "TypeScript (JSX)";
-      case "sh":
-      case "bash":
-      case "zsh":
-        return "Shell";
-      case "py":
-        return "Python";
-      case "md":
-        return "Markdown";
-      case "mdx":
-        return "Markdown (MDX)";
-      default:
-        return lang;
-    }
-  };
-
   return (
-    <div className={cn("bg-muted/35 relative isolate rounded-lg border-2 font-mono", className)}>
+    <div className={cn("bg-muted/35 relative isolate rounded-lg border-2 font-mono shadow", className)}>
       <div
         className={cn(
-          "grid max-h-[500px] w-full overflow-x-auto p-4 **:bg-transparent! data-language:pt-9 md:max-h-[650px] dark:**:text-[var(--shiki-dark)]! [&_pre]:whitespace-normal",
+          "grid max-h-[500px] w-full overflow-x-auto overscroll-x-none p-4 **:bg-transparent! data-language:pt-10 md:max-h-[650px] dark:**:text-[var(--shiki-dark)]! [&_pre]:whitespace-normal",
           "[&_.line]:inline-block [&_.line]:min-w-full [&_.line]:py-1 [&_.line]:leading-none [&_.line]:whitespace-pre [&_.line]:after:hidden",
           "data-line-numbers:[&_.line]:before:text-muted-foreground data-line-numbers:[counter-reset:line] data-line-numbers:[&_.line]:[counter-increment:line] data-line-numbers:[&_.line]:before:mr-5 data-line-numbers:[&_.line]:before:inline-block data-line-numbers:[&_.line]:before:w-5 data-line-numbers:[&_.line]:before:text-right data-line-numbers:[&_.line]:before:content-[counter(line)]"
         )}
@@ -77,15 +51,24 @@ const CodeBlock = async ({
         dangerouslySetInnerHTML={{ __html: codeHighlighted }}
       />
       {lang && (
-        <span className="text-foreground/75 bg-muted/40 absolute top-0 left-0 flex items-center rounded-tl-md rounded-br-lg border-r-2 border-b-2 py-[5px] pr-[10px] font-mono text-xs font-medium tracking-wide uppercase backdrop-blur-xs select-none">
-          <CodeIcon className="stroke-primary/90 mr-[8px] ml-[10px] inline-block size-[14px]" />
-          <span>{getFullLang(lang)}</span>
+        <span className="[&_svg]:stroke-primary/90 text-foreground/75 bg-muted/40 absolute top-0 left-0 z-10 flex items-center gap-[8px] rounded-tl-md rounded-br-lg border-r-2 border-b-2 px-[10px] py-[5px] font-mono text-xs font-medium tracking-wide uppercase backdrop-blur-xs select-none [&_svg]:size-[14px] [&_svg]:shrink-0">
+          {["sh", "bash", "zsh"].includes(lang) ? (
+            <>
+              <TerminalIcon />
+              <span>Shell</span>
+            </>
+          ) : (
+            <>
+              <CodeIcon />
+              <span>{lang}</span>
+            </>
+          )}
         </span>
       )}
       {showCopyButton && (
         <CopyButton
           source={codeString}
-          className="text-foreground/75 hover:text-primary bg-muted/40 absolute top-0 right-0 size-10 rounded-tr-md rounded-bl-lg border-b-2 border-l-2 p-0 backdrop-blur-xs select-none [&_svg]:my-auto [&_svg]:inline-block [&_svg]:size-4.5 [&_svg]:align-text-bottom"
+          className="text-foreground/75 hover:text-primary bg-muted/40 absolute top-0 right-0 z-10 size-10 rounded-tr-md rounded-bl-lg border-b-2 border-l-2 p-0 backdrop-blur-xs select-none [&_svg]:my-auto [&_svg]:inline-block [&_svg]:size-4.5 [&_svg]:align-text-bottom"
         />
       )}
     </div>

components/heading-anchor.tsx

@@ -13,7 +13,7 @@ const HeadingAnchor = ({ id, title, className }: { id: string; title: string; cl
       aria-hidden="true"
       tabIndex={-1}
     >
-      <LinkIcon className="inline-block size-4 align-baseline" />
+      <LinkIcon className="inline-block size-[0.75em] align-baseline" />
       <span className="sr-only">Permalink to &ldquo;{reactToText(title)}&rdquo;</span>
     </a>
   );

components/layout/footer.tsx

@@ -25,7 +25,7 @@ const Footer = ({ className, ...rest }: ComponentPropsWithoutRef<"footer">) => {
 
       <div>
         Made with{" "}
-        <HeartIcon className="animate-heartbeat stroke-destructive fill-destructive mx-0.5 inline size-4 align-text-top" />{" "}
+        <HeartIcon className="animate-heartbeat stroke-destructive fill-destructive mx-[1px] inline size-4 align-text-top" />{" "}
         and{" "}
         <Link
           href="https://nextjs.org/"
@@ -39,7 +39,7 @@ const Footer = ({ className, ...rest }: ComponentPropsWithoutRef<"footer">) => {
             stroke="currentColor"
             strokeWidth="0"
             viewBox="0 0 24 24"
-            className="mx-0.5 inline size-4 align-text-top"
+            className="mx-[1px] inline size-4 align-text-top"
           >
             <path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z" />
           </svg>

components/layout/header.tsx

@@ -31,7 +31,7 @@ const Header = ({ className, ...rest }: ComponentPropsWithoutRef<"header">) => {
         </span>
       </Link>
 
-      <Menu className="ml-6 w-full max-w-64 sm:ml-4 sm:max-w-96 md:ml-0 md:max-w-none" />
+      <Menu className="w-full max-w-64 sm:max-w-96 md:ml-0 md:max-w-none" />
     </header>
   );
 };

components/layout/menu.tsx

@@ -13,7 +13,7 @@ const Menu = ({ className, ...rest }: ComponentPropsWithoutRef<"ul">) => {
   return (
     <ul
       className={cn(
-        "flex max-w-2/3 flex-row justify-between md:max-w-none md:justify-end md:space-x-4 max-sm:[&>li]:first-of-type:hidden",
+        "flex max-w-2/3 flex-row justify-between md:max-w-none md:justify-end md:gap-4 max-sm:[&>li]:first-of-type:hidden",
         className
       )}
       {...rest}

components/layout/skip-nav.tsx

@@ -1,8 +1,8 @@
 import Button from "@/components/ui/button";
 
-const SKIP_NAV_ID = "skip-nav";
+export const SKIP_NAV_ID = "skip-nav";
 
-export const SkipNavLink = () => {
+const SkipNavButton = () => {
   return (
     <Button
       asChild
@@ -14,8 +14,4 @@ export const SkipNavLink = () => {
   );
 };
 
-export const SkipNavTarget = () => {
-  return <div id={SKIP_NAV_ID} />;
-};
-
-export default SkipNavLink;
+export default SkipNavButton;

components/ui/tooltip.tsx

@@ -35,13 +35,13 @@ const TooltipContent = ({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md bg-black px-3 py-1.5 text-xs text-balance text-white/90 shadow-sm select-none",
+          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md bg-black px-3 py-1.5 text-xs text-balance text-white/90 shadow select-none",
           className
         )}
         {...rest}
       >
         {children}
-        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-black fill-black shadow-sm" />
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-black fill-black shadow" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   );