fix(tasks): reduce padding on tasks comment reply edx-1209

sanity-io · Mar 27, 2024 · b63f761 · b63f761
1 parent 27b6a70
commit b63f761
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 10 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
@@ -302,6 +302,7 @@ export const CommentsListItem = React.memo(function CommentsListItem(props: Comm
       data-active={isSelected ? 'true' : 'false'}
       data-hovered={mouseOver ? 'true' : 'false'}
       data-testid="comments-list-item"
+      data-ui="comments-list-item"
       onClick={handleThreadRootClick}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}

diff --git a/packages/sanity/src/tasks/src/tasks/components/activity/TasksActivityCommentItem.tsx b/packages/sanity/src/tasks/src/tasks/components/activity/TasksActivityCommentItem.tsx
@@ -1,3 +1,7 @@
+// eslint-disable-next-line camelcase
+import {getTheme_v2} from '@sanity/ui/theme'
+import styled, {css} from 'styled-components'
+
 import {CommentsListItem, type CommentsListItemProps} from '../../../../../structure/comments'
 import {ActivityItem} from './TasksActivityItem'
 
@@ -12,19 +16,31 @@ interface TasksActivityCommentItemProps extends Omit<CommentsListItemProps, 'mod
   // ...
 }
 
+const CommentListItemRoot = styled.div((props) => {
+  const theme = getTheme_v2(props.theme)
+  return css`
+    [data-ui='comments-list-item'] {
+      padding-right: ${theme.space[2]}px;
+      &:focus-within {
+        padding-bottom: ${theme.space[2]}px;
+      }
+    }
+  `
+})
 export function TasksActivityCommentItem(props: TasksActivityCommentItemProps) {
   const {parentComment} = props
 
   return (
     <ActivityItem userId={parentComment.authorId}>
-      <CommentsListItem
-        {...props}
-        avatarConfig={COMMENTS_LIST_ITEM_AVATAR_CONFIG}
-        canReply
-        innerPadding={1}
-        isSelected={false}
-        mode="default" // TODO: set dynamic mode?
-      />
+      <CommentListItemRoot>
+        <CommentsListItem
+          {...props}
+          avatarConfig={COMMENTS_LIST_ITEM_AVATAR_CONFIG}
+          canReply
+          isSelected={false}
+          mode="default"
+        />
+      </CommentListItemRoot>
     </ActivityItem>
   )
 }
diff --git a/packages/sanity/src/tasks/src/tasks/components/activity/TasksActivityCreatedAt.tsx b/packages/sanity/src/tasks/src/tasks/components/activity/TasksActivityCreatedAt.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components'
 
 import {Tooltip} from '../../../../../ui-components'
 import {tasksLocaleNamespace} from '../../../../i18n'
-import {UpdatedTimeAgo} from './helpers'
+import {NoWrap, UpdatedTimeAgo} from './helpers'
 import {ActivityItem} from './TasksActivityItem'
 
 const UserSkeleton = styled(TextSkeleton)`
@@ -33,7 +33,9 @@ export const TasksActivityCreatedAt = memo(
             </strong>
             {t('panel.activity.created-fragment')} •{' '}
             <Tooltip content={formattedDate} placement="top-end">
-              <time dateTime={createdAt}>{timeAgo}</time>
+              <NoWrap>
+                <time dateTime={createdAt}>{timeAgo}</time>
+              </NoWrap>
             </Tooltip>
           </Text>
         </Flex>