fix(post): remove margin to fix virtuoso glitch on desktop

This commit is contained in:
plebeius.eth
2024-04-06 18:37:50 +02:00
parent 4cef89eee3
commit af75215938
2 changed files with 16 additions and 6 deletions
+11 -3
View File
@@ -10,12 +10,12 @@
padding: 0.5em 0; /* instead of using margin, wrap with padding */
}
.threadHideButtonWrapper {
.hideButtonWrapper {
padding-right: 5px;
float: left;
}
.postDesktop .threadHideButton {
.postDesktop .hideButton {
background-repeat: no-repeat;
background-position: center;
width: 18px;
@@ -23,6 +23,7 @@
display: inline-block;
image-rendering: pixelated;
cursor: pointer;
transform: translateY(-1px);
}
/* clearfix to the container of the floatied elements to contain them */
@@ -155,9 +156,17 @@
.postDesktop .summary {
padding-top: 10px;
padding-left: 23px;
position: relative;
color: var(--post-mobile-abbr-text-color);
}
.postDesktop .summary .expandButtonWrapper {
position: absolute;
top: 8px;
left: 2px;
}
.postDesktop .summary .expandButton {
background-image: var(--post-replies-expand-button-background-image);
background-repeat: no-repeat;
@@ -166,7 +175,6 @@
height: 18px;
display: inline-block;
image-rendering: pixelated;
margin: 0 3px -4px 2px;
cursor: pointer;
}
+5 -3
View File
@@ -128,8 +128,8 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies:
<hr />
</div>
{!isInPostPage && (
<span className={styles.threadHideButtonWrapper}>
<span className={`${styles.threadHideButton} ${styles.hideThread}`} />
<span className={styles.hideButtonWrapper}>
<span className={`${styles.hideButton} ${styles.hideThread}`} />
</span>
)}
{commentMediaInfo?.url && (
@@ -213,7 +213,9 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies:
)}
{(replies.length > 5 || pinned) && !isInPostPage && (
<span className={styles.summary}>
<span className={styles.expandButton} />
<span className={styles.expandButtonWrapper}>
<span className={styles.expandButton} />
</span>
<span>
{repliesCount} replies {linkCount > 0 && `and ${linkCount} links`} omitted.{' '}
</span>