position adjustment with flex-box

packages/app/src/components/InAppNotification/InAppNotification.tsx

@@ -64,11 +64,17 @@ export const InAppNotification = (props: Props): JSX.Element => {
   return (
     <>
       {/* TODO: notification popup adjustment by #79315 */}
-      <div>
-        {renderUserImage()}
-        {renderInAppNotificationContent()}
+      <div className="d-flex flex-row mb-3">
+        <div className="p-2 d-flex align-items-center">
+          {renderUserImage()}
+        </div>
+        <div className="p-2">
+          {renderInAppNotificationContent()}
+          <div>
+            <FormattedDistanceDate id={props.notification._id} date={props.notification.createdAt} isShowTooltip={false} />
+          </div>
+        </div>
       </div>
-      <FormattedDistanceDate id={props.notification._id} date={props.notification.createdAt} isShowTooltip={false} />
     </>
   );
 

packages/app/src/components/InAppNotification/InAppNotificationDropdown.tsx

@@ -130,7 +130,7 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
     }
     const notificationList = notifications.map((notification: IInAppNotification) => {
       return (
-        <div className="my-2" key={notification._id}>
+        <div className="d-flex flex-row" key={notification._id}>
           <InAppNotification notification={notification} onClick={notificationClickHandler} />
         </div>
       );
@@ -156,7 +156,7 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
         <InAppNotificationContents />
         <DropdownItem divider />
         {/* TODO: Able to show all notifications by #79317 */}
-        <a className="d-flex align-items-center justify-content-center">See All</a>
+        <a className="d-flex justify-content-center">See All</a>
       </DropdownMenu>
     </Dropdown>
   );