fix(notifications): cleanup notifications code [EE-4274] (#7789)

* fix(notifications): cleanup notifications code [EE-4274]

* break long words

app/react/components/PageHeader/NotificationsMenu.module.css

@@ -1,3 +1,7 @@
+.root {
+  width: 500px;
+}
+
 .badge {
   position: absolute;
   top: 8px;
@@ -23,6 +27,16 @@
   margin-left: auto;
 }
 
+.notifications {
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.notification {
+  border-bottom: 1px solid var(--ui-gray-3);
+  border-radius: 0;
+}
+
 .container {
   display: flex;
 }
@@ -31,12 +45,23 @@
   width: 5rem;
 }
 .notificationBody {
-  flex-basis: 30rem;
+  flex-basis: 80rem;
 }
 .deleteButton {
   flex-basis: 5rem;
 }
 
+.notification-details {
+  word-break: break-all;
+  white-space: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  line-clamp: 5;
+  -webkit-box-orient: vertical;
+}
+
 .container > div {
   padding: 0px 10px;
   margin: auto;