[WEB-1072] fix: pages UI improvements (#4294)

* fix: outline alignment

* fix: textarea auto-resize logic

packages/ui/src/form-fields/textarea.tsx

@@ -15,7 +15,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, re
   // refs
   const textAreaRef = useRef<any>(ref);
   // auto re-size
-  useAutoResizeTextArea(textAreaRef);
+  useAutoResizeTextArea(textAreaRef, value);
 
   return (
     <textarea

packages/ui/src/hooks/use-auto-resize-textarea.ts

@@ -1,24 +1,16 @@
-import { useEffect } from "react";
+import { useLayoutEffect } from "react";
 
-export const useAutoResizeTextArea = (textAreaRef: React.RefObject<HTMLTextAreaElement>) => {
+export const useAutoResizeTextArea = (
-  useEffect(() => {
+  textAreaRef: React.RefObject<HTMLTextAreaElement>,
+  value: string | number | readonly string[]
+) => {
+  useLayoutEffect(() => {
     const textArea = textAreaRef.current;
     if (!textArea) return;
 
-    const resizeTextArea = () => {
+    // We need to reset the height momentarily to get the correct scrollHeight for the textarea
-      textArea.style.height = "auto";
+    textArea.style.height = "0px";
-      const computedHeight = textArea.scrollHeight + "px";
+    const scrollHeight = textArea.scrollHeight;
-      textArea.style.height = computedHeight;
+    textArea.style.height = scrollHeight + "px";
-    };
+  }, [textAreaRef, value]);
-
-    const handleInput = () => resizeTextArea();
-
-    // resize on mount
-    resizeTextArea();
-
-    textArea.addEventListener("input", handleInput);
-    return () => {
-      textArea.removeEventListener("input", handleInput);
-    };
-  }, [textAreaRef]);
 };

web/components/pages/editor/summary/heading-components.tsx

@@ -10,7 +10,7 @@ export const OutlineHeading1 = ({ marking, onClick }: HeadingProps) => (
   <button
     type="button"
     onClick={onClick}
-    className="ml-4 cursor-pointer text-sm font-medium text-custom-text-400 hover:text-custom-primary-100 max-md:ml-2.5"
+    className="text-sm text-left font-medium text-custom-text-300 hover:text-custom-primary-100"
   >
     {marking.text}
   </button>
@@ -20,7 +20,7 @@ export const OutlineHeading2 = ({ marking, onClick }: HeadingProps) => (
   <button
     type="button"
     onClick={onClick}
-    className="ml-6 cursor-pointer text-xs font-medium text-custom-text-400 hover:text-custom-primary-100"
+    className="ml-2 text-xs text-left font-medium text-custom-text-300 hover:text-custom-primary-100"
   >
     {marking.text}
   </button>
@@ -30,7 +30,7 @@ export const OutlineHeading3 = ({ marking, onClick }: HeadingProps) => (
   <button
     type="button"
     onClick={onClick}
-    className="ml-8 cursor-pointer text-xs font-medium text-custom-text-400 hover:text-custom-primary-100"
+    className="ml-4 text-xs text-left font-medium text-custom-text-300 hover:text-custom-primary-100"
   >
     {marking.text}
   </button>

web/components/pages/editor/title.tsx

@@ -22,12 +22,19 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
   return (
     <>
       {readOnly ? (
-        <h6 className="-mt-2 break-words bg-transparent text-4xl font-bold">{title}</h6>
+        <h6
+          className="break-words bg-transparent text-4xl font-bold"
+          style={{
+            lineHeight: "1.2",
+          }}
+        >
+          {title}
+        </h6>
       ) : (
         <>
           <TextArea
             onChange={(e) => updateTitle(e.target.value)}
-            className="-mt-2 w-full bg-custom-background text-4xl font-bold outline-none p-0 border-none resize-none rounded-none"
+            className="w-full bg-custom-background text-4xl font-bold outline-none p-0 border-none resize-none rounded-none"
             style={{
               lineHeight: "1.2",
             }}

web/components/pages/list/block.tsx

@@ -51,7 +51,7 @@ export const PageListBlock: FC<TPageListBlock> = observer((props) => {
     >
       {/* page title */}
       <Tooltip tooltipHeading="Title" tooltipContent={name}>
-        <h5 className="text-base font-semibold truncate">{name}</h5>
+        <h5 className="text-base font-medium truncate">{name}</h5>
       </Tooltip>
 
       {/* page properties */}