From f6c46cc60826ea0bba0ba8c595c73338d8d53f3f Mon Sep 17 00:00:00 2001
From: Herman Wikner <wiknerherman@gmail.com>
Date: Tue, 16 Apr 2024 10:20:33 +0200
Subject: [PATCH] fix(tasks): padding when comment input is focused (#6372)

---
 .../comments/src/components/list/CommentsListItem.tsx  |  2 +-
 .../components/pte/comment-input/CommentInputInner.tsx |  7 ++++++-
 .../components/activity/TasksActivityCommentItem.tsx   | 10 ++++++----
 .../form/fields/descriptionInput/DescriptionInput.tsx  |  4 ++--
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/sanity/src/structure/comments/src/components/list/CommentsListItem.tsx b/packages/sanity/src/structure/comments/src/components/list/CommentsListItem.tsx
index 9c1250ac93b..76c8da41909 100644
--- a/packages/sanity/src/structure/comments/src/components/list/CommentsListItem.tsx
+++ b/packages/sanity/src/structure/comments/src/components/list/CommentsListItem.tsx
@@ -311,7 +311,7 @@ export const CommentsListItem = memo(function CommentsListItem(props: CommentsLi
       data-active={isSelected ? 'true' : 'false'}
       data-hovered={mouseOver ? 'true' : 'false'}
       data-testid="comments-list-item"
-      data-ui="comments-list-item"
+      data-ui="CommentsListItem"
       onClick={handleThreadRootClick}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
diff --git a/packages/sanity/src/structure/comments/src/components/pte/comment-input/CommentInputInner.tsx b/packages/sanity/src/structure/comments/src/components/pte/comment-input/CommentInputInner.tsx
index 412298f8d90..01a618f4e26 100644
--- a/packages/sanity/src/structure/comments/src/components/pte/comment-input/CommentInputInner.tsx
+++ b/packages/sanity/src/structure/comments/src/components/pte/comment-input/CommentInputInner.tsx
@@ -159,7 +159,12 @@ export function CommentInputInner(props: CommentInputInnerProps) {
         tone={readOnly ? 'transparent' : 'default'}
       >
         <Stack>
-          <EditableWrap paddingX={1} paddingY={2} sizing="border" data-ui="editable-wrap">
+          <EditableWrap
+            data-ui="CommentInputEditableWrap"
+            paddingX={1}
+            paddingY={2}
+            sizing="border"
+          >
             <Editable
               focusLock={focusLock}
               onBlur={onBlur}
diff --git a/packages/sanity/src/tasks/src/tasks/components/activity/TasksActivityCommentItem.tsx b/packages/sanity/src/tasks/src/tasks/components/activity/TasksActivityCommentItem.tsx
index 8974df86f3c..022d5facefe 100644
--- a/packages/sanity/src/tasks/src/tasks/components/activity/TasksActivityCommentItem.tsx
+++ b/packages/sanity/src/tasks/src/tasks/components/activity/TasksActivityCommentItem.tsx
@@ -20,11 +20,13 @@ interface TasksActivityCommentItemProps extends Omit<CommentsListItemProps, 'mod
 const CommentListItemRoot = styled.div((props) => {
   const theme = getTheme_v2(props.theme)
   return css`
-    [data-ui='comments-list-item'] {
+    [data-ui='CommentsListItem'] {
       padding-right: ${theme.space[2]}px;
-      &:focus-within {
-        padding-bottom: ${theme.space[2]}px;
-      }
+    }
+
+    // Increase the padding when the comment input is focused
+    [data-ui='CommentInputEditableWrap']:focus-within {
+      padding-bottom: ${theme.space[2]}px;
     }
   `
 })
diff --git a/packages/sanity/src/tasks/src/tasks/components/form/fields/descriptionInput/DescriptionInput.tsx b/packages/sanity/src/tasks/src/tasks/components/form/fields/descriptionInput/DescriptionInput.tsx
index d121d6f91ed..69cc9b30495 100644
--- a/packages/sanity/src/tasks/src/tasks/components/form/fields/descriptionInput/DescriptionInput.tsx
+++ b/packages/sanity/src/tasks/src/tasks/components/form/fields/descriptionInput/DescriptionInput.tsx
@@ -21,8 +21,8 @@ const DescriptionInputRoot = styled.div<{$mode: FormMode; $minHeight: number}>((
   const verticalPadding = props.$mode === 'edit' ? theme.space[1] : theme.space[3]
   const minHeight = props.$mode === 'edit' ? 120 : 200
   return css`
-    /* select editable-wrap and change the padding */
-    [data-ui='editable-wrap'] {
+    /* select CommentInputEditableWrap and change the padding */
+    [data-ui='CommentInputEditableWrap'] {
       overflow: hidden;
       padding: ${props.$mode === 'edit'
         ? `${verticalPadding}px 0px`