fix(tasks): padding when comment input is focused (#6372)

sanity-io · Apr 16, 2024 · f6c46cc · f6c46cc
1 parent 3849b53
commit f6c46cc
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 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
@@ -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/...ages/sanity/src/structure/comments/src/components/pte/comment-input/CommentInputInner.tsx b/...ages/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
@@ -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/...s/sanity/src/tasks/src/tasks/components/form/fields/descriptionInput/DescriptionInput.tsx b/...s/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`