Merge pull request #9210 from ForumMagnum/fix-tag-hover-styling

Fix styling of TagSmallPostLink in tag hover preview
ForumMagnum · May 2, 2024 · b04e7a3 · b04e7a3
2 parents 4c59c15 + ac315c6
commit b04e7a3
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 10 deletions.
diff --git a/packages/lesswrong/components/tagging/TagSmallPostLink.tsx b/packages/lesswrong/components/tagging/TagSmallPostLink.tsx
@@ -66,8 +66,8 @@ const TagSmallPostLink = ({classes, post, hideMeta, wrap, widerSpacing}: {
 }) => {
   const {PostsTooltip, UsersName, MetaInfo, KarmaDisplay} = Components;
   return (
-    <div className={classNames(classes.root, {[classes.widerSpacing]: widerSpacing})}>
-      <PostsTooltip post={post} clickable placement="left-start">
+    <PostsTooltip post={post} clickable={false} placement="bottom-start">
+      <div className={classNames(classes.root, {[classes.widerSpacing]: widerSpacing})}>
         <div className={classes.post}>
           {!hideMeta &&
             <MetaInfo className={classes.karma}>
@@ -82,12 +82,12 @@ const TagSmallPostLink = ({classes, post, hideMeta, wrap, widerSpacing}: {
           </Link>
           {!hideMeta && post.user &&
             <MetaInfo className={classes.author}>
-              <UsersName user={post.user} />
+              <UsersName user={post.user} nowrap={!wrap} />
             </MetaInfo>
           }
         </div>
-      </PostsTooltip>
-    </div>
+      </div>
+    </PostsTooltip>
   );
 }
 

diff --git a/packages/lesswrong/components/users/UsersName.tsx b/packages/lesswrong/components/users/UsersName.tsx
@@ -14,6 +14,7 @@ const UsersName = ({
   nofollow=false,
   simple=false,
   tooltipPlacement="left",
+  nowrap,
   className,
   ...otherProps
 }: {
@@ -24,16 +25,17 @@ const UsersName = ({
   /** Makes it not a link, and removes the tooltip. */
   simple?: boolean,
   tooltipPlacement?: PopperPlacementType,
+  nowrap?: boolean,
   noTooltip?: boolean,
   color?: boolean,
   pageSectionContext?: string,
   /** Add an extra class/styling to the link */
   className?: string,
 }) => {
   if (user) {
-    return <Components.UsersNameDisplay user={user} nofollow={nofollow} simple={simple} tooltipPlacement={tooltipPlacement} className={className} {...otherProps}/>
+    return <Components.UsersNameDisplay user={user} nofollow={nofollow} simple={simple} tooltipPlacement={tooltipPlacement} nowrap={nowrap} className={className} {...otherProps}/>
   } else if (documentId) {
-    return <Components.UsersNameWrapper documentId={documentId} nofollow={nofollow} simple={simple} className={className}  {...otherProps}/>
+    return <Components.UsersNameWrapper documentId={documentId} nofollow={nofollow} simple={simple} nowrap={nowrap} className={className}  {...otherProps}/>
   } else {
     return <Components.UserNameDeleted />
   }

diff --git a/packages/lesswrong/components/users/UsersNameDisplay.tsx b/packages/lesswrong/components/users/UsersNameDisplay.tsx
@@ -18,6 +18,9 @@ const styles = (theme: ThemeType): JssStyles => ({
   noKibitz: {
     minWidth: 55,
   },
+  nowrap: {
+    whiteSpace: "nowrap"
+  },
 });
 
 type DisableNoKibitzContextType = {disableNoKibitz: boolean, setDisableNoKibitz: (disableNoKibitz: boolean) => void};
@@ -32,6 +35,7 @@ const UsersNameDisplay = ({
   color=false,
   nofollow=false,
   simple=false,
+  nowrap=false,
   tooltipPlacement="left",
   pageSectionContext,
   className,
@@ -45,6 +49,8 @@ const UsersNameDisplay = ({
   nofollow?: boolean,
   /** The name is only text, not a link, and doesn't have a hover */
   simple?: boolean,
+  /** If set, usernames with spaces are not allowed to wrap. Default false. */
+  nowrap?: boolean,
   /** Positioning of the tooltip, if there is one */
   tooltipPlacement?: PopperPlacementType,
   /** If provided, a tracking string added to the link */
@@ -106,7 +112,11 @@ const UsersNameDisplay = ({
         >
           <Link
             to={profileUrl}
-            className={classNames(colorClass, noKibitz && classes.noKibitz)}
+            className={classNames(
+              colorClass,
+              noKibitz && classes.noKibitz,
+              nowrap && classes.nowrap,
+            )}
             {...(nofollow ? {rel:"nofollow"} : {})}
           >
             {displayName}

diff --git a/packages/lesswrong/components/users/UsersNameWrapper.tsx b/packages/lesswrong/components/users/UsersNameWrapper.tsx
@@ -10,10 +10,11 @@ import type { PopperPlacementType } from '@material-ui/core/Popper'
  * display their name. If the nofollow attribute is true OR the user has a
  * spam-risk score below 0.8, the user-page link will be marked nofollow.
  */
-const UsersNameWrapper = ({documentId, nofollow=false, simple=false, className, ...otherProps}: {
+const UsersNameWrapper = ({documentId, nofollow=false, simple=false, nowrap=false, className, ...otherProps}: {
   documentId: string,
   nofollow?: boolean,
   simple?: boolean,
+  nowrap?: boolean,
   className?: string,
   tooltipPlacement?: PopperPlacementType,
 }) => {
@@ -25,7 +26,7 @@ const UsersNameWrapper = ({documentId, nofollow=false, simple=false, className,
   if (!document && loading) {
     return <Components.Loading />
   } else if (document) {
-    return <Components.UsersNameDisplay user={document} nofollow={nofollow || document.spamRiskScore<0.8} simple={simple} className={className} {...otherProps}/>
+    return <Components.UsersNameDisplay user={document} nofollow={nofollow || document.spamRiskScore<0.8} simple={simple} nowrap={nowrap} className={className} {...otherProps}/>
   } else {
     return <Components.UserNameDeleted/>
   }