From 0b8c41ca7c99f6ab31a3769b16c760fd028f7c2b Mon Sep 17 00:00:00 2001
From: r <r@freesoftwareextremist.com>
Date: Sun, 27 Sep 2020 06:54:50 +0000
Subject: [PATCH] Fix CSS issues

This re-adds some of the CSS3 properties
---
 static/style.css            | 24 ++++++++++++++++++++----
 templates/notification.tmpl |  2 +-
 templates/userlist.tmpl     |  4 ++--
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/static/style.css b/static/style.css
index 501bf45..116cbc1 100644
--- a/static/style.css
+++ b/static/style.css
@@ -16,6 +16,7 @@
 	margin: 4px 0;
 	max-height: 600px;
 	overflow: auto;
+	word-wrap: anywhere;
 }
 
 .status-content p {
@@ -31,6 +32,7 @@
 	max-width: 280px;
 	width: auto;
 	vertical-align: bottom;
+	object-fit: contain;
 }
 
 .status-media-container {
@@ -46,6 +48,7 @@
 	height: 48px;
 	width: 48px;
 	vertical-align: top;
+	object-fit: contain;
 }
 
 .status {
@@ -154,6 +157,10 @@
 	vertical-align: middle;
 }
 
+.notification-follow-container {
+	overflow: auto;
+}
+
 .notification-follow {
 	overflow: auto;
 }
@@ -222,6 +229,7 @@
 	height: 96px;
 	width: 96px;
 	vertical-align: top;
+	object-fit: contain;
 }
 
 .user-profile-decription {
@@ -333,6 +341,7 @@ img.emoji {
 	height: 64px;
 	width: 64px;
 	vertical-align: middle;
+	object-fit: contain;
 }
 
 .user-info-img-container {
@@ -356,10 +365,17 @@ img.emoji {
 	margin: 8px 0;
 }
 
-.user-list-item>div {
-	display: inline-block;
-	vertical-align: top;
-	margin: 0 4px 8px 0;
+.user-list-item {
+	overflow: auto;
+}
+
+.user-list-profile-img {
+	float: left;
+	margin: 0 8px 8px 0;
+}
+
+.user-list-name {
+	overflow: auto;
 }
 
 #settings-form {
diff --git a/templates/notification.tmpl b/templates/notification.tmpl
index b138a40..6973fa5 100644
--- a/templates/notification.tmpl
+++ b/templates/notification.tmpl
@@ -19,7 +19,7 @@
 {{range .Notifications}}
 <div class="notification-container {{if .Pleroma}}{{if not .Pleroma.IsSeen}}unread{{end}}{{end}}">
 	{{if eq .Type "follow"}}
-	<div>
+	<div class="notification-follow-container">
 		<div class="status-profile-img-container">
 			<a class="img-link" href="/user/{{.Account.ID}}">
 				<img class="status-profile-img" src="{{.Account.AvatarStatic}}" title="@{{.Account.Acct}}" alt="profile-avatar" height="48" />
diff --git a/templates/userlist.tmpl b/templates/userlist.tmpl
index 52ef83e..ec8884d 100644
--- a/templates/userlist.tmpl
+++ b/templates/userlist.tmpl
@@ -2,12 +2,12 @@
 <div class="user-list-container">
 	{{range .}}
 	<div class="user-list-item">
-		<div>
+		<div class="user-list-profile-img">
 			<a class="img-link" href="/user/{{.ID}}">
 				<img class="status-profile-img" src="{{.AvatarStatic}}" title="@{{.Acct}}" alt="avatar" height="48" />
 			</a>
 		</div>
-		<div>
+		<div class="user-list-name">
 			<div class="status-dname"> {{EmojiFilter .DisplayName .Emojis}} </div>  
 			<a class="img-link" href="/user/{{.ID}}">
 				<div class="status-uname"> @{{.Acct}} </div>