From 6e4d5b473618e5135e5910d316c2140715f0aad4 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Mon, 15 Jan 2024 21:05:54 +0100
Subject: [PATCH] Fix some icon-related styling issues

---
 .../account/components/action_bar.jsx         | 22 +++++++++++--------
 .../glitch/styles/components/accounts.scss    |  1 +
 .../glitch/styles/components/status.scss      |  3 +++
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/account/components/action_bar.jsx b/app/javascript/flavours/glitch/features/account/components/action_bar.jsx
index c50e99bab..362b67117 100644
--- a/app/javascript/flavours/glitch/features/account/components/action_bar.jsx
+++ b/app/javascript/flavours/glitch/features/account/components/action_bar.jsx
@@ -30,7 +30,8 @@ class ActionBar extends PureComponent {
       return (
         <div>
           <div className='account__disclaimer'>
-            <Icon id='info-circle' icon={InfoIcon} /> <FormattedMessage
+            <Icon id='info-circle' icon={InfoIcon} />
+            <FormattedMessage
               id='account.suspended_disclaimer_full'
               defaultMessage='This user has been suspended by a moderator.'
             />
@@ -44,14 +45,17 @@ class ActionBar extends PureComponent {
     if (account.get('acct') !== account.get('username')) {
       extraInfo = (
         <div className='account__disclaimer'>
-          <Icon id='info-circle' icon={InfoIcon} /> <FormattedMessage
-            id='account.disclaimer_full'
-            defaultMessage="Information below may reflect the user's profile incompletely."
-          />
-          {' '}
-          <a target='_blank' rel='noopener' href={account.get('url')}>
-            <FormattedMessage id='account.view_full_profile' defaultMessage='View full profile' />
-          </a>
+          <Icon id='info-circle' icon={InfoIcon} />
+          <div>
+            <FormattedMessage
+              id='account.disclaimer_full'
+              defaultMessage="Information below may reflect the user's profile incompletely."
+            />
+            {' '}
+            <a target='_blank' rel='noopener' href={account.get('url')}>
+              <FormattedMessage id='account.view_full_profile' defaultMessage='View full profile' />
+            </a>
+          </div>
         </div>
       );
     }
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index ccaa394bf..f121cf39d 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -161,6 +161,7 @@
   padding: 10px;
   gap: 5px;
   color: $dark-text-color;
+  align-items: center;
 
   strong {
     font-weight: 500;
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index 895d54c32..dc1337429 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -148,6 +148,7 @@
   line-height: inherit;
   cursor: pointer;
   vertical-align: top;
+  align-items: center;
 
   &:hover {
     background: lighten($ui-base-color, 33%);
@@ -160,6 +161,8 @@
     border-inline-start: 1px solid currentColor;
     padding: 0;
     padding-inline-start: 4px;
+    width: 16px;
+    height: 16px;
   }
 }