Alys / Habitica Tags Always Visible

// ==UserScript==
// @namespace https://openuserjs.org/users/Alys
// @name Habitica Tags Always Visible
// @description Make the tags visible all the time on the Habitica tasks page.
// @copyright 2019, Citrusella (CSS), Alys (JS) (https://openuserjs.org/users/Alys)
// @licence MIT
// @version 1.0.3
// @include https://habitica.com/*
// @grant GM_addStyle
// ==/UserScript==

// ==OpenUserJS==
// @author Citrusella
// @author Alys
// ==/OpenUserJS==

GM_addStyle (`
	.tasks-navigation {
		height: 210px !important;
	}
	.filter-panel {
		max-height: 170px !important;
		min-height: 85px !important;
		max-width: 99% !important;
		width: 99% !important;
		left: 0px !important;
		z-index: 0 !important;
		overflow-y: scroll !important;
		display: flex !important;
		flex-direction: column !important;
	}
	.tasks-navigation .tags-list .custom-control {
		padding-left: 0rem !important;
		margin-bottom: 0rem !important;
		margin-left: -.5rem !important;
	}
	.tasks-navigation .tags-list .custom-control-input {
		left: .5rem !important;
	}
	.tasks-navigation .tags-list .custom-control .custom-control-label::before,.tasks-navigation .tags-list .custom-control-input:checked ~ .custom-control-label::before,.tasks-navigation .tags-list .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
		visibility: hidden !important;
	}
	.tasks-navigation .tags-list .custom-control-label::after,.tasks-navigation .tags-list .custom-control-label::before {
		left: 0rem !important;
	}
	.tasks-navigation .tags-list .custom-checkbox .custom-control-input:checked ~ .custom-control-label {
		background-color: #96c676;
		border: 1px solid #F0F6EB;
		color: #fffffa;
	}
	.tasks-navigation .tags-list .custom-control-label {
		background-color: #F0F6EB;
		color: #3F6423;
		border: 1px solid #C4DEB2;
		border-radius: 12px;
		padding-left: 8px;
		padding-right: 8px;
	}
	.tasks-navigation .tags-list .col-6 {
		width: auto !important;
		flex: none !important;
		padding: 2px !important;
	}
	.tasks-navigation .tags-list .col-6 .tag-edit-item {
		max-width: 220px !important;
	}
	.tasks-navigation .col-md-4 {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}
	.offset-md-4 {
		margin-left: 0.5% !important;
	}
	.modal {
		z-index: 999999999 !important;
	}
	.filter-panel-footer {
		order: 1 !important;
		padding-top: 12px !important;
		padding-bottom: 4px !important;
	}
	.tags-category {
		order: 2 !important;
		padding-top: 6px !important;
		padding-bottom: 4px !important;
	}
	.tags-category.flex-column {
		-webkit-box-orient: horizontal !important;
		-ms-flex-direction: row !important;
		flex-direction: row !important;
	}
	.tags-list.container {
		max-width: 5000px;
	}
`);

var targetNode = document.querySelector('body');

var callback = function(mutationsList, observer) {
	var tagsButton = document.querySelector("html body div div#app div.container-fluid div div.row.user-tasks-page div.col-12 div.row.tasks-navigation div.col-12.col-md-4.offset-md-4 div.d-flex button.btn.btn-secondary.dropdown-toggle");
	var filterPanel = document.querySelector(".filter-panel");
	if (tagsButton && !filterPanel){ // we have the tagsButton, but don't have our filter-panel
		tagsButton.click(); // this clicks on the "Tags" button to show the panel that contains the list of tags
	}
};

var observer = new MutationObserver(callback);
var config = {
	childList: true,
	subtree: true,
};
observer.observe(targetNode, config);