Fix CSS issues

- fix text wrapping on reply popup
- fix margin for media links

3 files changed, 21 insertions, 28 deletions

diff --git a/static/fluoride.js b/static/fluoride.js
index e055b6d..c1eb06f 100644
--- a/static/fluoride.js
+++ b/static/fluoride.js
@@ -132,13 +132,13 @@ function isInView(el) {
 	return false;
 }
 
-function handleReplyToLink(div) {
-	if (!div)
+function handleReplyToLink(a) {
+	if (!a)
 		return;
-	var id = div.firstElementChild.getAttribute("href");
+	var id = a.getAttribute("href");
 	if (!id || id[0] != "#")
 		return;
-	div.firstElementChild.onmouseenter = function(event) {
+	a.onmouseenter = function(event) {
 		var id = event.target.getAttribute("href");
 		var status = document.querySelector(id);
 		if (!status)
@@ -156,7 +156,7 @@ function handleReplyToLink(div) {
 			event.target.parentElement.appendChild(copy);
 		}
 	}
-	div.firstElementChild.onmouseleave = function(event) {
+	a.onmouseleave = function(event) {
 		var popup = document.getElementById("reply-to-popup");
 		if (popup) {
 			event.target.parentElement.removeChild(popup);    
@@ -168,8 +168,8 @@ function handleReplyToLink(div) {
 	}
 }
 
-function handleReplyLink(div) {
-	div.firstElementChild.onmouseenter = function(event) {
+function handleReplyLink(a) {
+	a.onmouseenter = function(event) {
 		var id = event.target.getAttribute("href");
 		var status = document.querySelector(id);
 		if (!status)
@@ -187,7 +187,7 @@ function handleReplyLink(div) {
 			event.target.parentElement.appendChild(copy);
 		}
 	}
-	div.firstElementChild.onmouseleave = function(event) {
+	a.onmouseleave = function(event) {
 		var popup = document.getElementById("reply-popup");
 		if (popup) {
 			event.target.parentElement.removeChild(popup);
@@ -219,10 +219,10 @@ document.addEventListener("DOMContentLoaded", function() {
 		var retweetForm = s.querySelector(".status-retweet");
 		handleRetweetForm(id, retweetForm);
 
-		var replyToLink = s.querySelector(".status-reply-to");
+		var replyToLink = s.querySelector(".status-reply-to-link");
 		handleReplyToLink(replyToLink);
 
-		var replyLinks = s.querySelectorAll(".status-reply");
+		var replyLinks = s.querySelectorAll(".status-reply-link");
 		for (var j = 0; j < replyLinks.length; j++) {
 			handleReplyLink(replyLinks[j]);
 		}
diff --git a/static/style.css b/static/style.css
index 9d4c94c..095b46e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -41,7 +41,6 @@
 	max-width: 280px;
 	vertical-align: bottom;
 	object-fit: contain;
-	margin-bottom: 5px;
 }
 
 .status-media-container {
@@ -49,6 +48,11 @@
 	overflow: auto;
 }
 
+.status-media-container>a {
+	margin-bottom: 5px;
+	display: inline-block;
+}
+
 .status-profile-img-container {
 	margin-right: 8px;
 	display: inline-block;
@@ -187,16 +191,12 @@
 	margin-left: 8px;
 }
 
-.status-reply-to {
-	display: inline-block;
-}
-
 .status-reply-to-link {
 	font-size: 10pt
 }
 
 .status-reply-container {
-	word-break: break-all;
+	overflow-wrap: break-word;
 }
 
 .status-reply-container .fa {
@@ -209,10 +209,6 @@
 	font-size: 10pt;
 }
 
-.status-reply {
-	display: inline-block;
-}
-
 .status-reply-link {
 	font-size: 10pt;
 }
@@ -256,6 +252,7 @@
 }
 
 .user-profile-decription {
+	overflow-wrap: break-word;
 	margin: 8px 0;
 }
 
diff --git a/templates/status.tmpl b/templates/status.tmpl
index 432c9a6..4cdb459 100644
--- a/templates/status.tmpl
+++ b/templates/status.tmpl
@@ -70,19 +70,15 @@
 			</div>
 			<div class="status-reply-container">
 				{{if .InReplyToID}}
-				<div class="status-reply-to">
-					<a class="status-reply-to-link" href="{{if not .ShowReplies}}/thread/{{.InReplyToID}}{{end}}#status-{{.InReplyToID}}"> 
-						 in reply to {{if .IDNumbers}}#{{index .IDNumbers .InReplyToID}}{{end}} {{if .Pleroma.InReplyToAccountAcct}}@{{.Pleroma.InReplyToAccountAcct}}{{else if not .IDNumbers}}{{.InReplyToID}}{{end}}
-					</a>
-				</div>
+				<a class="status-reply-to-link" href="{{if not .ShowReplies}}/thread/{{.InReplyToID}}{{end}}#status-{{.InReplyToID}}"> 
+					 in reply to {{if .IDNumbers}}#{{index .IDNumbers .InReplyToID}}{{end}} {{if .Pleroma.InReplyToAccountAcct}}@{{.Pleroma.InReplyToAccountAcct}}{{else if not .IDNumbers}}{{.InReplyToID}}{{end}}
+				</a>
 				{{if index .IDReplies .ID}} <span class="status-reply-info-divider"> - </span> {{end}}
 				{{end}}
 				{{if .ShowReplies}}
 				{{if index .IDReplies .ID}} <span class="status-reply-text"> replies: </span> {{end}}
 				{{range index .IDReplies .ID}}
-				<div class="status-reply">
-					<a class="status-reply-link" href="#status-{{.ID}}">#{{.Number}}</a>
-				</div>
+				<a class="status-reply-link" href="#status-{{.ID}}">#{{.Number}}</a>
 				{{end}}
 				{{end}}
 			</div>