Update folded area for the anonymous case

src/components/expandable.jsx

@@ -5,20 +5,36 @@ import { useEvent } from 'react-use-event-hook';
 import { useSelector } from 'react-redux';
 import { ButtonLink } from './button-link';
 import { Icon } from './fontawesome-icons';
-import { postFoldedArea } from './expandable-constants';
 import style from './expandable.module.scss';
 
+// Pixel areas (before the UI scale applied) of the folded text rectangles for
+// posts and comments. The Expandable component reduces the height of the text
+// to approximately match this area.
+
+const foldedAreas = {
+  post: 600 * 130,
+  comment: 500 * 110,
+  postAnonymous: 860 * 130, // No sidebar, so we need more pixels
+  commentAnonymous: 700 * 110,
+};
+
 const isSafari = /^((?!chrome|android).)*safari/i.test(navigator?.userAgent ?? '');
 
 export function Expandable({
   children,
   expanded: givenExpanded = false,
   tail = null,
   panelClass = null,
-  // See presets in ./expandable-constants.js
-  foldedArea = postFoldedArea,
+  contentType = 'post', // or 'comment'
 }) {
+  const authenticated = useSelector((state) => state.authenticated);
   const uiScale = useSelector((state) => state.uiScale ?? 100) / 100;
+
+  if (contentType !== 'comment' && contentType !== 'post') {
+    throw new Error('Unsupported content type');
+  }
+
+  const foldedArea = foldedAreas[contentType + (authenticated ? '' : 'Anonymous')];
   const scaledFoldedArea = foldedArea * uiScale * uiScale;
   // Don't fold content that is smaller than this
   const scaledMaxUnfoldedArea = scaledFoldedArea * 1.5;

src/components/post/post-comment-preview.jsx

@@ -16,7 +16,6 @@ import { Separated } from '../separated';
 import TimeDisplay from '../time-display';
 import UserName from '../user-name';
 
-import { commentFoldedArea } from '../expandable-constants';
 import { Expandable } from '../expandable';
 import styles from './post-comment-preview.module.scss';
 import { CommentProvider } from './post-comment-provider';
@@ -158,7 +157,7 @@ export function PostCommentPreview({
           ) : (
             <Expandable
               expanded={frontPreferences.readMoreStyle === READMORE_STYLE_COMPACT}
-              foldedArea={commentFoldedArea}
+              contentType="comment"
               tail={commentTail}
             >
               <PieceOfText

src/components/post/post-comment.jsx

@@ -25,7 +25,6 @@ import { initialAsyncState } from '../../redux/async-helpers';
 import { existingCommentURI, newCommentURI } from '../../services/drafts';
 import { UnlockedHiddenComment } from '../unlocked-hidden-comment';
 import { Expandable } from '../expandable';
-import { commentFoldedArea } from '../expandable-constants';
 import { PostCommentMore } from './post-comment-more';
 import { PostCommentPreview } from './post-comment-preview';
 import { CommentProvider } from './post-comment-provider';
@@ -317,7 +316,7 @@ class PostComment extends Component {
               !this.props.translateStatus.initial
             }
             tail={commentTail}
-            foldedArea={commentFoldedArea}
+            contentType="comment"
           >
             <PieceOfText
               text={this.props.body}