Fixes line height, padding for editor instances

ParabolInc · Feb 26, 2025 · 26ecb17 · 26ecb17
1 parent e4f293a
commit 26ecb17
Show file tree

Hide file tree

Showing 17 changed files with 52 additions and 40 deletions.
diff --git a/packages/client/components/DiscussionThreadInput.tsx b/packages/client/components/DiscussionThreadInput.tsx
@@ -214,10 +214,7 @@ const DiscussionThreadInput = (props: Props) => {
     >
       <div className='flex items-center justify-center p-1'>
         <Avatar picture={avatar} onClick={toggleAnonymous} className='m-2 h-8 w-8 transition-all' />
-        <TipTapEditor
-          className='flex max-h-80 min-h-0 grow overflow-auto px-0 leading-4'
-          editor={editor}
-        />
+        <TipTapEditor className='flex max-h-80 grow overflow-auto leading-4' editor={editor} />
         <SendCommentButton commentSubmitState={commentSubmitState} onSubmit={onSubmit} />
       </div>
       {isActionsContainerVisible && (

diff --git a/packages/client/components/EditableText.tsx b/packages/client/components/EditableText.tsx
@@ -70,8 +70,14 @@ const TextArea = styled(TextAreaAutoSize)({
 })
 
 const Form = styled('form')({
+  border: 0,
   display: 'flex',
-  flexDirection: 'column'
+  flexDirection: 'column',
+  fontSize: 'inherit',
+  fontWeight: 'inherit',
+  lineHeight: 'inherit',
+  margin: 0,
+  padding: 0
 })
 
 interface Props {

diff --git a/packages/client/components/EditingStatus/EditingStatus.tsx b/packages/client/components/EditingStatus/EditingStatus.tsx
@@ -22,7 +22,7 @@ const StatusHeader = styled('div')({
   justifyContent: 'space-between',
   lineHeight: '20px',
   minHeight: Card.BUTTON_HEIGHT,
-  padding: `0 ${Card.PADDING} 8px`,
+  padding: `0 ${Card.PADDING} 4px`,
   textAlign: 'left'
 })
 

diff --git a/packages/client/components/ParabolScopingSearchResultItem.tsx b/packages/client/components/ParabolScopingSearchResultItem.tsx
@@ -140,7 +140,11 @@ const ParabolScopingSearchResultItem = (props: Props) => {
           addTaskChild('root')
         }}
       >
-        <TipTapEditor editor={editor} useLinkEditor={() => useTaskChild('editor-link-changer')} />
+        <TipTapEditor
+          className='px-4'
+          editor={editor}
+          useLinkEditor={() => useTaskChild('editor-link-changer')}
+        />
       </Task>
     </Item>
   )

diff --git a/packages/client/components/ReflectionCard/ReflectionCard.tsx b/packages/client/components/ReflectionCard/ReflectionCard.tsx
@@ -36,7 +36,7 @@ import ReflectionCardDeleteButton from './ReflectionCardDeleteButton'
 import ReflectionCardRoot from './ReflectionCardRoot'
 
 const StyledReacjis = styled(ReactjiSection)({
-  padding: '0 14px 12px'
+  padding: '4px 16px 0'
 })
 
 const SpotlightIcon = styled(IconLabel)({
@@ -317,7 +317,7 @@ const ReflectionCard = (props: Props) => {
       onMouseLeave={() => setIsHovering(false)}
       showDragHintAnimation={showDragHintAnimation}
       ref={reflectionDivRef}
-      className='py-2'
+      className='py-3'
     >
       <ColorBadge phaseType={phaseType as NewMeetingPhaseTypeEnum} reflection={reflection} />
 
@@ -328,7 +328,7 @@ const ReflectionCard = (props: Props) => {
         <TipTapEditor
           className={cn(
             'flex min-h-4 w-full px-4',
-            isClipped ? 'max-h-8' : 'max-h-28',
+            phaseType === 'discuss' ? 'min-h-0' : isClipped ? 'max-h-6' : 'max-h-28',
             readOnly ? (phaseType === 'discuss' ? 'select-text' : 'select-none') : undefined
           )}
           editor={editor}

diff --git a/packages/client/components/RetroReflectPhase/PhaseItemEditor.tsx b/packages/client/components/RetroReflectPhase/PhaseItemEditor.tsx
@@ -198,7 +198,7 @@ const PhaseItemEditor = (props: Props) => {
       <ReflectionCardRoot data-cy={dataCy} ref={phaseEditorRef} className=''>
         <TipTapEditor
           className={cn(
-            'flex max-h-28 min-h-0 overflow-auto px-4 pt-3',
+            'flex max-h-28 overflow-auto px-4 pt-3',
             disableAnonymity ? 'pb-0' : 'pb-3'
           )}
           editor={editor}

diff --git a/packages/client/components/ThreadedAvatarColumn.tsx b/packages/client/components/ThreadedAvatarColumn.tsx
@@ -4,7 +4,7 @@ import Avatar from './Avatar/Avatar'
 const AvatarCol = styled('div')<{isReply: boolean | undefined}>(({isReply}) => ({
   display: 'flex',
   paddingRight: 8,
-  paddingLeft: isReply ? undefined : 8
+  paddingLeft: isReply ? undefined : 12
 }))
 
 interface Props {

diff --git a/packages/client/components/ThreadedCommentBase.tsx b/packages/client/components/ThreadedCommentBase.tsx
@@ -169,7 +169,7 @@ const ThreadedCommentBase = (props: Props) => {
   return (
     <ThreadedItemWrapper isReply={isReply}>
       <ThreadedAvatarColumn isReply={isReply} picture={picture} />
-      <div className='flex w-[calc(100%-56px)] flex-col pb-2'>
+      <div className='flex w-[calc(100%-56px)] flex-col pb-3'>
         <ThreadedCommentHeader
           comment={comment}
           editComment={editComment}

diff --git a/packages/client/components/ThreadedItemHeaderDescription.tsx b/packages/client/components/ThreadedItemHeaderDescription.tsx
@@ -7,7 +7,7 @@ const Header = styled('div')({
   fontSize: 12,
   lineHeight: '12px',
   justifyContent: 'space-between',
-  paddingBottom: 8,
+  padding: '4px 0 0',
   width: '100%'
 })
 

diff --git a/packages/client/components/ThreadedTaskBase.tsx b/packages/client/components/ThreadedTaskBase.tsx
@@ -108,7 +108,9 @@ const ThreadedTaskBase = (props: Props) => {
             <ThreadedReplyButton onReply={onReply} />
           </HeaderActions>
         </ThreadedItemHeaderDescription>
-        <StyledNullableTask area='meeting' task={task} />
+        <div className='py-2'>
+          <StyledNullableTask area='meeting' task={task} />
+        </div>
         {repliesList}
         {replyingTo?.id === task.id && (
           <DiscussionThreadInput

diff --git a/packages/client/components/promptResponse/TipTapEditor.tsx b/packages/client/components/promptResponse/TipTapEditor.tsx
@@ -18,7 +18,7 @@ export const TipTapEditor = (props: Props) => {
         ref={ref as any}
         {...rest}
         editor={editor}
-        className={cn('min-h-10 px-4 text-sm leading-none', className)}
+        className={cn('text-sm', className)}
       />
     </>
   )

diff --git a/packages/client/modules/outcomeCard/components/OutcomeCard/OutcomeCard.tsx b/packages/client/modules/outcomeCard/components/OutcomeCard/OutcomeCard.tsx
@@ -181,6 +181,7 @@ const OutcomeCard = memo((props: Props) => {
             onFocus={() => addTaskChild('root')}
           >
             <TipTapEditor
+              className='px-4'
               editor={editor}
               useLinkEditor={() => useTaskChild('editor-link-changer')}
               onBlur={onFocusChange(false)}

diff --git a/packages/client/modules/outcomeCard/components/OutcomeCardFooter/TaskFooter.tsx b/packages/client/modules/outcomeCard/components/OutcomeCardFooter/TaskFooter.tsx
@@ -24,7 +24,7 @@ const Footer = styled('div')({
   display: 'flex',
   justifyContent: 'space-between',
   maxWidth: '100%',
-  padding: `12px ${Card.PADDING} ${Card.PADDING}`
+  padding: `8px ${Card.PADDING} ${Card.PADDING}`
 })
 
 const ButtonGroup = styled('div')<{cardIsActive: boolean}>(({cardIsActive}) => ({
@@ -119,7 +119,6 @@ const TaskFooter = (props: Props) => {
             <TaskFooterUserAssignee
               area={area}
               canAssign={canAssignUser}
-              cardIsActive={cardIsActive}
               task={task}
               useTaskChild={useTaskChild}
             />

diff --git a/packages/client/modules/outcomeCard/components/OutcomeCardFooter/TaskFooterTeamAssignee.tsx b/packages/client/modules/outcomeCard/components/OutcomeCardFooter/TaskFooterTeamAssignee.tsx
@@ -27,7 +27,7 @@ const TeamToggleButton = styled(CardButton)({
   color: PALETTE.SLATE_600,
   display: 'block',
   fontSize: 12,
-  fontWeight: 400,
+  fontWeight: 600,
   height: 24,
   lineHeight: '24px',
   marginLeft: -8,

diff --git a/packages/client/modules/outcomeCard/components/OutcomeCardFooter/TaskFooterUserAssignee.tsx b/packages/client/modules/outcomeCard/components/OutcomeCardFooter/TaskFooterUserAssignee.tsx
@@ -44,22 +44,14 @@ const AvatarButton = styled(BaseButton)({
   }
 })
 
-const Avatar = styled('div')<{cardIsActive: boolean; isAssigned: boolean}>(
-  ({cardIsActive, isAssigned}) => ({
-    backgroundColor: isAssigned ? 'transparent' : PALETTE.SLATE_600,
-    color: isAssigned ? 'transparent' : undefined,
-    border: '1px solid transparent',
-    borderColor: cardIsActive ? PALETTE.SLATE_500 : undefined,
-    borderRadius: '100%',
-    height: 28,
-    marginLeft: -2,
-    marginRight: 4,
-    padding: 1,
-    position: 'relative',
-    top: -2,
-    width: 28
-  })
-)
+const Avatar = styled('div')<{isAssigned: boolean}>(({isAssigned}) => ({
+  backgroundColor: isAssigned ? 'transparent' : PALETTE.SLATE_600,
+  color: isAssigned ? 'transparent' : undefined,
+  borderRadius: '100%',
+  height: 24,
+  marginRight: 6,
+  width: 24
+}))
 
 const AvatarImage = styled('img')({
   borderRadius: '100%',
@@ -72,6 +64,7 @@ const AvatarLabel = styled('div')({
   ...label,
   color: PALETTE.SLATE_600,
   flex: 1,
+  fontWeight: 600,
   minWidth: 0,
   overflowWrap: 'break-word'
 })
@@ -100,7 +93,6 @@ const StyledIcon = styled('div')({
 interface Props {
   area: string
   canAssign: boolean
-  cardIsActive: boolean
   task: TaskFooterUserAssignee_task$key
   useTaskChild: UseTaskChild
 }
@@ -113,7 +105,7 @@ const TaskFooterUserAssigneeMenuRoot = lazyPreload(
 )
 
 const TaskFooterUserAssignee = (props: Props) => {
-  const {area, canAssign, cardIsActive, task: taskRef, useTaskChild} = props
+  const {area, canAssign, task: taskRef, useTaskChild} = props
   const task = useFragment(
     graphql`
       fragment TaskFooterUserAssignee_task on Task {
@@ -153,7 +145,7 @@ const TaskFooterUserAssignee = (props: Props) => {
           onMouseEnter={TaskFooterUserAssigneeMenuRoot.preload}
           ref={originRef}
         >
-          <Avatar cardIsActive={cardIsActive} isAssigned={!!user}>
+          <Avatar isAssigned={!!user}>
             {user ? (
               <AvatarImage alt={preferredName} src={userImage} />
             ) : (

diff --git a/packages/client/modules/pages/Page.tsx b/packages/client/modules/pages/Page.tsx
@@ -20,7 +20,7 @@ export const Page = (props: Props) => {
   return (
     <div className='tems-center flex h-full w-full justify-center bg-slate-200 pt-2'>
       <div className='flex w-full max-w-[960px] justify-center bg-white pt-28'>
-        <TipTapEditor editor={editor} className='flex h-full w-full' />
+        <TipTapEditor editor={editor} className='flex h-full w-full px-6' />
       </div>
     </div>
   )

diff --git a/packages/client/styles/theme/global.css b/packages/client/styles/theme/global.css
@@ -380,6 +380,8 @@
 
 .ProseMirror {
   width: 100%;
+  /* Match top padding for more consistent vertical alignment */
+  padding-bottom: 2px;
   /* Gap cursor is 2px above the top of an element */
   padding-top: 2px;
   blockquote {
@@ -495,7 +497,16 @@
 .ProseMirror p {
   margin-block-start: 4px;
   margin-block-end: 4px;
-  line-height: 1rem;
+  /* Line height: for now most editable surfaces are 14/20 */
+  line-height: 1.4285714286em;
+}
+
+.ProseMirror p:first-of-type {
+  margin-block-start: 0;
+}
+
+.ProseMirror p:last-of-type {
+  margin-block-end: 0;
 }
 
 hr.ProseMirror-selectednode {