Merge branch 'sensitive-overlay-height' into 'develop'

Fix 'Overly long content warning spills over the banner'

Closes #1173

See merge request soapbox-pub/soapbox!1910

app/soapbox/components/quoted-status.tsx

@@ -1,5 +1,5 @@
 import classNames from 'clsx';
-import React, { MouseEventHandler, useState } from 'react';
+import React, { MouseEventHandler, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
@@ -37,7 +37,16 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
   const settings = useSettings();
   const displayMedia = settings.get('displayMedia');
 
+  const overlay = useRef<HTMLDivElement>(null);
+
   const [showMedia, setShowMedia] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
+  const [minHeight, setMinHeight] = useState(208);
+
+  useEffect(() => {
+    if (overlay.current) {
+      setMinHeight(overlay.current.getBoundingClientRect().height);
+    }
+  }, [overlay.current]);
 
   const handleExpandClick: MouseEventHandler<HTMLDivElement> = (e) => {
     if (!status) return;
@@ -103,15 +112,16 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
 
         <StatusReplyMentions status={status} hoverable={false} />
 
-        <Stack className={classNames('relative z-0', {
+        <Stack
-          'min-h-[220px]': status.hidden,
+          className='relative z-0'
-        })}
+          style={{ minHeight: status.hidden ? Math.max(minHeight, 208) + 12 : undefined }}
         >
           {(status.hidden) && (
             <SensitiveContentOverlay
               status={status}
               visible={showMedia}
               onToggleVisibility={handleToggleMediaVisibility}
+              ref={overlay}
             />
           )}
 

app/soapbox/components/status-action-button.tsx

@@ -41,7 +41,7 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
   const renderIcon = () => {
     if (emoji) {
       return (
-        <span className='block w-6 h-6 flex items-center justify-center'>
+        <span className='flex w-6 h-6 items-center justify-center'>
           <Emoji className='w-full h-full p-0.5' emoji={emoji} />
         </span>
       );

app/soapbox/components/status.tsx

@@ -79,8 +79,10 @@ const Status: React.FC<IStatus> = (props) => {
   const displayMedia = settings.get('displayMedia') as string;
   const didShowCard = useRef(false);
   const node = useRef<HTMLDivElement>(null);
+  const overlay = useRef<HTMLDivElement>(null);
 
   const [showMedia, setShowMedia] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
+  const [minHeight, setMinHeight] = useState(208);
 
   const actualStatus = getActualStatus(status);
 
@@ -95,6 +97,12 @@ const Status: React.FC<IStatus> = (props) => {
     setShowMedia(defaultMediaVisibility(status, displayMedia));
   }, [status.id]);
 
+  useEffect(() => {
+    if (overlay.current) {
+      setMinHeight(overlay.current.getBoundingClientRect().height);
+    }
+  }, [overlay.current]);
+
   const handleToggleMediaVisibility = (): void => {
     setShowMedia(!showMedia);
   };
@@ -358,17 +366,15 @@ const Status: React.FC<IStatus> = (props) => {
             <StatusReplyMentions status={actualStatus} hoverable={hoverable} />
 
             <Stack
-              className={
+              className='relative z-0'
-                classNames('relative z-0', {
+              style={{ minHeight: isUnderReview || isSensitive ? Math.max(minHeight, 208) + 12 : undefined }}
-                  'min-h-[220px]': isUnderReview || isSensitive,
-                })
-              }
             >
               {(isUnderReview || isSensitive) && (
                 <SensitiveContentOverlay
                   status={status}
                   visible={showMedia}
                   onToggleVisibility={handleToggleMediaVisibility}
+                  ref={overlay}
                 />
               )}
 

app/soapbox/components/statuses/sensitive-content-overlay.tsx

@@ -25,7 +25,7 @@ interface ISensitiveContentOverlay {
   visible?: boolean
 }
 
-const SensitiveContentOverlay = (props: ISensitiveContentOverlay) => {
+const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveContentOverlay>((props, ref) => {
   const { onToggleVisibility, status } = props;
   const isUnderReview = status.visibility === 'self';
 
@@ -72,7 +72,7 @@ const SensitiveContentOverlay = (props: ISensitiveContentOverlay) => {
           size='sm'
         />
       ) : (
-        <div className='text-center w-3/4 mx-auto space-y-4'>
+        <div className='text-center w-3/4 mx-auto space-y-4' ref={ref}>
           <div className='space-y-1'>
             <Text theme='white' weight='semibold'>
               {intl.formatMessage(isUnderReview ? messages.underReviewTitle : messages.sensitiveTitle)}
@@ -84,7 +84,7 @@ const SensitiveContentOverlay = (props: ISensitiveContentOverlay) => {
 
             {status.spoiler_text && (
               <div className='py-4 italic'>
-                <Text theme='white' size='md' weight='medium'>
+                <Text className='line-clamp-6' theme='white' size='md' weight='medium'>
                   &ldquo;<span dangerouslySetInnerHTML={{ __html: status.spoilerHtml }} />&rdquo;
                 </Text>
               </div>
@@ -127,6 +127,6 @@ const SensitiveContentOverlay = (props: ISensitiveContentOverlay) => {
       )}
     </div>
   );
-};
+});
 
-export default SensitiveContentOverlay;
+export default SensitiveContentOverlay;

app/soapbox/features/status/components/detailed-status.tsx

@@ -1,5 +1,4 @@
-import classNames from 'clsx';
+import React, { useEffect, useRef, useState } from 'react';
-import React, { useRef } from 'react';
 import { FormattedDate, FormattedMessage, useIntl } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';
@@ -35,7 +34,17 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
   showMedia,
 }) => {
   const intl = useIntl();
+
   const node = useRef<HTMLDivElement>(null);
+  const overlay = useRef<HTMLDivElement>(null);
+
+  const [minHeight, setMinHeight] = useState(208);
+
+  useEffect(() => {
+    if (overlay.current) {
+      setMinHeight(overlay.current.getBoundingClientRect().height);
+    }
+  }, [overlay.current]);
 
   const handleOpenCompareHistoryModal = () => {
     onOpenCompareHistoryModal(status);
@@ -87,17 +96,15 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
         <StatusReplyMentions status={actualStatus} />
 
         <Stack
-          className={
+          className='relative z-0'
-            classNames('relative z-0', {
+          style={{ minHeight: isUnderReview || isSensitive ? Math.max(minHeight, 208) + 12 : undefined }}
-              'min-h-[220px]': isUnderReview || isSensitive,
-            })
-          }
         >
           {(isUnderReview || isSensitive) && (
             <SensitiveContentOverlay
               status={status}
               visible={showMedia}
               onToggleVisibility={onToggleMediaVisibility}
+              ref={overlay}
             />
           )}
 

package.json

@@ -68,6 +68,7 @@
     "@sentry/tracing": "^7.11.1",
     "@tabler/icons": "^1.111.0",
     "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.7",
     "@tanstack/react-query": "^4.0.10",
     "@testing-library/react": "^12.1.4",

tailwind.config.js

@@ -85,6 +85,7 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/forms'),
+    require('@tailwindcss/line-clamp'),
     require('@tailwindcss/typography'),
   ],
 };

yarn.lock

@@ -2272,6 +2272,11 @@
   dependencies:
     mini-svg-data-uri "^1.2.3"
 
+"@tailwindcss/line-clamp@^0.4.2":
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.2.tgz#f353c5a8ab2c939c6267ac5b907f012e5ee130f9"
+  integrity sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==
+
 "@tailwindcss/typography@^0.5.7":
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.7.tgz#e0b95bea787ee14c5a34a74fc824e6fe86ea8855"