[WEB-3203] fix: stickies height, overflow (#6484)

* fix: stickies height

* chore: remove unused drop indicators

web/core/components/editor/sticky-editor/editor.tsx

@@ -3,12 +3,11 @@ import React, { useState } from "react";
 import { EIssueCommentAccessSpecifier } from "@plane/constants";
 // plane editor
 import { EditorRefApi, ILiteTextEditor, LiteTextEditorWithRef } from "@plane/editor";
-// components
+// plane types
 import { TSticky } from "@plane/types";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { getEditorFileHandlers } from "@/helpers/editor.helper";
-// hooks
 // plane web hooks
 import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
 import { useFileSize } from "@/plane-web/hooks/use-file-size";
@@ -60,7 +59,7 @@ export const StickyEditor = React.forwardRef<EditorRefApi, StickyEditorWrapperPr
 
   return (
     <div
-      className={cn("relative border border-custom-border-200 rounded p-3", parentClassName)}
+      className={cn("relative border border-custom-border-200 rounded", parentClassName)}
       onFocus={() => !showToolbarInitially && setIsFocused(true)}
       onBlur={() => !showToolbarInitially && setIsFocused(false)}
     >
@@ -82,10 +81,10 @@ export const StickyEditor = React.forwardRef<EditorRefApi, StickyEditorWrapperPr
       />
       {showToolbar && (
         <div
-          className={cn(
-            "transition-all duration-300 ease-out origin-top",
-            isFocused ? "max-h-[200px] opacity-100 scale-y-100 mt-3" : "max-h-0 opacity-0 scale-y-0 invisible"
-          )}
+          className={cn("transition-all duration-300 ease-out origin-top px-4 h-[60px]", {
+            "max-h-[60px] opacity-100 scale-y-100": isFocused,
+            "max-h-0 opacity-0 scale-y-0 invisible": !isFocused,
+          })}
         >
           <StickyEditorToolbar
             executeCommand={(item) => {

web/core/components/editor/sticky-editor/toolbar.tsx

@@ -58,7 +58,7 @@ export const StickyEditorToolbar: React.FC<Props> = (props) => {
   useOutsideClickDetector(colorPaletteRef, () => setShowColorPalette(false));
 
   return (
-    <div className="flex w-full justify-between mt-2 h-full">
+    <div className="flex w-full justify-between h-full">
       <div className="flex my-auto gap-4" ref={colorPaletteRef}>
         {/* color palette */}
         {showColorPalette && <ColorPalette handleUpdate={handleColorChange} />}

web/core/components/stickies/layout/sticky-dnd-wrapper.tsx

@@ -121,15 +121,20 @@ export const StickyDNDWrapper = observer((props: Props) => {
   }, [handleDrop, isDragging, isLastChild, pathname, stickyId, workspaceSlug]);
 
   return (
-    <div className="flex min-h-[300px] box-border p-2 flex-col" style={{ width: itemWidth }}>
-      {!isInFirstRow && <DropIndicator isVisible={instruction === "reorder-above"} />}
+    <div
+      className="flex flex-col box-border p-[8px]"
+      style={{
+        width: itemWidth,
+      }}
+    >
+      {/* {!isInFirstRow && <DropIndicator isVisible={instruction === "reorder-above"} />} */}
       <StickyNote
         key={stickyId || "new"}
         workspaceSlug={workspaceSlug}
         stickyId={stickyId}
         handleLayout={handleLayout}
       />
-      {!isInLastRow && <DropIndicator isVisible={instruction === "reorder-below"} />}
+      {/* {!isInLastRow && <DropIndicator isVisible={instruction === "reorder-below"} />} */}
     </div>
   );
 });

web/core/components/stickies/sticky/inputs.tsx

@@ -1,11 +1,12 @@
 import { useCallback, useEffect, useRef } from "react";
+import { usePathname } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 // plane editor
 import { EditorRefApi } from "@plane/editor";
 // plane types
 import { TSticky } from "@plane/types";
 // plane utils
-import { isCommentEmpty } from "@plane/utils";
+import { cn, isCommentEmpty } from "@plane/utils";
 // hooks
 import { useWorkspace } from "@/hooks/store";
 // components
@@ -25,10 +26,13 @@ export const StickyInput = (props: TProps) => {
   const { stickyData, workspaceSlug, handleUpdate, stickyId, handleDelete, handleChange, showToolbar } = props;
   // refs
   const editorRef = useRef<EditorRefApi>(null);
+  // navigation
+  const pathname = usePathname();
   // store hooks
   const { getWorkspaceBySlug } = useWorkspace();
   // derived values
   const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id?.toString() ?? "";
+  const isStickiesPage = pathname?.includes("stickies");
   // form info
   const { handleSubmit, reset, control } = useForm<TSticky>({
     defaultValues: {
@@ -74,10 +78,15 @@ export const StickyInput = (props: TProps) => {
               if (!isContentEmpty) return "";
               return "Click to type here";
             }}
-            containerClassName="px-0 text-base min-h-[250px] w-full"
+            containerClassName={cn(
+              "w-full min-h-[256px] max-h-[540px] overflow-y-scroll vertical-scrollbar scrollbar-sm p-4 text-base",
+              {
+                "max-h-[588px]": isStickiesPage,
+              }
+            )}
             uploadFile={async () => ""}
             showToolbar={showToolbar}
-            parentClassName={"border-none p-0"}
+            parentClassName="border-none p-0"
             handleDelete={handleDelete}
             handleColorChange={handleChange}
             ref={editorRef}

web/core/components/stickies/sticky/root.tsx

@@ -74,7 +74,7 @@ export const StickyNote = observer((props: TProps) => {
         handleClose={() => setIsDeleteModalOpen(false)}
       />
       <div
-        className={cn("w-full flex flex-col h-fit rounded p-4 group/sticky max-h-[650px] overflow-y-scroll", className)}
+        className={cn("w-full h-fit flex flex-col rounded group/sticky overflow-y-scroll", className)}
         style={{
           backgroundColor,
         }}