From 3ef5202f087a37c72b3ea1c31fb9e7c2614fccf9 Mon Sep 17 00:00:00 2001
From: Maximilian Mader <max@bastelstu.be>
Date: Sun, 7 Aug 2022 21:09:56 +0200
Subject: [PATCH] Fix max embed width and hide footer boxes in fullscreen mode

---
 files/style/be.bastelstu.chat.scss | 16 ++++++++++++----
 templates/room.tpl                 | 19 ++++++++-----------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/files/style/be.bastelstu.chat.scss b/files/style/be.bastelstu.chat.scss
index 0d0a4a2..b2d7cd6 100644
--- a/files/style/be.bastelstu.chat.scss
+++ b/files/style/be.bastelstu.chat.scss
@@ -1,10 +1,10 @@
 /*
- * Copyright (c) 2010-2021 Tim Düsterhus.
+ * Copyright (c) 2010-2022 Tim Düsterhus.
  *
  * Use of this software is governed by the Business Source License
  * included in the LICENSE file.
  *
- * Change Date: 2026-03-10
+ * Change Date: 2026-08-10
  *
  * On the date above, in accordance with the Business Source
  * License, use of this software will be governed by version 2
@@ -157,6 +157,11 @@ #tpl_chat_log {
 		flex-direction: column;
 		flex: 1 1 auto;
 		width: 100%;
+
+		> .contentInteraction:first-child {
+			margin-top: 0;
+			margin-bottom: 20px;
+		}
 	}
 
 	#chatMessageStream > .scrollContainer,
@@ -257,7 +262,8 @@ #tpl_chat_log {
 
 							// Limit embedded images and videos to a reasonable size
 							img:not(.smiley):not(.userAvatarImage) {
-								max-width: $chatEmbedMaxWidth;
+								// Workaround: `min` is an internal Sass function but we want the actual CSS function
+								max-width: min + unquote( '(' ) + "#{100%, $chatEmbedMaxWidth}" + unquote( ')' );
 							}
 
 							.videoContainer {
@@ -607,7 +613,9 @@ html.fullscreen {
 
 		.pageHeaderContainer,
 		.pageNavigation,
-		.pageFooter {
+		.boxesFooterBoxes,
+		.pageFooter,
+		.contentInteraction {
 			display: none;
 		}
 
diff --git a/templates/room.tpl b/templates/room.tpl
index b801d06..e9efd07 100644
--- a/templates/room.tpl
+++ b/templates/room.tpl
@@ -10,19 +10,16 @@
 	</section>
 {/capture}
 
-{capture assign='headerNavigation'}
+{capture assign='contentInteractionButtons'}
 	{if $room->canSeeLog()}
-		<li>
-			<a href="{link controller='Log' application='chat' object=$room}{/link}" title="{lang}chat.log.title{/lang}" class="jsTooltip">
-				<span class="icon icon16 fa-tasks"></span> <span class="invisible">{lang}chat.log.title{/lang}</span>
-			</a>
-		</li>
-	{/if}
-	<li>
-		<a href="{link}{/link}" title="{lang}chat.room.button.leave{/lang}" class="jsTooltip chatLeaveButton">
-			<span class="icon icon16 fa-power-off"></span> <span class="invisible">{lang}chat.room.button.leave{/lang}</span>
+		<a href="{link controller='Log' application='chat' object=$room}{/link}" title="{lang}chat.log.title{/lang}" class="contentInteractionButton button small">
+			<span class="icon icon16 fa-tasks"></span> <span>{lang}chat.log.title{/lang}</span>
 		</a>
-	</li>
+	{/if}
+
+	<a href="{link}{/link}" title="{lang}chat.room.button.leave{/lang}" class="contentInteractionButton button small chatLeaveButton">
+		<span class="icon icon16 fa-power-off"></span> <span>{lang}chat.room.button.leave{/lang}</span>
+	</a>
 {/capture}
 
 {capture assign='__pageDataAttributes'}data-room-id="{@$room->roomID}"{/capture}