fix(comments): handle text overflow in editable surfaces, optically a…

…lign field titles (#5004) * fix(comments): add viewport specific max-height to editable comment areas * fix(comments): optically align thread field titles * fixup! fix(comments): add viewport specific max-height to editable comment areas
sanity-io · Oct 24, 2023 · f7de559 · f7de559
1 parent 26a599b
commit f7de559
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/packages/sanity/src/desk/comments/src/components/list/CommentThreadLayout.tsx b/packages/sanity/src/desk/comments/src/components/list/CommentThreadLayout.tsx
@@ -76,7 +76,7 @@ export function CommentThreadLayout(props: CommentThreadLayoutProps) {
 
   return (
     <Stack space={2}>
-      <HeaderFlex align="center" gap={2} paddingX={1} sizing="border">
+      <HeaderFlex align="center" gap={2} paddingLeft={2} paddingRight={1} sizing="border">
         <Stack flex={1}>
           <Breadcrumbs
             maxLength={3}

diff --git a/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputInner.tsx b/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputInner.tsx
@@ -9,9 +9,10 @@ import {useCommentInput} from './useCommentInput'
 import {Editable} from './Editable'
 import {useUser} from 'sanity'
 
-const EditableWrap = styled(Box)({
-  // ...
-})
+const EditableWrap = styled(Box)`
+  max-height: 20vh;
+  overflow-y: auto;
+`
 
 const ButtonDivider = styled(MenuDivider)({
   height: 20,
@@ -118,19 +119,16 @@ export function CommentInputInner(props: CommentInputInnerProps) {
         data-expand-on-focus={expandOnFocus && !canSubmit ? 'true' : 'false'}
         data-focused={focused ? 'true' : 'false'}
         flex={1}
-        paddingX={1}
-        paddingY={2}
-        paddingBottom={1}
         sizing="border"
         tone="default"
         shadow={1}
       >
-        <Stack space={2}>
-          <EditableWrap sizing="border">
+        <Stack>
+          <EditableWrap paddingX={1} paddingY={2} sizing="border">
             <Editable placeholder={placeholder} focusLock={focusLock} />
           </EditableWrap>
 
-          <Flex align="center" gap={1} justify="flex-end" data-ui="CommentInputActions">
+          <Flex align="center" data-ui="CommentInputActions" gap={1} justify="flex-end" padding={1}>
             <ActionButton
               aria-label="Mention user"
               icon={MentionIcon}