Styles improvements, fixes

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/status.tsx

@@ -385,7 +385,7 @@ const Status: React.FC<IStatus> = (props) => {
               )}
 
               {actualStatus.event ? <EventPreview className='shadow-xl' status={actualStatus} /> : (
-                <>
+                <Stack space={4}>
                   <StatusContent
                     status={actualStatus}
                     onClick={handleClick}
@@ -408,7 +408,7 @@ const Status: React.FC<IStatus> = (props) => {
                       {quote}
                     </Stack>
                   )}
-                </>
+                </Stack>
               )}
             </Stack>
 

app/soapbox/components/ui/modal/modal.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import Button from '../button/button';
+import HStack from '../hstack/hstack';
 import IconButton from '../icon-button/icon-button';
 import Stack from '../stack/stack';
 
@@ -115,7 +116,7 @@ const Modal: React.FC<IModal> = ({
       </div>
 
       {confirmationAction && (
-        <div className='mt-5 flex flex-row justify-between' data-testid='modal-actions'>
+        <HStack className='mt-5' justifyContent='between' data-testid='modal-actions'>
           <div className='flex-grow'>
             {cancelAction && (
               <Button
@@ -127,7 +128,7 @@ const Modal: React.FC<IModal> = ({
             )}
           </div>
 
-          <Stack space={2}>
+          <HStack space={2}>
             {secondaryAction && (
               <Button
                 theme='secondary'
@@ -146,8 +147,8 @@ const Modal: React.FC<IModal> = ({
             >
               {confirmationText}
             </Button>
-          </Stack>
-        </div>
+          </HStack>
+        </HStack>
       )}
     </div>
   );

app/soapbox/features/event/components/event-header.tsx

@@ -326,6 +326,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
   };
 
   const handleParticipantsClick: React.MouseEventHandler = e => {
+    e.preventDefault();
     e.stopPropagation();
 
     dispatch(openModal('EVENT_PARTICIPANTS', {
@@ -404,7 +405,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
                 defaultMessage='Organized by {name}'
                 values={{
                   name: (
-                    <Link className='mention' to={`/@${account.acct}`}>
+                    <Link className='mention inline-block' to={`/@${account.acct}`}>
                       <HStack space={1} alignItems='center' grow>
                         <span dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
                         {account.verified && <VerificationBadge />}