Fix some icon-related styling issues

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,7 +45,9 @@ class ActionBar extends PureComponent {
     if (account.get('acct') !== account.get('username')) {
       extraInfo = (
         <div className='account__disclaimer'>
-          <Icon id='info-circle' icon={InfoIcon} /> <FormattedMessage
+          <Icon id='info-circle' icon={InfoIcon} />
+          <div>
+            <FormattedMessage
               id='account.disclaimer_full'
               defaultMessage="Information below may reflect the user's profile incompletely."
             />
@@ -53,6 +56,7 @@ class ActionBar extends PureComponent {
               <FormattedMessage id='account.view_full_profile' defaultMessage='View full profile' />
             </a>
           </div>
+        </div>
       );
     }
 

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;

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;
   }
 }