From 999ce4b45e30f75545f96cd7ae0adfc1fc27f164 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Petr=20Bul=C3=A1nek?= <bulanek.petr@gmail.com>
Date: Tue, 21 Jan 2025 11:46:56 +0100
Subject: [PATCH] fixup! fixup! fixup! Merge branch 'main' into
 656-code-line-numbers

---
 .../EditableSyntaxHighlighter.module.scss       |  3 ++-
 .../EditableSyntaxHighlighter.tsx               | 17 ++++++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/EditableSyntaxHighlighter/EditableSyntaxHighlighter.module.scss b/src/components/EditableSyntaxHighlighter/EditableSyntaxHighlighter.module.scss
index 2263b79..5045982 100644
--- a/src/components/EditableSyntaxHighlighter/EditableSyntaxHighlighter.module.scss
+++ b/src/components/EditableSyntaxHighlighter/EditableSyntaxHighlighter.module.scss
@@ -71,7 +71,8 @@
 
   code {
     display: block;
-    inline-size: 100%;
+    min-inline-size: 100%;
+    inline-size: max-content;
     white-space: pre !important;
   }
 
diff --git a/src/components/EditableSyntaxHighlighter/EditableSyntaxHighlighter.tsx b/src/components/EditableSyntaxHighlighter/EditableSyntaxHighlighter.tsx
index 6f2ce70..48a636a 100644
--- a/src/components/EditableSyntaxHighlighter/EditableSyntaxHighlighter.tsx
+++ b/src/components/EditableSyntaxHighlighter/EditableSyntaxHighlighter.tsx
@@ -28,6 +28,7 @@ import {
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import python from 'react-syntax-highlighter/dist/cjs/languages/hljs/python';
 import defaultStyle from 'react-syntax-highlighter/dist/cjs/styles/hljs/default-style';
+import { useResizeObserver } from 'usehooks-ts';
 import classes from './EditableSyntaxHighlighter.module.scss';
 
 const style: { [key: string]: CSSProperties } = {
@@ -144,6 +145,7 @@ export function EditableSyntaxHighlighter({
   ...props
 }: Props) {
   const [lineNumberWidth, setLineNumberWidth] = useState<number>(0);
+  const rootRef = useRef<HTMLDivElement>(null);
   const preRef = useRef<HTMLPreElement>(null);
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -160,7 +162,7 @@ export function EditableSyntaxHighlighter({
     });
   };
 
-  useEffect(() => {
+  const checkLineNumberWidth = () => {
     if (!preRef.current) {
       return;
     }
@@ -172,7 +174,7 @@ export function EditableSyntaxHighlighter({
     setLineNumberWidth(
       lineNumberElement ? (lineNumberElement as HTMLElement).offsetWidth : 0,
     );
-  }, [value]);
+  };
 
   useEffect(() => {
     const textAreaElement = textAreaRef.current;
@@ -192,8 +194,17 @@ export function EditableSyntaxHighlighter({
     };
   }, []);
 
+  useEffect(() => {
+    checkLineNumberWidth();
+  }, [value]);
+
+  useResizeObserver({
+    ref: rootRef,
+    onResize: checkLineNumberWidth,
+  });
+
   return (
-    <div className={clsx(classes.root, className)}>
+    <div className={clsx(classes.root, className)} ref={rootRef}>
       {labelText && <FormLabel id={id}>{labelText}</FormLabel>}
 
       <div