mirror of
https://github.com/simstudioai/sim.git
synced 2026-01-09 15:07:55 -05:00
Fixed making entire code width clickable
This commit is contained in:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user