From 9611509a7eec13631e74b47574da45f1c4192985 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 15 Jan 2023 23:05:04 +0100
Subject: [PATCH] Improvements for sensitive content overlay for too long posts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/status-content.tsx     |   2 +-
 .../statuses/sensitive-content-overlay.tsx    | 118 +++++++++---------
 2 files changed, 61 insertions(+), 59 deletions(-)

diff --git a/app/soapbox/components/status-content.tsx b/app/soapbox/components/status-content.tsx
index bedef1fa6..23a688ed5 100644
--- a/app/soapbox/components/status-content.tsx
+++ b/app/soapbox/components/status-content.tsx
@@ -103,7 +103,7 @@ const StatusContent: React.FC<IStatusContent> = ({ status, onClick, collapsable
   const maybeSetCollapsed = (): void => {
     if (!node.current) return;
 
-    if (collapsable && onClick && !collapsed && status.spoiler_text.length === 0) {
+    if (collapsable && onClick && !collapsed) {
       if (node.current.clientHeight > MAX_HEIGHT) {
         setCollapsed(true);
       }
diff --git a/app/soapbox/components/statuses/sensitive-content-overlay.tsx b/app/soapbox/components/statuses/sensitive-content-overlay.tsx
index 21630929f..ed8891535 100644
--- a/app/soapbox/components/statuses/sensitive-content-overlay.tsx
+++ b/app/soapbox/components/statuses/sensitive-content-overlay.tsx
@@ -92,7 +92,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
   return (
     <div
       className={classNames('absolute z-40', {
-        'cursor-default backdrop-blur-lg rounded-lg w-full h-full border-0 flex justify-center items-center': !visible,
+        'cursor-default backdrop-blur-lg rounded-lg w-full h-full border-0 flex justify-center': !visible,
         'bg-gray-800/75 inset-0': !visible,
         'bottom-1 right-1': visible,
       })}
@@ -107,64 +107,66 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
           size='sm'
         />
       ) : (
-        <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)}
-            </Text>
-
-            <Text theme='white' size='sm' weight='medium'>
-              {intl.formatMessage(isUnderReview ? messages.underReviewSubtitle : messages.sensitiveSubtitle)}
-            </Text>
-
-            {status.spoiler_text && (
-              <div className='py-4 italic'>
-                <Text className='line-clamp-6' theme='white' size='md' weight='medium'>
-                  &ldquo;<span dangerouslySetInnerHTML={{ __html: status.spoilerHtml }} />&rdquo;
-                </Text>
-              </div>
-            )}
-          </div>
-
-          <HStack alignItems='center' justifyContent='center' space={2}>
-            {isUnderReview ? (
-              <>
-                {links.get('support') && (
-                  <a
-                    href={links.get('support')}
-                    target='_blank'
-                    onClick={(event) => event.stopPropagation()}
-                  >
-                    <Button
-                      type='button'
-                      theme='outline'
-                      size='sm'
-                      icon={require('@tabler/icons/headset.svg')}
+        <div className='flex justify-center items-center max-h-screen'>
+          <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)}
+              </Text>
+
+              <Text theme='white' size='sm' weight='medium'>
+                {intl.formatMessage(isUnderReview ? messages.underReviewSubtitle : messages.sensitiveSubtitle)}
+              </Text>
+
+              {status.spoiler_text && (
+                <div className='py-4 italic'>
+                  <Text className='line-clamp-6' theme='white' size='md' weight='medium'>
+                    &ldquo;<span dangerouslySetInnerHTML={{ __html: status.spoilerHtml }} />&rdquo;
+                  </Text>
+                </div>
+              )}
+            </div>
+
+            <HStack alignItems='center' justifyContent='center' space={2}>
+              {isUnderReview ? (
+                <>
+                  {links.get('support') && (
+                    <a
+                      href={links.get('support')}
+                      target='_blank'
+                      onClick={(event) => event.stopPropagation()}
                     >
-                      {intl.formatMessage(messages.contact)}
-                    </Button>
-                  </a>
-                )}
-              </>
-            ) : null}
-
-            <Button
-              type='button'
-              theme='outline'
-              size='sm'
-              icon={require('@tabler/icons/eye.svg')}
-              onClick={toggleVisibility}
-            >
-              {intl.formatMessage(messages.show)}
-            </Button>
-
-            {(isUnderReview && isOwnStatus) ? (
-              <DropdownMenu
-                items={menu}
-                src={require('@tabler/icons/dots.svg')}
-              />
-            ) : null}
-          </HStack>
+                      <Button
+                        type='button'
+                        theme='outline'
+                        size='sm'
+                        icon={require('@tabler/icons/headset.svg')}
+                      >
+                        {intl.formatMessage(messages.contact)}
+                      </Button>
+                    </a>
+                  )}
+                </>
+              ) : null}
+
+              <Button
+                type='button'
+                theme='outline'
+                size='sm'
+                icon={require('@tabler/icons/eye.svg')}
+                onClick={toggleVisibility}
+              >
+                {intl.formatMessage(messages.show)}
+              </Button>
+
+              {(isUnderReview && isOwnStatus) ? (
+                <DropdownMenu
+                  items={menu}
+                  src={require('@tabler/icons/dots.svg')}
+                />
+              ) : null}
+            </HStack>
+          </div>
         </div>
       )}
     </div>