Change gap and margin

components/bar-chart.tsx

@@ -1,12 +1,12 @@
 "use client"
 
-import { Bar, BarChart, LabelList, XAxis, YAxis, Cell } from "recharts"
-import { cn } from "@/lib/utils"
+import { Bar, BarChart, LabelList, XAxis, YAxis, Cell } from "recharts";
+import { cn } from "@/lib/utils";
 
 import {
   ChartContainer,
   type ChartConfig,
-} from "@/components/ui/chart"
+} from "@/components/ui/chart";
 
 const COLORS = [
   "#4ade80",

components/code-block.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react'
-import CodeEditorPrimitive from '@uiw/react-textarea-code-editor'
+import * as React from "react";
+import CodeEditorPrimitive from "@uiw/react-textarea-code-editor";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/lib/utils";
 
 function CodeEditor({
   className,

components/theme-provider.tsx

@@ -1,11 +1,11 @@
 "use client"
 
-import * as React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
 
 export function ThemeProvider({
-	children,
-	...props
+  children,
+  ...props
 }: React.ComponentProps<typeof NextThemesProvider>) {
-	return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
 }

components/typography.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 // https://ui.shadcn.com/docs/components/radix/typography.md
 
@@ -16,7 +16,7 @@ export function H1({ className, children, ...props }: React.HTMLAttributes<HTMLH
 export function H2({ className, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
   return (
     <h2
-      className={cn("scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0", className)}
+      className={cn("scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0", className)}
       {...props}
     >
       {children}

components/ui/card.tsx

@@ -45,7 +45,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-description"
       className={cn("text-muted-foreground text-sm", className)}
-      {...props}
+      {...props}  
     />
   )
 }

components/wakatime-hint.tsx

@@ -12,7 +12,7 @@ export function WakatimeHint() {
           <CircleHelp size={24} />
         </button>
       </HoverCardTrigger>
-      <HoverCardContent className="w-[560px] p-0 mt-2 border-none shadow-none" side="bottom" align="center">
+      <HoverCardContent className="w-[560px] p-0 mb-2 border-none shadow-none" side="top" align="center">
         <CodeEditor
           value={`const response = await fetch(\n  "https://wakatime.com/api/v1/users/alixz/stats/last_30_days"\n);\nconst res = await response.json();\nconst data = res.data.languages.slice(0, 5);`}
           language="ts"