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; const showArrows = slideCount > 1;
return ( 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 className="relative max-w-xl mx-auto">
<div <div
ref={scrollRef} 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" : "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> <DrawerTitle>Edit collection</DrawerTitle>
<DrawerClose asChild> <DrawerClose asChild>
<button <button
@@ -222,7 +222,7 @@ export function EditCollectionDrawer({
</DrawerClose> </DrawerClose>
</DrawerHeader> </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 */} {/* Cover */}
<section className="flex items-start gap-4"> <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"> <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} value={title}
onChange={(e) => setTitle(e.target.value)} onChange={(e) => setTitle(e.target.value)}
maxLength={120} 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> </section>
@@ -297,7 +297,7 @@ export function EditCollectionDrawer({
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
rows={3} rows={3}
placeholder="Optional" 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> </section>
components/social/page-bookmarks.tsx
+1 -1
View File
@@ -195,7 +195,7 @@ export function PageBookmarks() {
left: m.left, left: m.left,
zIndex: 5, 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"> <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" /> <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. * 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 { createPortal } from "react-dom";
import { Ban, Flag, MoreVertical, Trash2 } from "lucide-react"; import { Ban, Flag, MoreVertical, Trash2 } from "lucide-react";
import { toast } from "sonner"; import { toast } from "sonner";
@@ -90,37 +90,35 @@ export function PostCardMenu({
: post.author_name || "this user"; : post.author_name || "this user";
// Desktop popover positioning: anchor below the trigger, right-aligned. // Desktop popover positioning: anchor below the trigger, right-aligned.
// Recompute every time we open + on resize so a viewport change between // We measure in event handlers (the open click + resize/scroll), never
// renders doesn't strand the popover at a stale coordinate. // synchronously inside an effect body, so opening can't trigger a
useEffect(() => { // cascading render. The effect below only wires the resize/scroll
if (!open || isMobile) { // listeners while the popover is open.
setPopPos(null); const recompute = useCallback(() => {
return;
}
function recompute() {
const btn = triggerRef.current; const btn = triggerRef.current;
if (!btn) return; if (!btn) return;
const rect = btn.getBoundingClientRect(); const rect = btn.getBoundingClientRect();
const popoverW = 240; const popoverW = 240;
const pad = 8; const pad = 8;
// Right-align the popover to the trigger's right edge — feels // Right-align the popover to the trigger's right edge — feels natural
// natural for an overflow menu sitting in the top-right corner. // for an overflow menu sitting in the top-right corner.
let left = rect.right - popoverW; let left = rect.right - popoverW;
if (left < pad) left = pad; if (left < pad) left = pad;
if (left + popoverW > window.innerWidth - pad) { if (left + popoverW > window.innerWidth - pad) {
left = window.innerWidth - popoverW - pad; left = window.innerWidth - popoverW - pad;
} }
const top = rect.bottom + 4; setPopPos({ top: rect.bottom + 4, left });
setPopPos({ top, left }); }, []);
}
recompute(); useEffect(() => {
if (!open || isMobile) return;
window.addEventListener("resize", recompute); window.addEventListener("resize", recompute);
window.addEventListener("scroll", recompute, true); window.addEventListener("scroll", recompute, true);
return () => { return () => {
window.removeEventListener("resize", recompute); window.removeEventListener("resize", recompute);
window.removeEventListener("scroll", recompute, true); window.removeEventListener("scroll", recompute, true);
}; };
}, [open, isMobile]); }, [open, isMobile, recompute]);
// Click-outside + Escape to close (desktop only; the drawer's own // Click-outside + Escape to close (desktop only; the drawer's own
// overlay handles dismissal on mobile). // overlay handles dismissal on mobile).
@@ -202,7 +200,12 @@ export function PostCardMenu({
<button <button
ref={triggerRef} ref={triggerRef}
type="button" 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-label="Post options"
aria-haspopup="menu" aria-haspopup="menu"
aria-expanded={open} aria-expanded={open}
@@ -219,7 +222,7 @@ export function PostCardMenu({
// Menu surface: bottom drawer on mobile, floating popover on desktop. // Menu surface: bottom drawer on mobile, floating popover on desktop.
const menu = isMobile ? ( const menu = isMobile ? (
<Drawer open={open} onOpenChange={(o) => setOpen(o)}> <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"> <DrawerHeader className="text-left border-b border-border pb-3">
<DrawerTitle>Post options</DrawerTitle> <DrawerTitle>Post options</DrawerTitle>
</DrawerHeader> </DrawerHeader>
@@ -242,7 +245,7 @@ export function PostCardMenu({
zIndex: 60, zIndex: 60,
}} }}
className={cn( 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", "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; const authorHandle = post.author_handle ?? null;
return ( 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 {/* Reshare attribution — only on rows that are themselves
reshares. The link goes to the original author's profile; reshares. The link goes to the original author's profile;
their handle is rendered inline so the source is obvious. 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 ( return (
<article <article
id={`post-${post.id}`} 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 {/* Reshare attribution — only on rows that are themselves
reshares. Tappable link → original author's profile. The card 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} rows={3}
maxLength={2000} maxLength={2000}
placeholder="Add any context that will help us review this" 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> </div>
{error ? <p className="text-sm text-destructive">{error}</p> : null} {error ? <p className="text-sm text-destructive">{error}</p> : null}
@@ -144,7 +144,7 @@ export function ReportDialog({
if (isMobile) { if (isMobile) {
return ( return (
<Drawer open={open} onOpenChange={(o) => !o && !working && onClose()}> <Drawer open={open} onOpenChange={(o) => !o && !working && onClose()}>
<DrawerContent className="bg-card"> <DrawerContent className="bg-card select-none">
<DrawerHeader className="text-left"> <DrawerHeader className="text-left">
<DrawerTitle>{title}</DrawerTitle> <DrawerTitle>{title}</DrawerTitle>
<DrawerDescription>{description}</DrawerDescription> <DrawerDescription>{description}</DrawerDescription>
@@ -168,7 +168,7 @@ export function ReportDialog({
aria-modal="true" 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" 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 items-start gap-3 px-5 pt-5 pb-1">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<h2 className="font-[family-name:var(--font-title)] font-semibold text-lg text-foreground"> <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()} onOpenChange={(o) => !o && onClose()}
direction={direction} 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"> <DrawerHeader className="text-left border-b border-border pb-4">
<DrawerTitle>Share post</DrawerTitle> <DrawerTitle>Share post</DrawerTitle>
<p className="text-xs text-muted-foreground mt-1 line-clamp-2"> <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" 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" 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"> <div className="flex items-start gap-3 px-5 pt-5 pb-3">
<span <span
className="shrink-0 size-10 rounded-full bg-primary/10 text-primary flex items-center justify-center" className="shrink-0 size-10 rounded-full bg-primary/10 text-primary flex items-center justify-center"