Fixed making entire code width clickable

This commit is contained in:
Emir Karabeg
2025-01-13 11:01:43 -08:00
parent a5418f9bae
commit e640541c14

View File

@@ -80,6 +80,8 @@ export function Code() {
const contentWrapperRef = useRef<HTMLDivElement>(null) const contentWrapperRef = useRef<HTMLDivElement>(null)
const [contentWidth, setContentWidth] = useState(0) const [contentWidth, setContentWidth] = useState(0)
const [maxLineWidth, setMaxLineWidth] = useState(0) const [maxLineWidth, setMaxLineWidth] = useState(0)
const [containerWidth, setContainerWidth] = useState(0)
const containerRef = useRef<HTMLDivElement>(null)
useEffect(() => { useEffect(() => {
if (!contentWrapperRef.current) return if (!contentWrapperRef.current) return
@@ -94,6 +96,19 @@ export function Code() {
return () => resizeObserver.disconnect() return () => resizeObserver.disconnect()
}, []) }, [])
useEffect(() => {
if (!containerRef.current) return
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
setContainerWidth(entry.contentRect.width)
}
})
resizeObserver.observe(containerRef.current)
return () => resizeObserver.disconnect()
}, [])
// Update scroll handler to sync textareas with container // Update scroll handler to sync textareas with container
const handleContainerScroll = useCallback( const handleContainerScroll = useCallback(
(e: React.UIEvent<HTMLDivElement>) => { (e: React.UIEvent<HTMLDivElement>) => {
@@ -539,6 +554,7 @@ export function Code() {
return ( return (
<div <div
ref={containerRef}
className="font-mono text-sm border rounded-md overflow-hidden relative" className="font-mono text-sm border rounded-md overflow-hidden relative"
onWheel={handleScroll} onWheel={handleScroll}
> >
@@ -553,7 +569,11 @@ export function Code() {
className="overflow-auto scrollbar-hide h-full" className="overflow-auto scrollbar-hide h-full"
onScroll={handleContainerScroll} onScroll={handleContainerScroll}
style={{ style={{
maxWidth: `${Math.max(maxLineWidth + 35, contentWidth)}px`, maxWidth: `${Math.max(
maxLineWidth + 35,
contentWidth,
containerWidth
)}px`,
}} }}
> >
<div ref={contentWrapperRef} className="w-fit"> <div ref={contentWrapperRef} className="w-fit">
@@ -562,7 +582,11 @@ export function Code() {
key={line.id} key={line.id}
className="flex pl-8 w-fit" className="flex pl-8 w-fit"
style={{ style={{
width: `${Math.max(maxLineWidth + 35, contentWidth)}px`, width: `${Math.max(
maxLineWidth + 35,
contentWidth,
containerWidth
)}px`,
}} }}
> >
<textarea <textarea