From 3a029906744c6f42d501567389ffa34ccf650b12 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Wed, 4 Oct 2023 17:25:42 +0200
Subject: [PATCH] fix(post): fix misplaced pin and lock icons

---
 src/components/styled/views/Board.styled.jsx  |  6 ++
 src/components/styled/views/Thread.styled.jsx |  6 ++
 src/components/views/Board.jsx                | 84 +++++++++++++------
 src/components/views/Description.jsx          | 16 +++-
 src/components/views/Rules.jsx                | 16 +++-
 src/components/views/Thread.jsx               | 16 +++-
 6 files changed, 108 insertions(+), 36 deletions(-)

diff --git a/src/components/styled/views/Board.styled.jsx b/src/components/styled/views/Board.styled.jsx
index 52a7ef36..b90370e2 100644
--- a/src/components/styled/views/Board.styled.jsx
+++ b/src/components/styled/views/Board.styled.jsx
@@ -2147,6 +2147,12 @@ export const BoardForm = styled.div`
         margin: 0;
       }
 
+      .thread-icons-mobile {
+        margin-top: -1px;
+        margin-right: 2px;
+        image-rendering: pixelated;
+      }
+
       blockquote {
         padding-top: 5px;
         display: block;
diff --git a/src/components/styled/views/Thread.styled.jsx b/src/components/styled/views/Thread.styled.jsx
index 5803acad..01ef11ff 100644
--- a/src/components/styled/views/Thread.styled.jsx
+++ b/src/components/styled/views/Thread.styled.jsx
@@ -1336,6 +1336,12 @@ export const BoardForm = styled.div`
         object-fit: scale-down;
       }
 
