From 24059bf711fd221466e11f8d6773f667f4554331 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 31 Aug 2024 19:50:45 +0200
Subject: [PATCH] pl-fe: actually fix quote max height
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../pl-fe/src/components/quoted-status.tsx    |  1 +
 .../pl-fe/src/components/status-content.tsx   | 26 ++++++++++++-------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/pl-fe/src/components/quoted-status.tsx b/packages/pl-fe/src/components/quoted-status.tsx
index 6b46be2cd..4c0ec79f3 100644
--- a/packages/pl-fe/src/components/quoted-status.tsx
+++ b/packages/pl-fe/src/components/quoted-status.tsx
@@ -100,6 +100,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
               <StatusContent
                 status={status}
                 collapsable
+                quote
               />
 
               {status.quote_id && <QuotedStatusIndicator statusId={status.quote_id} />}
diff --git a/packages/pl-fe/src/components/status-content.tsx b/packages/pl-fe/src/components/status-content.tsx
index 80752e949..385b6ebc0 100644
--- a/packages/pl-fe/src/components/status-content.tsx
+++ b/packages/pl-fe/src/components/status-content.tsx
@@ -30,12 +30,17 @@ const messages = defineMessages({
 
 interface IReadMoreButton {
   onClick: React.MouseEventHandler;
+  quote?: boolean;
 }
 
 /** Button to expand a truncated status (due to too much content) */
-const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick }) => (
+const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick, quote }) => (
   <div className='relative'>
-    <div className='absolute -top-16 h-16 w-full bg-gradient-to-b from-transparent to-white black:to-black dark:to-primary-900' />
+    <div
+      className={clsx('absolute -top-16 h-16 w-full bg-gradient-to-b from-transparent to-white black:to-black dark:to-primary-900', {
+        'hover:to-gray-100 black:hover-to-gray-800 dark:hover:to-gray-800': quote,
+      })}
+    />
     <button className='flex items-center border-0 bg-transparent p-0 pt-2 text-gray-900 hover:underline active:underline dark:text-gray-300' onClick={onClick}>
       <FormattedMessage id='status.read_more' defaultMessage='Read more' />
       <Icon className='inline-block h-5 w-5' src={require('@tabler/icons/outline/chevron-right.svg')} />
@@ -49,6 +54,7 @@ interface IStatusContent {
   collapsable?: boolean;
   translatable?: boolean;
   textSize?: Sizes;
+  quote?: boolean;
 }
 
 /** Renders the text content of a status */
@@ -58,6 +64,7 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
   collapsable = false,
   translatable,
   textSize = 'md',
+  quote = false,
 }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
@@ -114,8 +121,6 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
 
   const withSpoiler = status.spoiler_text.length > 0;
 
-  const baseClassName = 'text-gray-900 dark:text-gray-100 break-words text-ellipsis overflow-hidden relative focus:outline-none';
-
   const options: HTMLReactParserOptions = {
     replace(domNode) {
       if (domNode instanceof Element && ['script', 'iframe'].includes(domNode.name)) {
@@ -174,9 +179,8 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
   const content = parse(parsedHtml, options);
 
   const direction = getTextDirection(status.search_index);
-  const className = clsx(baseClassName, {
+  const className = clsx('relative overflow-hidden text-ellipsis break-words text-gray-900 focus:outline-none dark:text-gray-100', {
     'cursor-pointer': onClick,
-    'whitespace-normal': withSpoiler,
     'max-h-[200px]': collapsed,
     'leading-normal big-emoji': onlyEmoji,
   });
@@ -224,7 +228,7 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
     );
 
     if (collapsed) {
-      output.push(<ReadMoreButton onClick={onClick} key='read-more' />);
+      output.push(<ReadMoreButton onClick={onClick} key='read-more' quote={quote} />);
     }
 
     let hasPoll = false;
@@ -241,9 +245,7 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
         ref={node}
         tabIndex={0}
         key='content'
-        className={clsx(baseClassName, {
-          'leading-normal big-emoji': onlyEmoji,
-        })}
+        className={className}
         direction={direction}
         lang={status.language || undefined}
         size={textSize}
@@ -252,6 +254,10 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
       </Markup>,
     );
 
+    if (collapsed) {
+      output.push(<ReadMoreButton onClick={() => {}} key='read-more' quote={quote} />);
+    }
+
     if (status.poll_id) {
       output.push(<Poll id={status.poll_id} key='poll' status={status} />);
     }