Misc. fixes to clean up after tw-. Fix tooltip placement.

changelog.html

@@ -1,3 +1,12 @@
+<div class="list-header">4.0.0-beta1.4<span>@317c31074720f7071bd3</span> <time datetime="2017-12-13">(2017-12-13)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Tooltip positioning.</li>
+	<li>Fixed: Stream titles disappearing in the directory.</li>
+	<li>Fixed: Borders with Swap Sidebars enabled.</li>
+	<li>Fixed: Channel logos and game boxart not hiding on hover when the appropriate option is enabled.</li>
+	<li>Fixed: Custom chat font sizes not changing the line height.</li>
+</ul>
+
 <div class="list-header">4.0.0-beta1.4<span>@7ca245f1bf1509160a2c</span> <time datetime="2017-12-13">(2017-12-13)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Everything.</li>

src/modules/metadata.js

@@ -349,7 +349,7 @@ export default class Metadata extends Module {
 								el._ffz_destroy = el._ffz_outside = null;
 							};
 
-							const tt = el._ffz_popup = new Tooltip(document.body, el, {
+							const tt = el._ffz_popup = new Tooltip(document.body.querySelector('.twilight-root') || document.body, el, {
 								manual: true,
 								html: true,
 

src/sites/twitch-twilight/modules/css_tweaks/index.js

@@ -23,9 +23,9 @@ const CLASSES = {
 	'pinned-cheer': '.pinned-cheer',
 	'whispers': '.whispers',
 
-	'boxart-hover': '.tw-card .full-width:hover a[data-a-target="live-channel-card-game-link"]',
+	'boxart-hover': '.tw-card .tw-full-width:hover a[data-a-target="live-channel-card-game-link"]',
 	'boxart-hide': '.tw-card a[data-a-target="live-channel-card-game-link"]',
-	'profile-hover-following': '.tw-card .full-width:hover .ffz-channel-avatar',
+	'profile-hover-following': '.tw-card .tw-full-width:hover .ffz-channel-avatar',
 	'profile-hover-game': '.tw-thumbnail-card .tw-card-img:hover .ffz-channel-avatar',
 };
 

src/sites/twitch-twilight/modules/css_tweaks/styles/chat-font.scss

@@ -3,4 +3,8 @@
 	font-size: var(--ffz-chat-font-size);
 	line-height: var(--ffz-chat-line-height);
 	font-family: var(--ffz-chat-font-family);
+
+	.chat-list__lines {
+		line-height: var(--ffz-chat-line-height);
+	}
 }

src/sites/twitch-twilight/modules/css_tweaks/styles/swap-sidebars.scss

@@ -14,22 +14,31 @@
 	svg { transform: rotate(180deg) }
 }
 
-.side-nav__theme-wrapper.border-r {
+.side-nav__theme-wrapper.tw-border-r {
 	border-right: none !important;
 	border-left: 1px solid #dad8de;
 
 	.tw-theme--dark & {
 		border-left-color: #2c2541;
+
+	}
+	.tw-theme--ffz.tw-theme--dark & {
+		border-left-color: var(--ffz-color-20);
 	}
 }
 
-.chat__pane {
+.chat-room__pane {
 	border-left: none !important;
 	border-right: 1px solid #dad8de;
 
 	.tw-theme--dark & {
 		border-right-color: #2c2541;
 	}
+
+
+	.tw-theme--ffz.tw-theme--dark & {
+		border-right-color: var(--ffz-color-20);
+	}
 }
 
 

src/sites/twitch-twilight/modules/directory/following.js

@@ -328,8 +328,7 @@ export default class Following extends SiteModule {
 			)
 		);
 
-		document.body.querySelector('.twilight-root').appendChild(this.hostMenu);
+		(document.body.querySelector('.twilight-root') || document.body).appendChild(this.hostMenu);
-		//document.body.appendChild(this.hostMenu);
 
 		this.hostMenuPopper = new Popper(document.body, this.hostMenu, {
 			placement: 'bottom-start',
@@ -358,7 +357,7 @@ export default class Following extends SiteModule {
 			return;
 
 		// Remove old elements
-		const hiddenBodyCard = card.querySelector('.tw-card-body.hide');
+		const hiddenBodyCard = card.querySelector('.tw-card-body.tw-hide');
 		if (hiddenBodyCard !== null) hiddenBodyCard.classList.remove('tw-hide');
 
 		const ffzChannelData = card.querySelector('.ffz-channel-data');

src/sites/twitch-twilight/modules/directory/index.js

@@ -244,7 +244,7 @@ export default class Directory extends SiteModule {
 			setting = this.settings.get('directory.show-channel-avatars');
 
 		// Remove old elements
-		const hiddenBodyCard = card.querySelector('.tw-card-body.hide');
+		const hiddenBodyCard = card.querySelector('.tw-card-body.tw-hide');
 		if (hiddenBodyCard !== null)
 			hiddenBodyCard.classList.remove('tw-hide');
 

src/utilities/tooltip.js

@@ -240,6 +240,11 @@ export class Tooltip {
 			setter = use_html ? 'innerHTML' : 'textContent';
 
 		const pop_opts = Object.assign({
+			modifiers: {
+				flip: {
+					behavior: ['top', 'bottom', 'left', 'right']
+				}
+			},
 			arrowElement: arrow
 		}, opts.popper);