Fix CSS issues

4 files changed, 55 insertions, 40 deletions

diff --git a/static/style.css b/static/style.css
index 9c05eff..9d4c94c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,10 +1,11 @@
 .status-container-container {
-	margin: 12px 0 12px -4px;
+	margin: 0 -4px 12px -4px;
 	padding: 4px;
 	border-left: 4px solid transparent;
 }
 
-.status-container-container:target {
+.status-container-container:target,
+.status-container-container.unread {
 	border-color: #777777;
 }
 
@@ -20,7 +21,11 @@
 	margin: 4px 0;
 	max-height: 600px;
 	overflow: auto;
-	word-wrap: anywhere;
+	overflow-wrap: break-word;
+}
+
+.status-name {
+	overflow-wrap: break-word;
 }
 
 .status-content p {
@@ -40,7 +45,8 @@
 }
 
 .status-media-container {
-	margin: 4px 0;
+	margin: 5px 0 -5px 0;
+	overflow: auto;
 }
 
 .status-profile-img-container {
@@ -64,6 +70,8 @@
 .status {
 	display: inline-block;
 	vertical-align: top;
+	flex: 1;
+	min-width: 0;
 }
 
 .status-dname {
@@ -106,6 +114,7 @@
 
 .page-title {
 	font-size: 18pt;
+	margin: 8px 0;
 }
 
 .post-form {
@@ -126,6 +135,7 @@
 
 .retweet-info {
 	margin: 0 0 4px 24px;
+	overflow-wrap: break-word;
 }
 
 .retweet-info .status-profile-img {
@@ -159,16 +169,6 @@
 	font-size: 13pt;
 }
 
-.notification-container {
-	margin: 16px 0 16px -4px;
-	padding: 0 4px;
-	border-left: 4px solid transparent;
-}
-
-.notification-container.unread {
-	border-color: #777777;
-}
-
 .notification-info-text span {
 	vertical-align: middle;
 }
@@ -195,6 +195,10 @@
 	font-size: 10pt
 }
 
+.status-reply-container {
+	word-break: break-all;
+}
+
 .status-reply-container .fa {
 	font-size: 10pt;
 	vertical-align: sub;
@@ -252,7 +256,11 @@
 }
 
 .user-profile-decription {
-	margin: 4px 0;
+	margin: 8px 0;
+}
+
+.user-profile-decription p {
+	margin: 0;
 }
 
 .d-inline {
@@ -301,12 +309,13 @@ a:hover,
 }
 
 .status-nsfw-overlay {
-	height: 100%;
-	width: 100%;
 	background: black;
 	position: absolute;
 	top: 0;
+	bottom: 0;
 	left: 0;
+	right: 0;
+	margin-bottom: 5px;
 }
 
 .img-link:hover .status-nsfw-overlay {
@@ -347,6 +356,7 @@ img.emoji {
 	min-width: 32px;
 	vertical-align: middle;
 	object-fit: contain;
+	margin: 0;
 }
 
 .status-dname img.emoji {
@@ -390,7 +400,6 @@ img.emoji {
 }
 
 .user-list-container {
-	margin: 8px 0;
 }
 
 .user-list-item {
@@ -444,7 +453,7 @@ img.emoji {
 }
 
 .search-form {
-	margin: 16px 0 16px 0;
+	margin: 12px 0;
 }
 
 .more-container {
@@ -459,7 +468,6 @@ img.emoji {
 	background-color: #ffffff;
 	padding: 2px 4px;
 	border: 1px solid #aaaaaa;
-	right: 0;
 }
 
 .more-container:hover .more-content {
@@ -472,6 +480,12 @@ img.emoji {
 	margin: 2px;
 }
 
+.poll-form {
+	margin-top: 5px;
+	overflow: auto;
+	overflow-wrap: break-word;
+}
+
 .poll-form button[type=submit] {
 	margin-top: 6px;
 }
@@ -480,19 +494,22 @@ img.emoji {
 	margin-top: 6px;
 }
 
-.notification-title-container>* {
-	display: inline;
+.notification-title-container {
+	margin: 8px 0;
 }
 
-.notification-title {
-	font-size: 18pt;
-	margin-right: 8px;
+.notification-text {
+	vertical-align: middle;
 }
 
 .notification-refresh {
 	margin-right: 8px;
 }
 
+.notification-read {
+	display: inline-block;
+}
+
 .no-data-found {
 	margin: 12px 0;
 }
diff --git a/templates/notification.tmpl b/templates/notification.tmpl
index 059268a..10eaafc 100644
--- a/templates/notification.tmpl
+++ b/templates/notification.tmpl
@@ -1,15 +1,15 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
 <div class="notification-title-container">
-	<div class="notification-title">
+	<span class="page-title">
 		Notifications
 		{{if and (not $.Ctx.AntiDopamineMode) (gt .UnreadCount 0)}}
 			({{.UnreadCount }})
 		{{end}}
-	</div>
+	</span>
 	<a class="notification-refresh" href="/notifications" target="_self" accesskey="R" title="Refresh (R)">refresh</a>
 	{{if .ReadID}}
-	<form action="/notifications/read?max_id={{.ReadID}}" method="post" target="_self">
+	<form class="notification-read" action="/notifications/read?max_id={{.ReadID}}" method="post" target="_self">
 		<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
 		<input type="submit" value="read" class="btn-link" accesskey="C" title="Clear unread notifications (C)">
 	</form>
@@ -17,7 +17,7 @@
 </div>
 
 {{range .Notifications}}
-<div class="notification-container {{if .Pleroma}}{{if not .Pleroma.IsSeen}}unread{{end}}{{end}}">
+<div class="status-container-container {{if .Pleroma}}{{if not .Pleroma.IsSeen}}unread{{end}}{{end}}">
 	{{if eq .Type "follow"}}
 	<div class="notification-follow-container">
 		<div class="status-profile-img-container">
@@ -28,9 +28,8 @@
 		<div class="notification-follow">
 			<div class="notification-info-text">
 				<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>  
-				<span> followed you </span>
-				<span>
-					- <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
+				<span class="notification-text"> followed you - 
+					<time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
 				</span>
 			</div>
 			<div>
@@ -50,9 +49,8 @@
 		<a href="/user/{{.Account.ID}}">
 			<span class="status-uname"> @{{.Account.Acct}} </span>
 		</a>
-		<span> retweeted your post </span>
-		<span>
-			- <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
+		<span class="notification-text"> retweeted your post - 
+			<time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
 		</span>
 	</div>
 	{{template "status" (WithContext .Status $.Ctx)}}
@@ -65,9 +63,8 @@
 		<a href="/user/{{.Account.ID}}">
 			<span class="status-uname"> @{{.Account.Acct}} </span>
 		</a>
-		<span> liked your post </span>
-		<span>
-			- <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
+		<span class="notification-text"> liked your post - 
+			<time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
 		</span>
 	</div>
 	{{template "status" (WithContext .Status $.Ctx)}}
diff --git a/templates/status.tmpl b/templates/status.tmpl
index 438f023..432c9a6 100644
--- a/templates/status.tmpl
+++ b/templates/status.tmpl
@@ -89,6 +89,7 @@
 			{{if .Content}}
 			<div class="status-content"> {{StatusContentFilter .SpoilerText .Content .Emojis .Mentions}} </div>
 			{{end}}
+			{{if .MediaAttachments}}
 			<div class="status-media-container">
 				{{range .MediaAttachments}}
 
@@ -132,9 +133,9 @@
 				{{else}}
 				<a href="{{.URL}}" target="_blank" title="{{.Description}}"> [attachment] </a>
 				{{end}}
-
 				{{end}}
 			</div>
+			{{end}}
 			{{if .Poll}}
 			<form class="poll-form" action="/vote/{{.Poll.ID}}" method="POST" target="_self">
 				<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
diff --git a/templates/userlist.tmpl b/templates/userlist.tmpl
index ec8884d..0a83bf4 100644
--- a/templates/userlist.tmpl
+++ b/templates/userlist.tmpl
@@ -1,5 +1,5 @@
 {{with .Data}}
-<div class="user-list-container">
+<div>
 	{{range .}}
 	<div class="user-list-item">
 		<div class="user-list-profile-img">