fix visual issues with notifications dropdown

Author: AnthonyMarin

src/components/header/components/notificationsDropdown/NotificationsDropdown.tsx

@@ -135,7 +135,7 @@ export const NotificationsDropdown: React.FC = () => {
     <BasePopover
       trigger="click"
       content={
-        <div style={{ maxWidth: '400px', minWidth: '320px', maxHeight: '450px' }}>
+        <div style={{ maxWidth: '400px', minWidth: '320px' }}>
           <Tabs 
             defaultActiveKey="1" 
             items={tabItems}

src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.styles.ts

@@ -3,6 +3,8 @@ import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
 import { media } from '@app/styles/themes/constants';
 import { BaseDivider } from '@app/components/common/BaseDivider/BaseDivider';
 import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
+import { BaseNotification } from '@app/components/common/BaseNotification/BaseNotification';
+import { BaseSpace } from '@app/components/common/BaseSpace/BaseSpace';
 
 export const NoticesOverlayMenu = styled.div`
   max-width: 15rem;
@@ -54,3 +56,26 @@ export const Text = styled(BaseTypography.Text)`
   display: block;
   text-align: center;
 `;
+export const TransactionWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-top: .5rem;
+  margin-bottom: .5rem;
+  gap: 3rem;
+`;
+export const RootNotification = styled(BaseNotification)`
+width: 100%;
+
+`;
+export const NotificationsWrapper = styled(BaseSpace)`
+   .ant-space.ant-space-horizontal {
+    width: 100%;
+  }
+`;
+export const ActionRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;

src/components/header/components/notificationsDropdown/PaymentNotificationsOverlay/PaymentNotificationsOverlay.tsx

@@ -34,8 +34,8 @@ export const PaymentNotificationsOverlay: React.FC<PaymentNotificationsOverlayPr
   const formatAmount = (satoshis: number) => {
     const btc = satoshis / 100000000;
     return (
-      <div>
-        <div style={{ fontWeight: 'bold' }}>{satoshis.toLocaleString()} sats</div>
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
+        <div style={{ fontWeight: 'bold', fontSize: "1rem"}}>{satoshis.toLocaleString()} sats</div>
         <div style={{ fontSize: '0.85rem', color: 'var(--text-light-color)' }}>
           ({btc.toFixed(8)} BTC)
         </div>
@@ -48,7 +48,7 @@ export const PaymentNotificationsOverlay: React.FC<PaymentNotificationsOverlayPr
   }, [markAllAsRead]);
 
   const noticesList = notifications.map((notification) => (
-    <BaseNotification
+    <S.RootNotification
       key={notification.id}
       type="info"
       title={
@@ -89,35 +89,36 @@ export const PaymentNotificationsOverlay: React.FC<PaymentNotificationsOverlayPr
       }
       description={
         <div>
+          <S.TransactionWrapper>
           <div style={{ fontSize: '0.85rem', color: 'var(--text-light-color)', marginBottom: '4px' }}>
             {formatDate(notification.created_at)}
           </div>
 
           <div style={{ marginBottom: '8px' }}>
-            <strong>{t('payment.notifications.amount', 'Amount')}: </strong>
             {formatAmount(notification.amount)}
           </div>
+          </S.TransactionWrapper>
 
-          <div style={{ fontSize: '0.85rem', color: 'var(--text-light-color)', marginTop: '4px' }}>
+          {/* <div style={{ fontSize: '0.85rem', color: 'var(--text-light-color)', marginTop: '4px' }}>
             {t('payment.notifications.expiration', 'Expires')}: {formatDate(notification.expiration_date)}
-          </div>
-          
+          </div> */}
+          <S.ActionRow>
+            <Link to="/payment-notifications" style={{ fontSize: '0.85rem' }}>
+              {t('payment.notifications.viewDetails', 'View details')}
+            </Link>
           {!notification.is_read && (
             <BaseButton 
               type="link" 
               size="small" 
               onClick={() => markAsRead(notification.id)}
-              style={{ padding: '4px 0', height: 'auto', marginTop: '4px' }}
+              style={{ padding: '4px 0', height: 'auto', marginTop: '4px', fontSize: '0.85rem' }}
             >
               {t('payment.notifications.markAsRead', 'Mark as read')}
             </BaseButton>
           )}
 
-          <div style={{ marginTop: '4px' }}>
-            <Link to="/payment-notifications" style={{ fontSize: '0.85rem' }}>
-              {t('payment.notifications.viewDetails', 'View details')}
-            </Link>
-          </div>
+          
+          </S.ActionRow>
         </div>
       }
     />
@@ -129,9 +130,9 @@ export const PaymentNotificationsOverlay: React.FC<PaymentNotificationsOverlayPr
         <BaseCol span={24}>
           {notifications.length > 0 ? (
             <S.NotificationsList>
-              <BaseSpace direction="vertical" size={10} split={<S.SplitDivider />}>
+              <S.NotificationsWrapper direction="vertical" size={10} split={<S.SplitDivider />} style={{ width: '95%' }}>
                 {noticesList}
-              </BaseSpace>
+              </S.NotificationsWrapper>
             </S.NotificationsList>
           ) : (
             <div style={{ textAlign: 'center', padding: '20px 0' }}>