refactor: update notification footer styles (#1177)

* refactor: update notification footer styles

* refactor: update notification footer styles

Author: setchy

src/components/NotificationRow.tsx

@@ -115,48 +115,47 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
       </div>
 
       <div
-        className="flex-1 overflow-hidden"
+        className="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
         onClick={() => openNotification()}
         onKeyDown={() => openNotification()}
       >
         <div
-          className="mb-1 text-sm whitespace-nowrap overflow-ellipsis overflow-hidden cursor-pointer"
+          className="mb-1 text-sm whitespace-nowrap cursor-pointer"
           role="main"
           title={notification.subject.title}
         >
           {notification.subject.title}
         </div>
 
-        <div className="text-xs text-capitalize whitespace-nowrap overflow-ellipsis overflow-hidden">
-          <span className="flex items-center">
-            <span title={updatedLabel} className="flex">
-              {notification.subject.user ? (
-                <span
-                  title="View User Profile"
-                  onClick={openUserProfile}
-                  onKeyDown={openUserProfile}
-                >
-                  <img
-                    className="rounded-full w-4 h-4 cursor-pointer"
-                    src={notification.subject.user.avatar_url}
-                    title={notification.subject.user.login}
-                    alt={`${notification.subject.user.login}'s avatar`}
-                  />
-                </span>
-              ) : (
-                <span>
-                  <FeedPersonIcon
-                    size={16}
-                    className="text-gray-500 dark:text-gray-300"
-                  />
-                </span>
-              )}
-              <span className="ml-1" title={reason.description}>
-                {reason.title}
+        <div className="text-xs text-capitalize">
+          <span title={updatedLabel} className="flex items-center gap-1">
+            {notification.subject.user ? (
+              <span
+                title="View User Profile"
+                onClick={openUserProfile}
+                onKeyDown={openUserProfile}
+                className="flex-shrink-0"
+              >
+                <img
+                  className="rounded-full w-4 h-4 object-cover cursor-pointer"
+                  src={notification.subject.user.avatar_url}
+                  title={notification.subject.user.login}
+                  alt={`${notification.subject.user.login}'s avatar`}
+                />
+              </span>
+            ) : (
+              <span>
+                <FeedPersonIcon
+                  size={16}
+                  className="text-gray-500 dark:text-gray-300"
+                />
               </span>
-              <span className="ml-1">{updatedAt}</span>
+            )}
+            <span title={reason.description}>{reason.title}</span>
+            <span>{updatedAt}</span>
+            <span className="hover:overflow-auto">
               {notification.subject?.linkedIssues?.length > 0 && (
-                <span className="ml-1" title={linkedIssuesPillDescription}>
+                <span title={linkedIssuesPillDescription}>
                   <button type="button" className={Constants.PILL_CLASS_NAME}>
                     <IssueClosedIcon
                       size={12}
@@ -175,11 +174,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
                     }
 
                     return (
-                      <span
-                        key={review.state}
-                        title={icon.description}
-                        className="ml-1"
-                      >
+                      <span key={review.state} title={icon.description}>
                         <button
                           type="button"
                           className={Constants.PILL_CLASS_NAME}
@@ -196,7 +191,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
                   })
                 : null}
               {notification.subject?.comments > 0 && (
-                <span className="ml-1" title={commentsPillDescription}>
+                <span title={commentsPillDescription}>
                   <button type="button" className={Constants.PILL_CLASS_NAME}>
                     <CommentIcon
                       size={12}
@@ -208,7 +203,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
                 </span>
               )}
               {notification.subject?.labels?.length > 0 && (
-                <span className="ml-1" title={labelsPillDescription}>
+                <span title={labelsPillDescription}>
                   <button type="button" className={Constants.PILL_CLASS_NAME}>
                     <TagIcon
                       size={12}