pl-fe: reduce nesting

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/features/notifications/components/notification.tsx

@@ -443,22 +443,22 @@ const Notification: React.FC<INotification> = (props) => {
     )
   );
 
+  const statusInfo = <StatusInfo avatarSize={avatarSize} icon={renderIcon()} text={message} title={ariaLabel} />;
+
   return (
     <Hotkeys handlers={handlers} data-testid='notification'>
       <div
-        className='notification'
+        className='notification flex flex-col gap-2 p-4'
         tabIndex={0}
         aria-label={ariaLabel}
         ref={node}
       >
-        <div className='p-4'>
-          <div className='mb-2'>
+        {!['mention', 'status'].includes(notification.type) ? (
           <HStack alignItems='center' space={3}>
             <div className='min-w-0 flex-1'>
-                <StatusInfo avatarSize={avatarSize} icon={renderIcon()} text={message} title={ariaLabel} />
+              {statusInfo}
             </div>
 
-              {!['mention', 'status'].includes(notification.type) && (
             <div className='ml-auto flex-none'>
               <Text
                 theme='muted'
@@ -469,15 +469,11 @@ const Notification: React.FC<INotification> = (props) => {
                 <RelativeTimestamp timestamp={notification.latest_page_notification_at!} theme='muted' size='sm' className='whitespace-nowrap' />
               </Text>
             </div>
-              )}
           </HStack>
-          </div>
+        ) : statusInfo}
 
-          <div>
         {renderContent()}
       </div>
-        </div>
-      </div>
     </Hotkeys>
   );
 };