krispire/spsays-training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: text selection

Browse Source
This commit is contained in:
gosangam
2026-06-05 14:13:13 +05:30
parent 684ea2ae97
commit 0db339254d
9 changed files with 44 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/social/collection-scroll-card.tsx
+1 -1
View File
@@ -119,7 +119,7 @@ export function CollectionScrollCard({
const showArrows = slideCount > 1;
return (
<article ref={cardRef} className="space-y-3">
<article ref={cardRef} className="space-y-3 select-none">
<div className="relative max-w-xl mx-auto">
<div
ref={scrollRef}
components/social/edit-collection-drawer.tsx
+4 -4
View File
@@ -208,7 +208,7 @@ export function EditCollectionDrawer({
: "max-w-md sm:max-w-lg"
}
>
<DrawerHeader className="shrink-0 text-left flex items-center justify-between pb-2">
<DrawerHeader className="shrink-0 text-left flex items-center justify-between pb-2 select-none">
<DrawerTitle>Edit collection</DrawerTitle>
<DrawerClose asChild>
<button
@@ -222,7 +222,7 @@ export function EditCollectionDrawer({
</DrawerClose>
</DrawerHeader>
<div className="flex-1 min-h-0 overflow-y-auto px-4 pb-4 space-y-5">
<div className="flex-1 min-h-0 overflow-y-auto px-4 pb-4 space-y-5 select-none">
{/* Cover */}
<section className="flex items-start gap-4">
<div className="relative size-24 rounded-lg overflow-hidden bg-muted ring-1 ring-foreground/10 shrink-0">
@@ -283,7 +283,7 @@ export function EditCollectionDrawer({
value={title}
onChange={(e) => setTitle(e.target.value)}
maxLength={120}
className="w-full bg-background text-foreground text-base rounded-md border border-border px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
className="w-full bg-background text-foreground text-base rounded-md border border-border px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-primary/40 select-text"
/>
</section>
@@ -297,7 +297,7 @@ export function EditCollectionDrawer({
onChange={(e) => setDescription(e.target.value)}
rows={3}
placeholder="Optional"
className="w-full bg-background text-foreground text-sm rounded-md border border-border px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-primary/40 resize-none"
className="w-full bg-background text-foreground text-sm rounded-md border border-border px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-primary/40 resize-none select-text"
/>
</section>
components/social/page-bookmarks.tsx
+1 -1
View File
@@ -195,7 +195,7 @@ export function PageBookmarks() {
left: m.left,
zIndex: 5,
}}
className="pointer-events-none"
className="pointer-events-none select-none"
>
<div className="pointer-events-auto relative inline-flex items-center gap-1 rounded-full bg-violet-500 shadow-lg px-2.5 py-1 animate-in fade-in-0 zoom-in-95">
<Bookmark className="size-3.5 text-white" />
components/social/post-card-menu.tsx
+22 -19
View File
@@ -19,7 +19,7 @@
* elsewhere in the post action UI.
*/
import { useEffect, useRef, useState } from "react";
import { useCallback, useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { Ban, Flag, MoreVertical, Trash2 } from "lucide-react";
import { toast } from "sonner";
@@ -90,37 +90,35 @@ export function PostCardMenu({
: post.author_name || "this user";
// Desktop popover positioning: anchor below the trigger, right-aligned.
// Recompute every time we open + on resize so a viewport change between
// renders doesn't strand the popover at a stale coordinate.
useEffect(() => {
if (!open || isMobile) {
setPopPos(null);
return;
}
function recompute() {
// We measure in event handlers (the open click + resize/scroll), never
// synchronously inside an effect body, so opening can't trigger a
// cascading render. The effect below only wires the resize/scroll
// listeners while the popover is open.
const recompute = useCallback(() => {
const btn = triggerRef.current;
if (!btn) return;
const rect = btn.getBoundingClientRect();
const popoverW = 240;
const pad = 8;
// Right-align the popover to the trigger's right edge — feels
// natural for an overflow menu sitting in the top-right corner.
// Right-align the popover to the trigger's right edge — feels natural
// for an overflow menu sitting in the top-right corner.
let left = rect.right - popoverW;
if (left < pad) left = pad;
if (left + popoverW > window.innerWidth - pad) {
left = window.innerWidth - popoverW - pad;
}
const top = rect.bottom + 4;
setPopPos({ top, left });
}
recompute();
setPopPos({ top: rect.bottom + 4, left });
}, []);
useEffect(() => {
if (!open || isMobile) return;
window.addEventListener("resize", recompute);
window.addEventListener("scroll", recompute, true);
return () => {
window.removeEventListener("resize", recompute);
window.removeEventListener("scroll", recompute, true);
};
}, [open, isMobile]);
}, [open, isMobile, recompute]);
// Click-outside + Escape to close (desktop only; the drawer's own
// overlay handles dismissal on mobile).
@@ -202,7 +200,12 @@ export function PostCardMenu({
<button
ref={triggerRef}
type="button"
onClick={() => setOpen((v) => !v)}
onClick={() => {
// Measure synchronously in the click (an event handler — safe) so
// the popover renders at the right spot on first paint.
if (!open && !isMobile) recompute();
setOpen((v) => !v);
}}
aria-label="Post options"
aria-haspopup="menu"
aria-expanded={open}
@@ -219,7 +222,7 @@ export function PostCardMenu({
// Menu surface: bottom drawer on mobile, floating popover on desktop.
const menu = isMobile ? (
<Drawer open={open} onOpenChange={(o) => setOpen(o)}>
<DrawerContent className="bg-card">
<DrawerContent className="bg-card select-none">
<DrawerHeader className="text-left border-b border-border pb-3">
<DrawerTitle>Post options</DrawerTitle>
</DrawerHeader>
@@ -242,7 +245,7 @@ export function PostCardMenu({
zIndex: 60,
}}
className={cn(
"w-60 rounded-lg border border-border bg-card shadow-lg py-1",
"w-60 rounded-lg border border-border bg-card shadow-lg py-1 select-none",
"animate-in fade-in-0 zoom-in-95",
)}
>
components/social/post-card.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ export function PostCard({
const authorHandle = post.author_handle ?? null;
return (
<article className="rounded-xl bg-card ring-1 ring-foreground/10 p-5">
<article className="rounded-xl bg-card ring-1 ring-foreground/10 p-5 select-none">
{/* Reshare attribution — only on rows that are themselves
reshares. The link goes to the original author's profile;
their handle is rendered inline so the source is obvious.
components/social/post-scroll-card.tsx
+1 -1
View File
@@ -73,7 +73,7 @@ export function PostScrollCard({
return (
<article
id={`post-${post.id}`}
className="rounded-2xl overflow-hidden bg-card ring-1 ring-foreground/10 scroll-mt-20 sm:scroll-mt-24"
className="rounded-2xl overflow-hidden bg-card ring-1 ring-foreground/10 scroll-mt-20 sm:scroll-mt-24 select-none"
>
{/* Reshare attribution — only on rows that are themselves
reshares. Tappable link → original author's profile. The card
components/social/report-dialog.tsx
+3 -3
View File
@@ -125,7 +125,7 @@ export function ReportDialog({
rows={3}
maxLength={2000}
placeholder="Add any context that will help us review this"
className="w-full bg-background text-foreground text-sm rounded-md border border-border px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
className="w-full bg-background text-foreground text-sm rounded-md border border-border px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-primary/40 select-text"
/>
</div>
{error ? <p className="text-sm text-destructive">{error}</p> : null}
@@ -144,7 +144,7 @@ export function ReportDialog({
if (isMobile) {
return (
<Drawer open={open} onOpenChange={(o) => !o && !working && onClose()}>
<DrawerContent className="bg-card">
<DrawerContent className="bg-card select-none">
<DrawerHeader className="text-left">
<DrawerTitle>{title}</DrawerTitle>
<DrawerDescription>{description}</DrawerDescription>
@@ -168,7 +168,7 @@ export function ReportDialog({
aria-modal="true"
className="fixed left-1/2 top-1/2 z-101 w-full max-w-md -translate-x-1/2 -translate-y-1/2 px-4"
>
<div className="rounded-2xl border border-border bg-card shadow-xl overflow-hidden">
<div className="rounded-2xl border border-border bg-card shadow-xl overflow-hidden select-none">
<div className="flex items-start gap-3 px-5 pt-5 pb-1">
<div className="flex-1 min-w-0">
<h2 className="font-[family-name:var(--font-title)] font-semibold text-lg text-foreground">
components/social/share-post-sheet.tsx
+1 -1
View File
@@ -445,7 +445,7 @@ export function SharePostSheet({
onOpenChange={(o) => !o && onClose()}
direction={direction}
>
<DrawerContent direction={direction} className="bg-card">
<DrawerContent direction={direction} className="bg-card select-none">
<DrawerHeader className="text-left border-b border-border pb-4">
<DrawerTitle>Share post</DrawerTitle>
<p className="text-xs text-muted-foreground mt-1 line-clamp-2">
components/social/update-background-modal.tsx
+1 -1
View File
@@ -202,7 +202,7 @@ export function UpdateBackgroundModal({
aria-labelledby="update-bg-title"
className="fixed left-1/2 top-1/2 z-101 w-full max-w-md -translate-x-1/2 -translate-y-1/2 px-4"
>
<div className="rounded-2xl border border-border bg-card shadow-xl overflow-hidden">
<div className="rounded-2xl border border-border bg-card shadow-xl overflow-hidden select-none">
<div className="flex items-start gap-3 px-5 pt-5 pb-3">
<span
className="shrink-0 size-10 rounded-full bg-primary/10 text-primary flex items-center justify-center"