+      .thread-icons-mobile {
+        margin-top: -1px;
+        margin-right: 2px;
+        image-rendering: pixelated;
+      }
+
       blockquote {
         padding-top: 5px;
         display: block;
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 795e8767..11782d3d 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -1153,10 +1153,20 @@ const Board = () => {
                                 ## Board Mods
                               </span>
                               &nbsp;
-                              <span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
-                                <img src='assets/sticky.gif' alt='Sticky' title='Sticky' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
+                              <span className='thread-icons-mobile'>
+                                <img
+                                  src='assets/sticky.gif'
+                                  alt='Sticky'
+                                  title='Sticky'
+                                  style={{ all: 'unset', marginBottom: '-2px', paddingLeft: '2px', imageRendering: 'pixelated' }}
+                                />
                                 &nbsp;
-                                <img src='assets/closed.gif' alt='Closed' title='Closed' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
+                                <img
+                                  src='assets/closed.gif'
+                                  alt='Closed'
+                                  title='Closed'
+                                  style={{ all: 'unset', marginBottom: '-2px', paddingLeft: '2px', imageRendering: 'pixelated' }}
+                                />
                               </span>
                               <br />
                               <span className='subject-mobile' style={{ marginBottom: '-15px' }}>
@@ -1378,10 +1388,20 @@ const Board = () => {
                                 ## Board Mods
                               </span>
                               &nbsp;
-                              <span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
-                                <img src='assets/sticky.gif' alt='Sticky' title='Sticky' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
+                              <span className='thread-icons-mobile'>
+                                <img
+                                  src='assets/sticky.gif'
+                                  alt='Sticky'
+                                  title='Sticky'
+                                  style={{ all: 'unset', marginBottom: '-2px', paddingLeft: '2px', imageRendering: 'pixelated' }}
+                                />
                                 &nbsp;
-                                <img src='assets/closed.gif' alt='Closed' title='Closed' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
+                                <img
+                                  src='assets/closed.gif'
+                                  alt='Closed'
+                                  title='Closed'
+                                  style={{ all: 'unset', marginBottom: '-2px', paddingLeft: '2px', imageRendering: 'pixelated' }}
+                                />
                               </span>
                               <br />
                               <span className='subject-mobile' style={{ marginBottom: '-15px' }}>
@@ -1679,10 +1699,20 @@ const Board = () => {
                                 ## Board Mods
                               </span>
                               &nbsp;
-                              <span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
-                                <img src='assets/sticky.gif' alt='Sticky' title='Sticky' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
+                              <span className='thread-icons-mobile'>
+                                <img
+                                  src='assets/sticky.gif'
+                                  alt='Sticky'
+                                  title='Sticky'
+                                  style={{ all: 'unset', marginBottom: '-2px', paddingLeft: '2px', imageRendering: 'pixelated' }}
+                                />
                                 &nbsp;
-                                <img src='assets/closed.gif' alt='Closed' title='Closed' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
+                                <img
+                                  src='assets/closed.gif'
+                                  alt='Closed'
+                                  title='Closed'
+                                  style={{ all: 'unset', marginBottom: '-2px', paddingLeft: '2px', imageRendering: 'pixelated' }}
+                                />
                               </span>
                               <br />
                               <span className='subject-mobile' style={{ marginBottom: '-15px' }}>
@@ -3317,24 +3347,24 @@ const Board = () => {
                                       </VerifiedAuthor>
                                     </span>
                                     )&nbsp;
-                                  </span>
-                                  <span key={`ti-mob-${index}`} className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
-                                    {thread.pinned ? (
-                                      <img
-                                        src='assets/sticky.gif'
-                                        alt='Sticky'
-                                        title='Sticky'
-                                        style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }}
-                                      />
-                                    ) : null}
-                                    {thread.locked ? (
-                                      <img
-                                        src='assets/closed.gif'
-                                        alt='Closed'
-                                        title='Closed'
-                                        style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }}
-                                      />
-                                    ) : null}
+                                    <span key={`ti-mob-${index}`} className='thread-icons-mobile'>
+                                      {thread.pinned ? (
+                                        <img
+                                          src='assets/sticky.gif'
+                                          alt='Sticky'
+                                          title='Sticky'
+                                          style={{ all: 'unset', marginBottom: '-2px', paddingLeft: '2px', imageRendering: 'pixelated' }}
+                                        />
+                                      ) : null}
+                                      {thread.locked ? (
+                                        <img
+                                          src='assets/closed.gif'
+                                          alt='Closed'
+                                          title='Closed'
+                                          style={{ all: 'unset', marginBottom: '-2px', paddingLeft: '2px', imageRendering: 'pixelated' }}
+                                        />
+                                      ) : null}
+                                    </span>
                                   </span>
                                   <br key={`mob-br1-${index}`} />
                                   {thread.title ? (
diff --git a/src/components/views/Description.jsx b/src/components/views/Description.jsx
index 8da9376e..c1318a08 100644
--- a/src/components/views/Description.jsx
+++ b/src/components/views/Description.jsx
@@ -605,10 +605,20 @@ const Description = () => {
                         ## Board Mods
                       </span>
                       &nbsp;
-                      <span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
-                        <img src='assets/sticky.gif' alt='Sticky' title='Sticky' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
+                      <span className='thread-icons-mobile'>
+                        <img
+                          src='assets/sticky.gif'
+                          alt='Sticky'
+                          title='Sticky'
+                          style={{ all: 'unset', marginBottom: '-2px', paddingLeft: '2px', imageRendering: 'pixelated' }}
+                        />
                         &nbsp;
-                        <img src='assets/closed.gif' alt='Closed' title='Closed' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
+                        <img
+                          src='assets/closed.gif'
+                          alt='Closed'
+                          title='Closed'
+                          style={{ all: 'unset', marginBottom: '-2px', paddingLeft: '2px', imageRendering: 'pixelated' }}
+                        />
                       </span>
                       <br />
                       <span className='subject-mobile' style={{ marginBottom: '-15px' }}>
diff --git a/src/components/views/Rules.jsx b/src/components/views/Rules.jsx
index a3c6080a..4f19a7a8 100644
--- a/src/components/views/Rules.jsx
+++ b/src/components/views/Rules.jsx
@@ -539,10 +539,20 @@ const Rules = () => {
                         ## Board Mods
                       </span>
                       &nbsp;
-                      <span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
-                        <img src='assets/sticky.gif' alt='Sticky' title='Sticky' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
+                      <span className='thread-icons-mobile'>
+                        <img
+                          src='assets/sticky.gif'
+                          alt='Sticky'
+                          title='Sticky'
+                          style={{ all: 'unset', marginBottom: '-2px', paddingLeft: '2px', imageRendering: 'pixelated' }}
+                        />
                         &nbsp;
-                        <img src='assets/closed.gif' alt='Closed' title='Closed' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
+                        <img
+                          src='assets/closed.gif'
+                          alt='Closed'
+                          title='Closed'
+                          style={{ all: 'unset', marginBottom: '-2px', paddingLeft: '2px', imageRendering: 'pixelated' }}
+                        />
                       </span>
                       <br />
                       <span className='subject-mobile' style={{ marginBottom: '-15px' }}>
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index 2be47cfa..9e365e52 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -2204,12 +2204,22 @@ const Thread = () => {
                             </span>
                             )&nbsp;
                           </span>
-                          <span key={`ti-mob-${index}`} className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
+                          <span key={`ti-mob-${index}`} className='thread-icons-mobile'>
                             {comment.pinned ? (
-                              <img src='assets/sticky.gif' alt='Sticky' title='Sticky' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
+                              <img
+                                src='assets/sticky.gif'
+                                alt='Sticky'
+                                title='Sticky'
+                                style={{ all: 'unset', marginBottom: '-2px', paddingLeft: '2px', imageRendering: 'pixelated' }}
+                              />
                             ) : null}
                             {comment.locked ? (
-                              <img src='assets/closed.gif' alt='Closed' title='Closed' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
+                              <img
+                                src='assets/closed.gif'
+                                alt='Closed'
+                                title='Closed'
+                                style={{ all: 'unset', marginBottom: '-2px', paddingLeft: '2px', imageRendering: 'pixelated' }}
+                              />
                             ) : null}
                           </span>
                           <br key={`mob-br1-${comment.cid}`} />