From 675a0f7e9a0376a5bb20842cc63835511709ee03 Mon Sep 17 00:00:00 2001
From: Albert Martinez <ioalbertdb@gmail.com>
Date: Sat, 31 Aug 2024 13:34:49 -0700
Subject: [PATCH 1/2] Use z-index instead of relative to enable text selection

---
 apps/web/content/blog/fine-grained/scrolly.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/content/blog/fine-grained/scrolly.tsx b/apps/web/content/blog/fine-grained/scrolly.tsx
index cedcb29e..369867f0 100644
--- a/apps/web/content/blog/fine-grained/scrolly.tsx
+++ b/apps/web/content/blog/fine-grained/scrolly.tsx
@@ -74,7 +74,7 @@ function Rich(props: ContentProps) {
         />
       </div>
       <div
-        className="flex-1 min-w-0 relative flex flex-col gap-[calc(100vh-7rem)]"
+        className="flex-1 min-w-0 flex flex-col gap-[calc(100vh-7rem)]"
         style={{ paddingTop: 32, paddingBottom: stickerHeight }}
       >
         {blocks.map((step, i) => (
@@ -90,7 +90,7 @@ function StepMessage({ step, index }: { step: Step; index: number }) {
     <Selectable
       index={index}
       selectOn={["scroll"]}
-      className="data-[selected=true]:opacity-100 opacity-50 transition-opacity duration-300 border border-[var(--ch-23)] rounded bg-[var(--ch-22)] px-4 mx-12 prose-h3:mt-4"
+      className="z-10 data-[selected=true]:opacity-100 opacity-50 transition-opacity duration-300 border border-[var(--ch-23)] rounded bg-[var(--ch-22)] px-4 mx-12 prose-h3:mt-4"
     >
       {step.children}
       {step.after?.children}

From 1615b5afae47230ca67801a7e12fcaf18a543dcd Mon Sep 17 00:00:00 2001
From: Rodrigo Pombo <pombopombopombo@gmail.com>
Date: Wed, 4 Sep 2024 13:05:20 +0200
Subject: [PATCH 2/2] Fix tooltips on mobile

---
 apps/web/components/blocks-to-context.tsx       | 8 +++++---
 apps/web/content/blog/build-time-components.mdx | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/web/components/blocks-to-context.tsx b/apps/web/components/blocks-to-context.tsx
index 9329c261..63576c8d 100644
--- a/apps/web/components/blocks-to-context.tsx
+++ b/apps/web/components/blocks-to-context.tsx
@@ -38,10 +38,12 @@ export function WithTooltip({
     ? "p-0 [&>*]:my-0 border-none overflow-auto rounded-none"
     : ""
   return (
-    <TooltipProvider>
+    <TooltipProvider delayDuration={100}>
       <Tooltip>
-        <TooltipTrigger className="underline decoration-dotted underline-offset-4 cursor-help">
-          {children}
+        <TooltipTrigger asChild>
+          <span className="underline decoration-dotted underline-offset-4 cursor-help">
+            {children}
+          </span>
         </TooltipTrigger>
         <TooltipContent className={className}>{block?.children}</TooltipContent>
       </Tooltip>
diff --git a/apps/web/content/blog/build-time-components.mdx b/apps/web/content/blog/build-time-components.mdx
index 2e2bb42b..14b10645 100644
--- a/apps/web/content/blog/build-time-components.mdx
+++ b/apps/web/content/blog/build-time-components.mdx
@@ -229,7 +229,7 @@ If you didn't know anything about the build process, your first thought might be
 
 Let's assume we already have a <WithTooltip name="one">_`async function scrape(url)`_</WithTooltip> that given a URL it fetches the HTML, finds the open graph image tag, and returns the `content` attribute, which is the URL of the image we want.
 
-We also have a <WithTooltip name="two">_`function LinkWithCard({ href, children, image })`_</WithTooltip> that renders a link with a hover card that shows the image (I'm using [shadcn's Hover Card](https://ui.shadcn.com/docs/components/hover-card)).
+We also have a <WithTooltip name="two">_`function LinkWithCard({ href, children, image })`_</WithTooltip> that renders a link with a hover card that shows the image.
 
 ## !one