diff --git a/ui/component/notification/view.jsx b/ui/component/notification/view.jsx
index 5722d9720..373e3f118 100644
--- a/ui/component/notification/view.jsx
+++ b/ui/component/notification/view.jsx
@@ -122,30 +122,36 @@ export default function Notification(props: Props) {
         })}
       >
         <div className="notification__icon">{icon}</div>
-        <div className="notification__content">
-          <div>
-            {!isCommentNotification && (
-              <div className="notification__title">{notification_parameters.device.title}</div>
-            )}
 
-            {isCommentNotification && commentText ? (
-              <>
+        <div className="notification__content-wrapper">
+          <div className="notification__content">
+            <div className="notification__text-wrapper">
+              {!isCommentNotification && (
                 <div className="notification__title">{notification_parameters.device.title}</div>
-                <div className="notification__text mobile-hidden">{commentText}</div>
-              </>
-            ) : (
+              )}
+
+              {isCommentNotification && commentText ? (
+                <>
+                  <div className="notification__title">{notification_parameters.device.title}</div>
+                  <div className="notification__text mobile-hidden">{commentText}</div>
+                </>
+              ) : (
+                <>
+                  <div className="notification__text">{notification_parameters.device.text}</div>
+                </>
+              )}
+            </div>
+
+            {notification_rule === NOTIFICATIONS.NEW_CONTENT && (
               <>
-                <div className="notification__text">{notification_parameters.device.text}</div>
+                <FileThumbnail
+                  uri={notification_parameters.device.target}
+                  className="notification__content-thumbnail"
+                />
               </>
             )}
           </div>
 
-          {notification_rule === NOTIFICATIONS.NEW_CONTENT && (
-            <>
-              <FileThumbnail uri={notification_parameters.device.target} className="notification__content-thumbnail" />
-            </>
-          )}
-
           <div className="notification__extra">
             <div className="notification__time">
               <DateTime timeAgo date={notification.active_at} />
diff --git a/ui/scss/component/_notification.scss b/ui/scss/component/_notification.scss
index 74ffd0655..b79f3a019 100644
--- a/ui/scss/component/_notification.scss
+++ b/ui/scss/component/_notification.scss
@@ -1,3 +1,6 @@
+$thumbnailWidth: 4rem;
+$contentMaxWidth: 35rem;
+
 .notifications__empty {
   background-color: var(--color-card-background);
   padding: var(--spacing-l);
@@ -62,9 +65,10 @@
   }
 }
 
-.notification__content {
+.notification__content-wrapper {
   flex: 1;
   display: flex;
+  justify-content: space-between;
   flex-direction: column;
 
   @media (min-width: $breakpoint-small) {
@@ -74,6 +78,42 @@
   }
 }
 
+.notification__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  max-width: $contentMaxWidth;
+
+  @media (min-width: $breakpoint-small) {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+.notification__content-thumbnail {
+  @include thumbnail;
+  position: relative;
+  margin-left: auto;
+  height: auto;
+  width: 100%;
+  margin-top: var(--spacing-s);
+
+  @media (min-width: $breakpoint-small) {
+    height: thumbnailWidth;
+    width: calc(#{$thumbnailWidth} * 16 / 9);
+    max-width: calc(#{$thumbnailWidth} * 16 / 9);
+    margin-left: var(--spacing-m);
+    margin-top: 0;
+    min-width: 0;
+  }
+}
+
+.notification__text-wrapper {
+  max-width: calc(#{$contentMaxWidth} - (#{$thumbnailWidth} * 16 / 9) - var(--spacing-m)); //25rem;
+}
+
 .notification__title {
   font-size: var(--font-small);
   color: var(--color-text);
@@ -96,9 +136,9 @@
   overflow: hidden;
 }
 
-.notification__title,
-.notification__text {
-  max-width: 30rem;
+.notification__text,
+.notification__title {
+  flex-shrink: 1;
 }
 
 .notification__time {
@@ -153,19 +193,3 @@
     margin-top: 0;
   }
 }
-
-.notification__content-thumbnail {
-  @include thumbnail;
-  position: relative;
-  margin-right: auto;
-  height: auto;
-  width: 100%;
-  margin-top: var(--spacing-s);
-
-  @media (min-width: $breakpoint-small) {
-    height: 4rem;
-    width: calc(4rem * 16 / 9);
-    margin-left: var(--spacing-s);
-    margin-top: 0;
-  }
-}