Merge pull request #446 from albertdbio/fix/enable-text-selection-scrolly

Use z-index instead of relative to enable text selection

Author: pomber

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}