From 55d6806b1ceaa66499a78e6202ee38a68c530605 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 28 Jan 2025 15:15:08 +0530
Subject: [PATCH 1/2] fix: stickies height

---
 .../components/editor/sticky-editor/editor.tsx    | 13 ++++++-------
 .../components/editor/sticky-editor/toolbar.tsx   |  2 +-
 .../stickies/layout/sticky-dnd-wrapper.tsx        |  7 ++++++-
 web/core/components/stickies/sticky/inputs.tsx    | 15 ++++++++++++---
 web/core/components/stickies/sticky/root.tsx      |  2 +-
 5 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/web/core/components/editor/sticky-editor/editor.tsx b/web/core/components/editor/sticky-editor/editor.tsx
index cd2ae8cad6d..d63616536d2 100644
--- a/web/core/components/editor/sticky-editor/editor.tsx
+++ b/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) => {
diff --git a/web/core/components/editor/sticky-editor/toolbar.tsx b/web/core/components/editor/sticky-editor/toolbar.tsx
index 35dbb9ada08..c92f7448d60 100644
--- a/web/core/components/editor/sticky-editor/toolbar.tsx
+++ b/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} />}
diff --git a/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx b/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx
index eda39e24ff1..087a47bb341 100644
--- a/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx
+++ b/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx
@@ -121,7 +121,12 @@ 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 }}>
+    <div
+      className="flex flex-col box-border p-[8px]"
+      style={{
+        width: itemWidth,
+      }}
+    >
       {!isInFirstRow && <DropIndicator isVisible={instruction === "reorder-above"} />}
       <StickyNote
         key={stickyId || "new"}
diff --git a/web/core/components/stickies/sticky/inputs.tsx b/web/core/components/stickies/sticky/inputs.tsx
index 0aef502a107..ed03fe18551 100644
--- a/web/core/components/stickies/sticky/inputs.tsx
+++ b/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}
diff --git a/web/core/components/stickies/sticky/root.tsx b/web/core/components/stickies/sticky/root.tsx
index 50605184b40..7a0957a2b09 100644
--- a/web/core/components/stickies/sticky/root.tsx
+++ b/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,
         }}

From 53dba1046d80ab8a70847d55909738916fc98bbf Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 28 Jan 2025 15:18:44 +0530
Subject: [PATCH 2/2] chore: remove unused drop indicators

---
 web/core/components/stickies/layout/sticky-dnd-wrapper.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx b/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx
index 087a47bb341..203b3d154dd 100644
--- a/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx
+++ b/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx
@@ -127,14 +127,14 @@ export const StickyDNDWrapper = observer((props: Props) => {
         width: itemWidth,
       }}
     >
-      {!isInFirstRow && <DropIndicator isVisible={instruction === "reorder-above"} />}
+      {/* {!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>
   );
 });