From ca0020f2c5d360d1e77a4bfcc716bf162a1c9174 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Wed, 4 Sep 2024 16:35:47 +0200
Subject: [PATCH] fix(post mobile): tooltip for title wasn't centered

---
 src/components/post-mobile/post-mobile.tsx | 21 ++++++++++++---------
 src/views/post/post.module.css             |  5 ++++-
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx
index 0e68cc1d..fbe1b93d 100644
--- a/src/components/post-mobile/post-mobile.tsx
+++ b/src/components/post-mobile/post-mobile.tsx
@@ -130,15 +130,18 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
               <img src='assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} />
             </span>
           )}
-          {title &&
-            (title.length <= 30 ? (
-              <span className={styles.subject}>{title}</span>
-            ) : (
-              <Tooltip
-                children={<span className={styles.subject}>{title.slice(0, 30) + '(...)'}</span>}
-                content={title.length < 1000 ? title : title.slice(0, 1000) + `... ${t('title_too_long')}`}
-              />
-            ))}
+          {title && (
+            <span className={styles.subjectWrapper}>
+              {title.length <= 30 ? (
+                <span className={styles.subject}>{title}</span>
+              ) : (
+                <Tooltip
+                  children={<span className={styles.subject}>{title.slice(0, 30) + '(...)'}</span>}
+                  content={title.length < 1000 ? title : title.slice(0, 1000) + `... ${t('title_too_long')}`}
+                />
+              )}
+            </span>
+          )}
         </span>
         <span className={styles.dateTimePostNum}>
           {subplebbitAddress && (isInAllView || isInSubscriptionsView) && !isReply && (
diff --git a/src/views/post/post.module.css b/src/views/post/post.module.css
index 615ee898..24afe051 100644
--- a/src/views/post/post.module.css
+++ b/src/views/post/post.module.css
@@ -303,13 +303,16 @@
   padding: 0 13px;
 }
 
+.postMobile .nameBlock .subjectWrapper {
+  display: block;
+}
+
 .postMobile .nameBlock .subject {
   color: var(--post-mobile-subject-text-color);
   font-weight: var(--post-mobile-subject-font-weight);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  display: block;
 }
 
 .postMobile .dateTimePostNum {