From 6a273d825aed3b4fdc7dbb9461c92ed7479ad672 Mon Sep 17 00:00:00 2001
From: Maxime Poulin <maxpoulin64@gmail.com>
Date: Fri, 22 Jul 2016 23:01:55 -0400
Subject: [PATCH] Improve inline previews for links and images

---
 client/css/style.css    | 21 +++++++++++++++++----
 client/views/toggle.tpl |  2 +-
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index fc111802..7f46637c 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1105,6 +1105,7 @@ kbd {
 	max-width: 100%;
 	padding: 6px 8px;
 	margin-top: 2px;
+	overflow: hidden;
 }
 
 #chat .toggle-content a {
@@ -1113,18 +1114,23 @@ kbd {
 
 #chat .toggle-content img {
 	max-width: 100%;
-	max-height: 250px;
+	max-height: 128px;
 	display: block;
 	margin: 2px 0;
 }
 
 #chat .toggle-content .thumb {
-	max-height: 110px;
-	max-width: 210px;
+	float: left;
+	margin-right: 10px;
+	max-width: 48px;
+	max-height: 36px;
 }
 
 #chat .toggle-content .head {
 	font-weight: bold;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
 }
 
 #chat .toggle-content .body {
@@ -1132,10 +1138,17 @@ kbd {
 	max-width: 460px;
 	word-break: normal;
 	word-wrap: break-word;
+	overflow: hidden;
+	max-height: 30px;
+	text-overflow: ellipsis;
 }
 
 #chat .toggle-content.show {
-	display: inline-block !important;
+	display: block;
+}
+
+#chat .toggle-content.toggle-type-image.show {
+	display: inline;
 }
 
 #chat .count {
diff --git a/client/views/toggle.tpl b/client/views/toggle.tpl
index 1c51c5f5..2c8f84eb 100644
--- a/client/views/toggle.tpl
+++ b/client/views/toggle.tpl
@@ -1,5 +1,5 @@
 {{#toggle}}
-<div class="toggle-content">
+<div class="toggle-content toggle-type-{{type}}">
 	{{#equal type "image"}}
 		<a href="{{link}}" target="_blank">
 			<img src="{{link}}">