Merge pull request #1528 from ecency/bugfix/outgoing-modal

Bugfix/outgoing modal
ecency · Jan 9, 2024 · 798b896 · 798b896
2 parents 67dd8a7 + d0f2a89
commit 798b896
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 9 deletions.
diff --git a/src/common/components/discussion/index.tsx b/src/common/components/discussion/index.tsx
@@ -344,7 +344,7 @@ export const Item = (props: ItemProps) => {
                   entry,
                   onSuccess: deleted,
                   children: (
-                    <a title={_t("g.delete")} className="delete-btn ml-0 pr-3">
+                    <a title={_t("g.delete")} className="delete-btn !ml-0 pr-3">
                       {deleteForeverSvg} {_t("g.delete")}
                     </a>
                   )

diff --git a/src/common/components/entry-read-time/index.tsx b/src/common/components/entry-read-time/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
-import Tooltip from "../tooltip";
+import { StyledTooltip } from "../tooltip";
 import { _t } from "../../i18n";
 import { informationVariantSvg } from "../../img/svg";
 import UserAvatar from "../user-avatar";
@@ -51,7 +51,7 @@ export const ReadTime = (props: any) => {
 
   return toolTip ? (
     <div className="post-info">
-      <Tooltip
+      <StyledTooltip
         content={
           _t("entry.post-word-count") +
           " " +
@@ -67,7 +67,7 @@ export const ReadTime = (props: any) => {
         <span className="flex items-center">
           <span className="info-icon w-[24px] mr-0 mr-md-2">{informationVariantSvg}</span>
         </span>
-      </Tooltip>
+      </StyledTooltip>
     </div>
   ) : (
     <>
@@ -82,13 +82,13 @@ export const ReadTime = (props: any) => {
           {topCurator && (
             <div className="top-curator">
               {_t("entry.post-top-curator")}
-              <Tooltip content={topCurator}>
+              <StyledTooltip content={topCurator}>
                 <Link to={`/@${topCurator}`}>
                   <div className="curator">
                     <UserAvatar username={topCurator} size="small" />
                   </div>
                 </Link>
-              </Tooltip>
+              </StyledTooltip>
             </div>
           )}
         </div>

diff --git a/src/common/components/rc-delegations-list/index.tsx b/src/common/components/rc-delegations-list/index.tsx
@@ -90,7 +90,7 @@ export const RcDelegationsList = (props: any) => {
         {listMode === "out" && (
           <>
             {outGoingList.length > 0 ? (
-              <List defer={true} inline={true}>
+              <List scrollable={true} defer={true} inline={true}>
                 {outGoingList
                   ?.slice(0, loadList)
                   .filter(

diff --git a/src/common/components/tooltip/index.tsx b/src/common/components/tooltip/index.tsx
@@ -1,6 +1,7 @@
 import React, { ReactNode, useState } from "react";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
+import { useMountedState } from "react-use";
 
 interface Props {
   content: string | JSX.Element;
@@ -22,9 +23,11 @@ export function StyledTooltip({ children, content }: StyledProps) {
   const [popperElement, setPopperElement] = useState<any>();
   const [show, setShow] = useState(false);
 
+  const isMounted = useMountedState();
+
   const popper = usePopper(ref, popperElement);
 
-  return (
+  return isMounted() ? (
     <div
       ref={setRef}
       className="styled-tooltip"
@@ -57,5 +60,7 @@ export function StyledTooltip({ children, content }: StyledProps) {
         document.querySelector("#popper-container") ?? document.createElement("div")
       )}
     </div>
+  ) : (
+    <></>
   );
 }
diff --git a/src/common/features/ui/list/index.tsx b/src/common/features/ui/list/index.tsx
@@ -6,6 +6,7 @@ interface Props {
   defer?: boolean;
   inline?: boolean;
   grid?: boolean;
+  scrollable?: boolean;
 }
 
 export function List(props: HTMLProps<HTMLDivElement> & Props) {
@@ -15,12 +16,13 @@ export function List(props: HTMLProps<HTMLDivElement> & Props) {
     <div
       {...nativeProps}
       className={classNameObject({
-        "flex overflow-hidden": !props.grid ?? true,
+        flex: !props.grid ?? true,
         "grid grid-cols-2": props.grid ?? false,
         "gap-3": props.defer ?? false,
         "flex-row flex-wrap": props.inline ?? false,
         "flex-col rounded-xl border border-[--border-color] bg-gray-100 dark:bg-gray-900":
           !props.inline,
+        "overflow-hidden": !props.scrollable,
         [props.className ?? ""]: !!props.className
       })}
     />