From f8be6f805711de28ac43dda7a6c0ae84f229a390 Mon Sep 17 00:00:00 2001
From: loma-one <44441246+loma-one@users.noreply.github.com>
Date: Wed, 7 Aug 2024 12:22:39 +0200
Subject: [PATCH] CSS instructions for formatting in the notification.tpl

A space has been inserted between the user icon and the outlined text. Texts are wrapped after 70 characters.
---
 view/templates/notifications/notification.tpl | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/view/templates/notifications/notification.tpl b/view/templates/notifications/notification.tpl
index dcee492baa..5ebf3c2d10 100644
--- a/view/templates/notifications/notification.tpl
+++ b/view/templates/notifications/notification.tpl
@@ -1,4 +1,29 @@
 
+<style>
+	/* Flexbox layout to align the icon and text in a single line */
+	.notif-item a {
+		display: flex;
+		align-items: flex-start; /* Aligns items at the start of the flex container */
+	}
+
+	/* Margin to create space between the icon and the text */
+	.notif-image {
+		margin-right: 10px; /* Adjust the space between the icon and text as needed */
+
+		}
+
+	/* Styles to ensure the text wraps properly after 70 characters */
+	.notif-text {
+		display: inline-block; /* Allows the text to be constrained within a block-level element */
+		max-width: 70ch; /* Limits the maximum width of the text to 70 characters */
+		overflow-wrap: break-word; /* Ensures that words will break if necessary to fit the width */
+	}
+</style>
+
 <div class="notif-item {{if !$item_seen}}unseen{{/if}}" {{if $item_seen}}aria-hidden="true"{{/if}}>
-	<a href="{{$notification.link}}"><img src="{{$notification.image}}" aria-hidden="true" class="notif-image">{{$notification.text}} <span class="notif-when">{{$notification.ago}}</span></a>
+	<a href="{{$notification.link}}">
+		<img src="{{$notification.image}}" aria-hidden="true" class="notif-image">
+		<span class="notif-text">{{$notification.text}}</span>
+		<span class="notif-when">{{$notification.ago}}</span>
+	</a>
 </div>