No OneTemporary
Actions

Size

434 KB

Referenced Files

None

Subscribers

None

View Options

This file is larger than 256 KB, so syntax highlighting was skipped.

	diff --git a/src/App.js b/src/App.js
	index 294f60000d..f01f878826 100644
	--- a/src/App.js
	+++ b/src/App.js
	@@ -1,102 +1,119 @@
	import UserPanel from './components/user_panel/user_panel.vue'
	import NavPanel from './components/nav_panel/nav_panel.vue'
	-import Notifications from './components/notifications/notifications.vue'
	import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
	import FeaturesPanel from './components/features_panel/features_panel.vue'
	import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
	import ShoutPanel from './components/shout_panel/shout_panel.vue'
	import SettingsModal from './components/settings_modal/settings_modal.vue'
	import MediaModal from './components/media_modal/media_modal.vue'
	import SideDrawer from './components/side_drawer/side_drawer.vue'
	import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
	import MobileNav from './components/mobile_nav/mobile_nav.vue'
	import DesktopNav from './components/desktop_nav/desktop_nav.vue'
	import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
	import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
	import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
	import { windowWidth, windowHeight } from './services/window_utils/window_utils'
	import { mapGetters } from 'vuex'
	+import { defineAsyncComponent } from 'vue'

	export default {
	name: 'app',
	components: {
	UserPanel,
	NavPanel,
	- Notifications,
	+ Notifications: defineAsyncComponent(() => import('./components/notifications/notifications.vue')),
	InstanceSpecificPanel,
	FeaturesPanel,
	WhoToFollowPanel,
	ShoutPanel,
	MediaModal,
	SideDrawer,
	MobilePostStatusButton,
	MobileNav,
	DesktopNav,
	SettingsModal,
	UserReportingModal,
	PostStatusModal,
	GlobalNoticeList
	},
	data: () => ({
	mobileActivePanel: 'timeline'
	}),
	created () {
	// Load the locale from the storage
	const val = this.$store.getters.mergedConfig.interfaceLanguage
	this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
	window.addEventListener('resize', this.updateMobileState)
	},
	unmounted () {
	window.removeEventListener('resize', this.updateMobileState)
	},
	computed: {
	+ classes () {
	+ return [
	+ {
	+ '-reverse': this.reverseLayout,
	+ '-no-sticky-headers': this.noSticky,
	+ '-has-new-post-button': this.newPostButtonShown
	+ },
	+ '-' + this.layoutType
	+ ]
	+ },
	currentUser () { return this.$store.state.users.currentUser },
	userBackground () { return this.currentUser.background_image },
	instanceBackground () {
	return this.mergedConfig.hideInstanceWallpaper
	? null
	: this.$store.state.instance.background
	},
	background () { return this.userBackground \|\| this.instanceBackground },
	bgStyle () {
	if (this.background) {
	return {
	'--body-background-image': `url(${this.background})`
	}
	}
	},
	shout () { return this.$store.state.shout.joined },
	suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
	showInstanceSpecificPanel () {
	return this.$store.state.instance.showInstanceSpecificPanel &&
	!this.$store.getters.mergedConfig.hideISP &&
	this.$store.state.instance.instanceSpecificPanelContent
	},
	+ isChats () {
	+ return this.$route.name === 'chat' \|\| this.$route.name === 'chats'
	+ },
	+ newPostButtonShown () {
	+ if (this.isChats) return false
	+ return this.$store.getters.mergedConfig.alwaysShowNewPostButton \|\| this.layoutType === 'mobile'
	+ },
	showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
	shoutboxPosition () {
	- return this.$store.getters.mergedConfig.showNewPostButton \|\| false
	+ return this.$store.getters.mergedConfig.alwaysShowNewPostButton \|\| false
	},
	hideShoutbox () {
	return this.$store.getters.mergedConfig.hideShoutbox
	},
	- isMobileLayout () { return this.$store.state.interface.mobileLayout },
	+ layoutType () { return this.$store.state.interface.layoutType },
	privateMode () { return this.$store.state.instance.private },
	- sidebarAlign () {
	- return {
	- 'order': this.$store.getters.mergedConfig.sidebarRight ? 99 : 0
	+ reverseLayout () {
	+ const { thirdColumnMode, sidebarRight: reverseSetting } = this.$store.getters.mergedConfig
	+ if (this.layoutType !== 'wide') {
	+ return reverseSetting
	+ } else {
	+ return thirdColumnMode === 'notifications' ? reverseSetting : !reverseSetting
	}
	},
	+ noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
	+ showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars },
	...mapGetters(['mergedConfig'])
	},
	methods: {
	updateMobileState () {
	- const mobileLayout = windowWidth() <= 800
	- const layoutHeight = windowHeight()
	- const changed = mobileLayout !== this.isMobileLayout
	- if (changed) {
	- this.$store.dispatch('setMobileLayout', mobileLayout)
	- }
	- this.$store.dispatch('setLayoutHeight', layoutHeight)
	+ this.$store.dispatch('setLayoutWidth', windowWidth())
	+ this.$store.dispatch('setLayoutHeight', windowHeight())
	}
	}
	}
	diff --git a/src/App.scss b/src/App.scss
	index 180c0daf83..5cd0b96e3a 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,891 +1,838 @@
	+// stylelint-disable rscss/class-format
	@import './_variables.scss';

	-#app {
	- min-height: 100vh;
	- max-width: 100%;
	- overflow: hidden;
	-}
	-
	-.app-bg-wrapper {
	- position: fixed;
	- z-index: -1;
	- height: 100%;
	- left: 0;
	- right: -20px;
	- background-size: cover;
	- background-repeat: no-repeat;
	- background-color: var(--wallpaper);
	- background-image: var(--body-background-image);
	- background-position: 50% 50px;
	-}
	-
	-i[class^='icon-'] {
	- user-select: none;
	-}
	-
	-h4 {
	- margin: 0;
	-}
	-
	-#content {
	- box-sizing: border-box;
	- padding-top: 60px;
	- margin: auto;
	- min-height: 100vh;
	- max-width: 980px;
	- align-content: flex-start;
	-}
	-
	-.underlay {
	- background-color: rgba(0,0,0,0.15);
	- background-color: var(--underlay, rgba(0,0,0,0.15));
	-}
	-
	-.text-center {
	- text-align: center;
	+:root {
	+ --navbar-height: 3.5rem;
	+ --post-line-height: 1.4;
	}

	html {
	font-size: 14px;
	+ // overflow-x: clip causes my browser's tab to crash with SIGILL lul
	}

	body {
	- overscroll-behavior-y: none;
	font-family: sans-serif;
	font-family: var(--interfaceFont, sans-serif);
	margin: 0;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	- max-width: 100vw;
	- overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	+ overscroll-behavior-y: none;
	+ overflow-x: clip;
	+ overflow-y: scroll;

	&.hidden {
	display: none;
	}
	}

	+// ## Custom scrollbars
	+// Only show custom scrollbars on devices which
	+// have a cursor/pointer to operate them
	+@media (any-pointer: fine) {
	+ * {
	+ scrollbar-color: var(--btn) transparent;
	+
	+ &::-webkit-scrollbar {
	+ background: transparent;
	+ }
	+
	+ &::-webkit-scrollbar-button,
	+ &::-webkit-scrollbar-thumb {
	+ background-color: var(--btn);
	+ box-shadow: var(--buttonShadow);
	+ border-radius: var(--btnRadius);
	+ }
	+
	+ // horizontal/vertical/increment/decrement are webkit-specific stuff
	+ // that indicates whether we're affecting vertical scrollbar, increase button etc
	+ // stylelint-disable selector-pseudo-class-no-unknown
	+ &::-webkit-scrollbar-button {
	+ --___bgPadding: 2px;
	+
	+ color: var(--btnText);
	+ background-repeat: no-repeat, no-repeat;
	+
	+ &:horizontal {
	+ background-size: 50% calc(50% - var(--___bgPadding)), 50% calc(50% - var(--___bgPadding));
	+
	+ &:increment {
	+ background-image:
	+ linear-gradient(45deg, var(--btnText) 50%, transparent 51%),
	+ linear-gradient(-45deg, transparent 50%, var(--btnText) 51%);
	+ background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
	+ }
	+
	+ &:decrement {
	+ background-image:
	+ linear-gradient(45deg, transparent 50%, var(--btnText) 51%),
	+ linear-gradient(-45deg, var(--btnText) 50%, transparent 51%);
	+ background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
	+ }
	+ }
	+
	+ &:vertical {
	+ background-size: calc(50% - var(--___bgPadding)) 50%, calc(50% - var(--___bgPadding)) 50%;
	+
	+ &:increment {
	+ background-image:
	+ linear-gradient(-45deg, transparent 50%, var(--btnText) 51%),
	+ linear-gradient(45deg, transparent 50%, var(--btnText) 51%);
	+ background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
	+ }
	+
	+ &:decrement {
	+ background-image:
	+ linear-gradient(-45deg, var(--btnText) 50%, transparent 51%),
	+ linear-gradient(45deg, var(--btnText) 50%, transparent 51%);
	+ background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
	+ }
	+ }
	+ }
	+ // stylelint-enable selector-pseudo-class-no-unknown
	+ }
	+ // Body should have background to scrollbar otherwise it will use white (body color?)
	+ html {
	+ scrollbar-color: var(--selectedMenu) var(--wallpaper);
	+ background: var(--wallpaper);
	+ }
	+}
	+
	a {
	text-decoration: none;
	color: $fallback--link;
	color: var(--link, $fallback--link);
	}

	+h4 {
	+ margin: 0;
	+}
	+
	+i[class*=icon-],
	+.svg-inline--fa {
	+ color: $fallback--icon;
	+ color: var(--icon, $fallback--icon);
	+}
	+
	+nav {
	+ z-index: 1000;
	+ color: var(--topBarText);
	+ background-color: $fallback--fg;
	+ background-color: var(--topBar, $fallback--fg);
	+ color: $fallback--faint;
	+ color: var(--faint, $fallback--faint);
	+ box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
	+ box-shadow: var(--topBarShadow);
	+ box-sizing: border-box;
	+ height: var(--navbar-height);
	+ position: fixed;
	+}
	+
	+#sidebar {
	+ grid-area: sidebar;
	+}
	+
	+.column.-scrollable {
	+ top: var(--navbar-height);
	+ position: sticky;
	+}
	+
	+#main-scroller {
	+ grid-area: content;
	+ position: relative;
	+}
	+
	+#notifs-column {
	+ grid-area: notifs;
	+}
	+
	+.app-bg-wrapper {
	+ position: fixed;
	+ height: 100%;
	+ top: var(--navbar-height);
	+ z-index: -1000;
	+ left: 0;
	+ right: -20px;
	+ background-size: cover;
	+ background-repeat: no-repeat;
	+ background-color: var(--wallpaper);
	+ background-image: var(--body-background-image);
	+ background-position: 50%;
	+}
	+
	+.underlay {
	+ grid-column-start: 1;
	+ grid-column-end: span 3;
	+ grid-row-start: 1;
	+ grid-row-end: 1;
	+ pointer-events: none;
	+ background-color: rgba(0, 0, 0, 0.15);
	+ background-color: var(--underlay, rgba(0, 0, 0, 0.15));
	+ z-index: -1000;
	+}
	+
	+.app-layout {
	+ --miniColumn: 25rem;
	+ --maxiColumn: minmax(var(--miniColumn), 45rem);
	+ --columnGap: 1em;
	+ --status-margin: 0.75em;
	+
	+ position: relative;
	+ display: grid;
	+ grid-template-columns: var(--miniColumn) var(--maxiColumn);
	+ grid-template-areas: "sidebar content";
	+ grid-template-rows: 1fr;
	+ box-sizing: border-box;
	+ margin: 0 auto;
	+ align-content: flex-start;
	+ flex-wrap: wrap;
	+ justify-content: center;
	+ min-height: 100vh;
	+ overflow-x: clip;
	+
	+ .column {
	+ --___columnMargin: var(--columnGap);
	+
	+ display: grid;
	+ grid-template-columns: 100%;
	+ box-sizing: border-box;
	+ grid-row-start: 1;
	+ grid-row-end: 1;
	+ margin: 0 calc(var(--___columnMargin) / 2);
	+ padding: calc(var(--___columnMargin)) 0;
	+ row-gap: var(--___columnMargin);
	+ align-content: start;
	+
	+ &:not(.-scrollable) {
	+ margin-top: var(--navbar-height);
	+ }
	+
	+ &:hover {
	+ z-index: 2;
	+ }
	+
	+ &.-full-height {
	+ margin-bottom: 0;
	+ padding-top: 0;
	+ padding-bottom: 0;
	+ }
	+
	+ &.-scrollable {
	+ --___paddingIncrease: calc(var(--columnGap) / 2);
	+
	+ position: sticky;
	+ top: var(--navbar-height);
	+ max-height: calc(100vh - var(--navbar-height));
	+ overflow-y: auto;
	+ overflow-x: hidden;
	+ margin-left: calc(var(--___paddingIncrease) * -1);
	+ padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
	+
	+ // On browsers that don't support hiding scrollbars we enforce "show scrolbars" mode
	+ // might implement old style of hiding scrollbars later if there's demand
	+ @supports (scrollbar-width: none) or (-webkit-text-fill-color: initial) {
	+ &:not(.-show-scrollbar) {
	+ scrollbar-width: none;
	+ margin-right: calc(var(--___paddingIncrease) * -1);
	+ padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
	+
	+ &::-webkit-scrollbar {
	+ display: block;
	+ width: 0;
	+ }
	+ }
	+ }
	+
	+ .panel-heading.-sticky {
	+ top: calc(var(--columnGap) / -1);
	+ }
	+ }
	+ }
	+
	+ &.-has-new-post-button {
	+ .column {
	+ padding-bottom: 10rem;
	+ }
	+ }
	+
	+ &.-no-sticky-headers {
	+ .column {
	+ .panel-heading.-sticky {
	+ position: relative;
	+ top: 0;
	+ }
	+ }
	+ }
	+
	+ .column-inner {
	+ display: grid;
	+ grid-template-columns: 100%;
	+ box-sizing: border-box;
	+ row-gap: 1em;
	+ align-content: start;
	+ }
	+
	+ &.-reverse:not(.-wide):not(.-mobile) {
	+ grid-template-columns: var(--maxiColumn) var(--miniColumn);
	+ grid-template-areas: "content sidebar";
	+ }
	+
	+ &.-wide {
	+ grid-template-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn);
	+ grid-template-areas: "sidebar content notifs";
	+
	+ &.-reverse {
	+ grid-template-areas: "notifs content sidebar";
	+ }
	+ }
	+
	+ &.-mobile {
	+ grid-template-columns: 100vw;
	+ grid-template-areas: "content";
	+ padding: 0;
	+
	+ .column {
	+ margin-left: 0;
	+ margin-right: 0;
	+ padding-top: 0;
	+ margin-top: var(--navbar-height);
	+ margin-bottom: 0;
	+ }
	+
	+ .panel-heading,
	+ .panel-heading::after,
	+ .panel-heading::before,
	+ .panel,
	+ .panel::after {
	+ border-top-left-radius: 0;
	+ border-top-right-radius: 0;
	+ }
	+
	+ .underlay,
	+ #sidebar,
	+ #notifs-column {
	+ display: none;
	+ }
	+ }
	+
	+ &.-normal {
	+ #notifs-column {
	+ display: none;
	+ }
	+ }
	+}
	+
	+.text-center {
	+ text-align: center;
	+}
	+
	.button-default {
	user-select: none;
	color: $fallback--text;
	color: var(--btnText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btn, $fallback--fg);
	border: none;
	border-radius: $fallback--btnRadius;
	border-radius: var(--btnRadius, $fallback--btnRadius);
	cursor: pointer;
	box-shadow: $fallback--buttonShadow;
	box-shadow: var(--buttonShadow);
	- font-size: 14px;
	+ font-size: 1em;
	font-family: sans-serif;
	font-family: var(--interfaceFont, sans-serif);

	&.-sublime {
	background: transparent;
	}

	i[class*=icon-],
	.svg-inline--fa {
	color: $fallback--text;
	color: var(--btnText, $fallback--text);
	}

	&::-moz-focus-inner {
	border: none;
	}

	&:hover {
	- box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
	+ box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
	box-shadow: var(--buttonHoverShadow);
	}

	&:active {
	- box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
	+ box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
	box-shadow: var(--buttonPressedShadow);
	color: $fallback--text;
	color: var(--btnPressedText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btnPressed, $fallback--fg);

	svg,
	i {
	color: $fallback--text;
	color: var(--btnPressedText, $fallback--text);
	}
	}

	&:disabled {
	cursor: not-allowed;
	color: $fallback--text;
	color: var(--btnDisabledText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btnDisabled, $fallback--fg);

	svg,
	i {
	color: $fallback--text;
	color: var(--btnDisabledText, $fallback--text);
	}
	}

	&.toggled {
	color: $fallback--text;
	color: var(--btnToggledText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btnToggled, $fallback--fg);
	- box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
	+ box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
	box-shadow: var(--buttonPressedShadow);

	svg,
	i {
	color: $fallback--text;
	color: var(--btnToggledText, $fallback--text);
	}
	}

	&.danger {
	// TODO: add better color variable
	color: $fallback--text;
	color: var(--alertErrorPanelText, $fallback--text);
	background-color: $fallback--alertError;
	background-color: var(--alertError, $fallback--alertError);
	}
	}

	.button-unstyled {
	background: none;
	border: none;
	outline: none;
	display: inline;
	text-align: initial;
	font-size: 100%;
	font-family: inherit;
	padding: 0;
	line-height: unset;
	cursor: pointer;
	box-sizing: content-box;
	color: inherit;

	&.-link {
	color: $fallback--link;
	color: var(--link, $fallback--link);
	}

	&.-fullwidth {
	width: 100%;
	}

	&.-hover-highlight {
	&:hover svg {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}
	}
	}

	-input, textarea, .input {
	-
	+input,
	+textarea,
	+.input {
	&.unstyled {
	border-radius: 0;
	background: none;
	box-shadow: none;
	height: unset;
	}

	+ --_padding: 0.5em;
	+
	border: none;
	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);
	- box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 0px 2px 0px rgba(0, 0, 0, 1) inset;
	+ box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 0 2px 0 rgba(0, 0, 0, 1) inset;
	box-shadow: var(--inputShadow);
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	color: $fallback--lightText;
	color: var(--inputText, $fallback--lightText);
	font-family: sans-serif;
	font-family: var(--inputFont, sans-serif);
	- font-size: 14px;
	+ font-size: 1em;
	margin: 0;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	- height: 28px;
	- line-height: 16px;
	+ line-height: 2;
	hyphens: none;
	- padding: 8px .5em;
	+ padding: 0 var(--_padding);

	- &:disabled, &[disabled=disabled], &.disabled {
	+ &:disabled,
	+ &[disabled=disabled],
	+ &.disabled {
	cursor: not-allowed;
	opacity: 0.5;
	}

	&[type=range] {
	background: none;
	border: none;
	margin: 0;
	box-shadow: none;
	flex: 1;
	}

	&[type=radio] {
	display: none;
	+
	&:checked + label::before {
	- box-shadow: 0px 0px 2px black inset, 0px 0px 0px 4px $fallback--fg inset;
	- box-shadow: var(--inputShadow), 0px 0px 0px 4px var(--fg, $fallback--fg) inset;
	+ box-shadow: 0 0 2px black inset, 0 0 0 4px $fallback--fg inset;
	+ box-shadow: var(--inputShadow), 0 0 0 4px var(--fg, $fallback--fg) inset;
	background-color: var(--accent, $fallback--link);
	}
	+
	&:disabled {
	&,
	& + label,
	& + label::before {
	- opacity: .5;
	+ opacity: 0.5;
	}
	}
	+
	+ label::before {
	flex-shrink: 0;
	display: inline-block;
	content: '';
	transition: box-shadow 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: 100%; // Radio buttons should always be circle
	- box-shadow: 0px 0px 2px black inset;
	+ box-shadow: 0 0 2px black inset;
	box-shadow: var(--inputShadow);
	- margin-right: .5em;
	+ margin-right: 0.5em;
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	vertical-align: top;
	text-align: center;
	- line-height: 1.1em;
	+ line-height: 1.1;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	- box-sizing: border-box;
	}
	}

	&[type=checkbox] {
	display: none;
	+
	&:checked + label::before {
	color: $fallback--text;
	color: var(--inputText, $fallback--text);
	}
	+
	&:disabled {
	&,
	& + label,
	& + label::before {
	- opacity: .5;
	+ opacity: 0.5;
	}
	}
	+
	+ label::before {
	flex-shrink: 0;
	display: inline-block;
	content: '✓';
	transition: color 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: $fallback--checkboxRadius;
	border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
	- box-shadow: 0px 0px 2px black inset;
	+ box-shadow: 0 0 2px black inset;
	box-shadow: var(--inputShadow);
	- margin-right: .5em;
	+ margin-right: 0.5em;
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	vertical-align: top;
	text-align: center;
	- line-height: 1.1em;
	+ line-height: 1.1;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	- box-sizing: border-box;
	}
	}

	&.resize-height {
	resize: vertical;
	}
	}

	+// Textareas should have stock line-height + vertical padding instead of huge line-height
	+textarea {
	+ padding: var(--_padding);
	+ line-height: var(--post-line-height);
	+}
	+
	option {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	}

	.hide-number-spinner {
	-moz-appearance: textfield;
	+
	&[type=number]::-webkit-inner-spin-button,
	&[type=number]::-webkit-outer-spin-button {
	opacity: 0;
	display: none;
	}
	}

	-i[class*=icon-], .svg-inline--fa {
	- color: $fallback--icon;
	- color: var(--icon, $fallback--icon);
	-}
	-
	.btn-block {
	display: block;
	width: 100%;
	}

	.btn-group {
	position: relative;
	display: inline-flex;
	vertical-align: middle;

	button {
	position: relative;
	flex: 1 1 auto;

	&:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	}

	&:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	}
	}
	}

	-.container {
	- display: flex;
	- flex-wrap: wrap;
	- margin: 0;
	- padding: 0 10px 0 10px;
	-}
	-
	-.auto-size {
	- flex: 1
	-}
	-
	-main-router {
	- flex: 1;
	-}
	-
	-.status.compact {
	- color: rgba(0, 0, 0, 0.42);
	- font-weight: 300;
	-
	- p {
	- margin: 0;
	- font-size: 0.8em
	- }
	-}
	-
	-/* Panel */
	-
	-.panel {
	- display: flex;
	- position: relative;
	-
	- flex-direction: column;
	- margin: 0.5em;
	-
	- background-color: $fallback--bg;
	- background-color: var(--bg, $fallback--bg);
	-
	- &::after, & {
	- border-radius: $fallback--panelRadius;
	- border-radius: var(--panelRadius, $fallback--panelRadius);
	- }
	-
	- &::after {
	- content: '';
	- position: absolute;
	-
	- top: 0;
	- bottom: 0;
	- left: 0;
	- right: 0;
	-
	- pointer-events: none;
	-
	- box-shadow: 1px 1px 4px rgba(0,0,0,.6);
	- box-shadow: var(--panelShadow);
	- }
	-}
	-
	-.panel-body:empty::before {
	- content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
	- display: block;
	- margin: 1em;
	- text-align: center;
	-}
	-
	-.panel-heading {
	- display: flex;
	- flex: none;
	- border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
	- border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
	- background-size: cover;
	- padding: .6em .6em;
	- text-align: left;
	- line-height: 28px;
	- color: var(--panelText);
	- background-color: $fallback--fg;
	- background-color: var(--panel, $fallback--fg);
	- align-items: baseline;
	- box-shadow: var(--panelHeaderShadow);
	-
	- .title {
	- flex: 1 0 auto;
	- font-size: 1.3em;
	- }
	-
	- .faint {
	- background-color: transparent;
	- color: $fallback--faint;
	- color: var(--panelFaint, $fallback--faint);
	- }
	-
	- .faint-link {
	- color: $fallback--faint;
	- color: var(--faintLink, $fallback--faint);
	- }
	-
	- .alert {
	- white-space: nowrap;
	- text-overflow: ellipsis;
	- overflow-x: hidden;
	- }
	-
	- .button-default,
	- .alert {
	- // height: 100%;
	- line-height: 21px;
	- min-height: 0;
	- box-sizing: border-box;
	- margin: 0;
	- margin-left: .5em;
	- min-width: 1px;
	- align-self: stretch;
	- }
	-
	- .button-default {
	- flex-shrink: 0;
	-
	- &,
	- i[class*=icon-] {
	- color: $fallback--text;
	- color: var(--btnPanelText, $fallback--text);
	- }
	-
	- &:active {
	- background-color: $fallback--fg;
	- background-color: var(--btnPressedPanel, $fallback--fg);
	- color: $fallback--text;
	- color: var(--btnPressedPanelText, $fallback--text);
	- }
	-
	- &:disabled {
	- color: $fallback--text;
	- color: var(--btnDisabledPanelText, $fallback--text);
	- }
	-
	- &.toggled {
	- color: $fallback--text;
	- color: var(--btnToggledPanelText, $fallback--text);
	- }
	- }
	-
	- a,
	- .-link {
	- color: $fallback--link;
	- color: var(--panelLink, $fallback--link)
	- }
	-}
	-
	-.panel-heading.stub {
	- border-radius: $fallback--panelRadius;
	- border-radius: var(--panelRadius, $fallback--panelRadius);
	-}
	-
	-/* TODO Should remove timeline-footer from here when we refactor panels into
	- * separate component and utilize slots
	- */
	-.panel-footer, .timeline-footer {
	- display: flex;
	- border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
	- border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
	- flex: none;
	- padding: 0.6em 0.6em;
	- text-align: left;
	- line-height: 28px;
	- align-items: baseline;
	- border-width: 1px 0 0 0;
	- border-style: solid;
	- border-color: var(--border, $fallback--border);
	-
	- .faint {
	- color: $fallback--faint;
	- color: var(--panelFaint, $fallback--faint);
	- }
	-
	- a,
	- .-link {
	- color: $fallback--link;
	- color: var(--panelLink, $fallback--link);
	- }
	-}
	-
	-.panel-body > p {
	- line-height: 18px;
	- padding: 1em;
	- margin: 0;
	-}
	-
	-.container > * {
	- min-width: 0px;
	-}
	+@import './panel.scss';

	.fa {
	color: grey;
	}

	-nav {
	- z-index: 1000;
	- color: var(--topBarText);
	- background-color: $fallback--fg;
	- background-color: var(--topBar, $fallback--fg);
	- color: $fallback--faint;
	- color: var(--faint, $fallback--faint);
	- box-shadow: 0px 0px 4px rgba(0,0,0,.6);
	- box-shadow: var(--topBarShadow);
	- box-sizing: border-box;
	-}
	-
	-.fade-enter-active, .fade-leave-active {
	- transition: opacity .2s
	-}
	-.fade-enter-from, .fade-leave-active {
	- opacity: 0
	-}
	-
	-.main {
	- flex-basis: 50%;
	- flex-grow: 1;
	- flex-shrink: 1;
	-}
	-
	-.sidebar-bounds {
	- flex: 0;
	- flex-basis: 35%;
	-}
	-
	-.sidebar-flexer {
	- flex: 1;
	- flex-basis: 345px;
	- width: 365px;
	-}
	-
	.mobile-shown {
	display: none;
	}

	-@media all and (min-width: 800px) {
	- body {
	- overflow-y: scroll;
	- }
	-
	- .sidebar-bounds {
	- overflow: hidden;
	- max-height: 100vh;
	- width: 345px;
	- position: fixed;
	- margin-top: -10px;
	-
	- .sidebar-scroller {
	- height: 96vh;
	- width: 365px;
	- padding-top: 10px;
	- padding-right: 50px;
	- overflow-x: hidden;
	- overflow-y: scroll;
	- }
	-
	- .sidebar {
	- width: 345px;
	- }
	- }
	- .sidebar-flexer {
	- max-height: 96vh;
	- flex-shrink: 0;
	- flex-grow: 0;
	- }
	-}
	-
	.badge {
	box-sizing: border-box;
	display: inline-block;
	border-radius: 99px;
	max-width: 10em;
	min-width: 1.7em;
	height: 1.3em;
	padding: 0.15em 0.15em;
	vertical-align: middle;
	font-weight: normal;
	font-style: normal;
	font-size: 0.9em;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	&.badge-notification {
	background-color: $fallback--cRed;
	background-color: var(--badgeNotification, $fallback--cRed);
	color: white;
	color: var(--badgeNotificationText, white);
	}
	}

	.alert {
	- margin: 0.35em;
	- padding: 0.25em;
	+ margin: 0 0.35em;
	+ padding: 0 0.25em;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	- min-height: 28px;
	- line-height: 28px;

	&.error {
	background-color: $fallback--alertError;
	background-color: var(--alertError, $fallback--alertError);
	color: $fallback--text;
	color: var(--alertErrorText, $fallback--text);

	.panel-heading & {
	color: $fallback--text;
	color: var(--alertErrorPanelText, $fallback--text);
	}
	}

	&.warning {
	background-color: $fallback--alertWarning;
	background-color: var(--alertWarning, $fallback--alertWarning);
	color: $fallback--text;
	color: var(--alertWarningText, $fallback--text);

	.panel-heading & {
	color: $fallback--text;
	color: var(--alertWarningPanelText, $fallback--text);
	}
	}

	&.success {
	background-color: var(--alertSuccess, $fallback--alertWarning);
	color: var(--alertSuccessText, $fallback--text);

	.panel-heading & {
	color: var(--alertSuccessPanelText, $fallback--text);
	}
	}
	}

	.faint {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	}

	.faint-link {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);

	&:hover {
	text-decoration: underline;
	}
	}

	.visibility-notice {
	- padding: .5em;
	+ padding: 0.5em;
	border: 1px solid $fallback--faint;
	border: 1px solid var(--faint, $fallback--faint);
	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);
	}

	.notice-dismissible {
	padding-right: 4rem;
	position: relative;

	.dismiss {
	position: absolute;
	top: 0;
	right: 0;
	- padding: .5em;
	+ padding: 0.5em;
	color: inherit;
	}
	}

	.fa-scale-110 {
	&.svg-inline--fa {
	font-size: 1.1em;
	}
	}

	.fa-old-padding {
	&.svg-inline--fa {
	padding: 0 0.3em;
	}
	}

	-@keyframes shakeError {
	- 0% {
	- transform: translateX(0);
	- }
	- 15% {
	- transform: translateX(0.375rem);
	- }
	- 30% {
	- transform: translateX(-0.375rem);
	- }
	- 45% {
	- transform: translateX(0.375rem);
	- }
	- 60% {
	- transform: translateX(-0.375rem);
	- }
	- 75% {
	- transform: translateX(0.375rem);
	- }
	- 90% {
	- transform: translateX(-0.375rem);
	- }
	- 100% {
	- transform: translateX(0);
	- }
	-}
	-
	-@media all and (max-width: 800px) {
	- .mobile-hidden {
	- display: none;
	- }
	-
	- .panel-switcher {
	- display: flex;
	- }
	-
	- .container {
	- padding: 0;
	- }
	-
	- .panel {
	- margin: 0.5em 0 0.5em 0;
	- }
	-
	- .menu-button {
	- display: block;
	- margin-right: 0.8em;
	- }
	-
	- .main {
	- margin-bottom: 7em;
	- }
	-}
	-
	-.setting-list,
	-.option-list{
	- list-style-type: none;
	- padding-left: 2em;
	- li {
	- margin-bottom: 0.5em;
	- }
	- .suboptions {
	- margin-top: 0.3em
	- }
	-}
	-
	.login-hint {
	text-align: center;

	@media all and (min-width: 801px) {
	display: none;
	}

	a {
	display: inline-block;
	- padding: 1em 0px;
	+ padding: 1em 0;
	width: 100%;
	}
	}

	.btn.button-default {
	- min-height: 28px;
	+ min-height: 2em;
	}

	-.animate-spin {
	- animation: spin 2s infinite linear;
	- display: inline-block;
	+.new-status-notification {
	+ position: relative;
	+ font-size: 1.1em;
	+ z-index: 1;
	+ flex: 1;
	+}
	+
	+@media all and (max-width: 800px) {
	+ .mobile-hidden {
	+ display: none;
	+ }
	}

	@keyframes spin {
	0% {
	transform: rotate(0deg);
	}

	100% {
	transform: rotate(359deg);
	}
	}

	-.new-status-notification {
	- position: relative;
	- font-size: 1.1em;
	- z-index: 1;
	- flex: 1;
	-}
	+@keyframes shakeError {
	+ 0% {
	+ transform: translateX(0);
	+ }

	-.chat-layout {
	- // Needed for smoother chat navigation in the desktop Safari (otherwise the chat layout "jumps" as the chat opens).
	- overflow: hidden;
	- height: 100%;
	+ 15% {
	+ transform: translateX(0.375rem);
	+ }

	- // Get rid of scrollbar on body as scrolling happens on different element
	- body {
	- overflow: hidden;
	+ 30% {
	+ transform: translateX(-0.375rem);
	}

	- // Ensures the fixed position of the mobile browser bars on scroll up / down events.
	- // Prevents the mobile browser bars from overlapping or hiding the message posting form.
	- @media all and (max-width: 800px) {
	- body {
	- height: 100%;
	- }
	+ 45% {
	+ transform: translateX(0.375rem);
	+ }

	- #app {
	- height: 100%;
	- overflow: hidden;
	- min-height: auto;
	- }
	+ 60% {
	+ transform: translateX(-0.375rem);
	+ }

	- #app_bg_wrapper {
	- overflow: hidden;
	- }
	+ 75% {
	+ transform: translateX(0.375rem);
	+ }

	- .main {
	- overflow: hidden;
	- height: 100%;
	- }
	+ 90% {
	+ transform: translateX(-0.375rem);
	+ }

	- #content {
	- padding-top: 0;
	- height: 100%;
	- overflow: visible;
	- }
	+ 100% {
	+ transform: translateX(0);
	}
	}
	+
	+// Vue transitions
	+.fade-enter-active,
	+.fade-leave-active {
	+ transition: opacity 0.2s;
	+}
	+
	+.fade-enter-from,
	+.fade-leave-active {
	+ opacity: 0;
	+}
	diff --git a/src/App.vue b/src/App.vue
	index b18b33089c..5b4489729a 100644
	--- a/src/App.vue
	+++ b/src/App.vue
	@@ -1,68 +1,62 @@
	<template>
	<div
	id="app-loaded"
	:style="bgStyle"
	>
	<div
	id="app_bg_wrapper"
	class="app-bg-wrapper"
	/>
	- <MobileNav v-if="isMobileLayout" />
	+ <MobileNav v-if="layoutType === 'mobile'" />
	<DesktopNav v-else />
	- <div class="app-bg-wrapper app-container-wrapper" />
	+ <notifications v-if="currentUser" />
	<div
	id="content"
	- class="container underlay"
	+ class="app-layout container"
	+ :class="classes"
	>
	- <div
	- class="sidebar-flexer mobile-hidden"
	- :style="sidebarAlign"
	- >
	- <div class="sidebar-bounds">
	- <div class="sidebar-scroller">
	- <div class="sidebar">
	- <user-panel />
	- <div v-if="!isMobileLayout">
	- <nav-panel />
	- <instance-specific-panel v-if="showInstanceSpecificPanel" />
	- <features-panel v-if="!currentUser && showFeaturesPanel" />
	- <who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
	- <notifications v-if="currentUser" />
	- </div>
	- </div>
	- </div>
	- </div>
	+ <div class="underlay"/>
	+ <div id="sidebar" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }">
	+ <user-panel />
	+ <template v-if="layoutType !== 'mobile'">
	+ <nav-panel />
	+ <instance-specific-panel v-if="showInstanceSpecificPanel" />
	+ <features-panel v-if="!currentUser && showFeaturesPanel" />
	+ <who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
	+ <div id="notifs-sidebar" />
	+ </template>
	</div>
	- <div class="main">
	+ <div id="main-scroller" class="column main" :class="{ '-full-height': isChats }">
	<div
	v-if="!currentUser"
	class="login-hint panel panel-default"
	>
	<router-link
	:to="{ name: 'login' }"
	class="panel-body"
	>
	{{ $t("login.hint") }}
	</router-link>
	</div>
	<router-view />
	</div>
	- <media-modal />
	+ <div id="notifs-column" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }"/>
	</div>
	+ <media-modal />
	<shout-panel
	v-if="currentUser && shout && !hideShoutbox"
	:floating="true"
	class="floating-shout mobile-hidden"
	- :class="{ 'left': shoutboxPosition }"
	+ :class="{ '-left': shoutboxPosition }"
	/>
	<MobilePostStatusButton />
	<UserReportingModal />
	<PostStatusModal />
	<SettingsModal />
	<div id="modal" />
	<GlobalNoticeList />
	</div>
	</template>

	<script src="./App.js"></script>
	<style lang="scss" src="./App.scss"></style>
	diff --git a/src/boot/after_store.js b/src/boot/after_store.js
	index 768327084f..f655c38f04 100644
	--- a/src/boot/after_store.js
	+++ b/src/boot/after_store.js
	@@ -1,404 +1,404 @@
	import { createApp } from 'vue'
	import { createRouter, createWebHistory } from 'vue-router'
	import vClickOutside from 'click-outside-vue3'

	import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'

	import App from '../App.vue'
	import routes from './routes'
	import VBodyScrollLock from 'src/directives/body_scroll_lock'

	-import { windowWidth } from '../services/window_utils/window_utils'
	+import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
	import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
	import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
	import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
	import { applyTheme } from '../services/style_setter/style_setter.js'
	import FaviconService from '../services/favicon_service/favicon_service.js'

	let staticInitialResults = null

	const parsedInitialResults = () => {
	if (!document.getElementById('initial-results')) {
	return null
	}
	if (!staticInitialResults) {
	staticInitialResults = JSON.parse(document.getElementById('initial-results').textContent)
	}
	return staticInitialResults
	}

	const decodeUTF8Base64 = (data) => {
	const rawData = atob(data)
	const array = Uint8Array.from([...rawData].map((char) => char.charCodeAt(0)))
	const text = new TextDecoder().decode(array)
	return text
	}

	const preloadFetch = async (request) => {
	const data = parsedInitialResults()
	if (!data \|\| !data[request]) {
	return window.fetch(request)
	}
	const decoded = decodeUTF8Base64(data[request])
	const requestData = JSON.parse(decoded)
	return {
	ok: true,
	json: () => requestData,
	text: () => requestData
	}
	}

	const getInstanceConfig = async ({ store }) => {
	try {
	const res = await preloadFetch('/api/v1/instance')
	if (res.ok) {
	const data = await res.json()
	const textlimit = data.max_toot_chars
	const vapidPublicKey = data.pleroma.vapid_public_key

	store.dispatch('setInstanceOption', { name: 'textlimit', value: textlimit })
	store.dispatch('setInstanceOption', { name: 'accountApprovalRequired', value: data.approval_required })

	if (vapidPublicKey) {
	store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey })
	}
	} else {
	throw (res)
	}
	} catch (error) {
	console.error('Could not load instance config, potentially fatal')
	console.error(error)
	}
	}

	const getBackendProvidedConfig = async ({ store }) => {
	try {
	const res = await window.fetch('/api/pleroma/frontend_configurations')
	if (res.ok) {
	const data = await res.json()
	return data.pleroma_fe
	} else {
	throw (res)
	}
	} catch (error) {
	console.error('Could not load backend-provided frontend config, potentially fatal')
	console.error(error)
	}
	}

	const getStaticConfig = async () => {
	try {
	const res = await window.fetch('/static/config.json')
	if (res.ok) {
	return res.json()
	} else {
	throw (res)
	}
	} catch (error) {
	console.warn('Failed to load static/config.json, continuing without it.')
	console.warn(error)
	return {}
	}
	}

	const setSettings = async ({ apiConfig, staticConfig, store }) => {
	const overrides = window.___pleromafe_dev_overrides \|\| {}
	const env = window.___pleromafe_mode.NODE_ENV

	// This takes static config and overrides properties that are present in apiConfig
	let config = {}
	if (overrides.staticConfigPreference && env === 'development') {
	console.warn('OVERRIDING API CONFIG WITH STATIC CONFIG')
	config = Object.assign({}, apiConfig, staticConfig)
	} else {
	config = Object.assign({}, staticConfig, apiConfig)
	}

	const copyInstanceOption = (name) => {
	store.dispatch('setInstanceOption', { name, value: config[name] })
	}

	copyInstanceOption('nsfwCensorImage')
	copyInstanceOption('background')
	copyInstanceOption('hidePostStats')
	copyInstanceOption('hideBotIndication')
	copyInstanceOption('hideUserStats')
	copyInstanceOption('hideFilteredStatuses')
	copyInstanceOption('logo')

	store.dispatch('setInstanceOption', {
	name: 'logoMask',
	value: typeof config.logoMask === 'undefined'
	? true
	: config.logoMask
	})

	store.dispatch('setInstanceOption', {
	name: 'logoMargin',
	value: typeof config.logoMargin === 'undefined'
	? 0
	: config.logoMargin
	})
	copyInstanceOption('logoLeft')
	store.commit('authFlow/setInitialStrategy', config.loginMethod)

	copyInstanceOption('redirectRootNoLogin')
	copyInstanceOption('redirectRootLogin')
	copyInstanceOption('showInstanceSpecificPanel')
	copyInstanceOption('minimalScopesMode')
	copyInstanceOption('hideMutedPosts')
	copyInstanceOption('collapseMessageWithSubject')
	copyInstanceOption('scopeCopy')
	copyInstanceOption('subjectLineBehavior')
	copyInstanceOption('postContentType')
	copyInstanceOption('alwaysShowSubjectInput')
	copyInstanceOption('showFeaturesPanel')
	copyInstanceOption('hideSitename')
	copyInstanceOption('sidebarRight')

	return store.dispatch('setTheme', config['theme'])
	}

	const getTOS = async ({ store }) => {
	try {
	const res = await window.fetch('/static/terms-of-service.html')
	if (res.ok) {
	const html = await res.text()
	store.dispatch('setInstanceOption', { name: 'tos', value: html })
	} else {
	throw (res)
	}
	} catch (e) {
	console.warn("Can't load TOS")
	console.warn(e)
	}
	}

	const getInstancePanel = async ({ store }) => {
	try {
	const res = await preloadFetch('/instance/panel.html')
	if (res.ok) {
	const html = await res.text()
	store.dispatch('setInstanceOption', { name: 'instanceSpecificPanelContent', value: html })
	} else {
	throw (res)
	}
	} catch (e) {
	console.warn("Can't load instance panel")
	console.warn(e)
	}
	}

	const getStickers = async ({ store }) => {
	try {
	const res = await window.fetch('/static/stickers.json')
	if (res.ok) {
	const values = await res.json()
	const stickers = (await Promise.all(
	Object.entries(values).map(async ([name, path]) => {
	const resPack = await window.fetch(path + 'pack.json')
	var meta = {}
	if (resPack.ok) {
	meta = await resPack.json()
	}
	return {
	pack: name,
	path,
	meta
	}
	})
	)).sort((a, b) => {
	return a.meta.title.localeCompare(b.meta.title)
	})
	store.dispatch('setInstanceOption', { name: 'stickers', value: stickers })
	} else {
	throw (res)
	}
	} catch (e) {
	console.warn("Can't load stickers")
	console.warn(e)
	}
	}

	const getAppSecret = async ({ store }) => {
	const { state, commit } = store
	const { oauth, instance } = state
	return getOrCreateApp({ ...oauth, instance: instance.server, commit })
	.then((app) => getClientToken({ ...app, instance: instance.server }))
	.then((token) => {
	commit('setAppToken', token.access_token)
	commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
	})
	}

	const resolveStaffAccounts = ({ store, accounts }) => {
	const nicknames = accounts.map(uri => uri.split('/').pop())
	store.dispatch('setInstanceOption', { name: 'staffAccounts', value: nicknames })
	}

	const getNodeInfo = async ({ store }) => {
	try {
	const res = await preloadFetch('/nodeinfo/2.0.json')
	if (res.ok) {
	const data = await res.json()
	const metadata = data.metadata
	const features = metadata.features
	store.dispatch('setInstanceOption', { name: 'name', value: metadata.nodeName })
	store.dispatch('setInstanceOption', { name: 'registrationOpen', value: data.openRegistrations })
	store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
	store.dispatch('setInstanceOption', { name: 'safeDM', value: features.includes('safe_dm_mentions') })
	store.dispatch('setInstanceOption', { name: 'shoutAvailable', value: features.includes('chat') })
	store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') })
	store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
	store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
	store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits })
	store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled })

	const uploadLimits = metadata.uploadLimits
	store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadLimits.general) })
	store.dispatch('setInstanceOption', { name: 'avatarlimit', value: parseInt(uploadLimits.avatar) })
	store.dispatch('setInstanceOption', { name: 'backgroundlimit', value: parseInt(uploadLimits.background) })
	store.dispatch('setInstanceOption', { name: 'bannerlimit', value: parseInt(uploadLimits.banner) })
	store.dispatch('setInstanceOption', { name: 'fieldsLimits', value: metadata.fieldsLimits })

	store.dispatch('setInstanceOption', { name: 'restrictedNicknames', value: metadata.restrictedNicknames })
	store.dispatch('setInstanceOption', { name: 'postFormats', value: metadata.postFormats })

	const suggestions = metadata.suggestions
	store.dispatch('setInstanceOption', { name: 'suggestionsEnabled', value: suggestions.enabled })
	store.dispatch('setInstanceOption', { name: 'suggestionsWeb', value: suggestions.web })

	const software = data.software
	store.dispatch('setInstanceOption', { name: 'backendVersion', value: software.version })
	store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: software.name === 'pleroma' })

	const priv = metadata.private
	store.dispatch('setInstanceOption', { name: 'private', value: priv })

	const frontendVersion = window.___pleromafe_commit_hash
	store.dispatch('setInstanceOption', { name: 'frontendVersion', value: frontendVersion })

	const federation = metadata.federation

	store.dispatch('setInstanceOption', {
	name: 'tagPolicyAvailable',
	value: typeof federation.mrf_policies === 'undefined'
	? false
	: metadata.federation.mrf_policies.includes('TagPolicy')
	})

	store.dispatch('setInstanceOption', { name: 'federationPolicy', value: federation })
	store.dispatch('setInstanceOption', {
	name: 'federating',
	value: typeof federation.enabled === 'undefined'
	? true
	: federation.enabled
	})

	const accountActivationRequired = metadata.accountActivationRequired
	store.dispatch('setInstanceOption', { name: 'accountActivationRequired', value: accountActivationRequired })

	const accounts = metadata.staffAccounts
	resolveStaffAccounts({ store, accounts })
	} else {
	throw (res)
	}
	} catch (e) {
	console.warn('Could not load nodeinfo')
	console.warn(e)
	}
	}

	const setConfig = async ({ store }) => {
	// apiConfig, staticConfig
	const configInfos = await Promise.all([getBackendProvidedConfig({ store }), getStaticConfig()])
	const apiConfig = configInfos[0]
	const staticConfig = configInfos[1]

	await setSettings({ store, apiConfig, staticConfig }).then(getAppSecret({ store }))
	}

	const checkOAuthToken = async ({ store }) => {
	return new Promise(async (resolve, reject) => {
	if (store.getters.getUserToken()) {
	try {
	await store.dispatch('loginUser', store.getters.getUserToken())
	} catch (e) {
	console.error(e)
	}
	}
	resolve()
	})
	}

	const afterStoreSetup = async ({ store, i18n }) => {
	- const width = windowWidth()
	- store.dispatch('setMobileLayout', width <= 800)
	+ store.dispatch('setLayoutWidth', windowWidth())
	+ store.dispatch('setLayoutHeight', windowHeight())

	FaviconService.initFaviconService()

	const overrides = window.___pleromafe_dev_overrides \|\| {}
	const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
	store.dispatch('setInstanceOption', { name: 'server', value: server })

	await setConfig({ store })

	const { customTheme, customThemeSource } = store.state.config
	const { theme } = store.state.instance
	const customThemePresent = customThemeSource \|\| customTheme

	if (customThemePresent) {
	if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
	applyTheme(customThemeSource)
	} else {
	applyTheme(customTheme)
	}
	} else if (theme) {
	// do nothing, it will load asynchronously
	} else {
	console.error('Failed to load any theme!')
	}

	// Now we can try getting the server settings and logging in
	// Most of these are preloaded into the index.html so blocking is minimized
	await Promise.all([
	checkOAuthToken({ store }),
	getInstancePanel({ store }),
	getNodeInfo({ store }),
	getInstanceConfig({ store })
	])

	// Start fetching things that don't need to block the UI
	store.dispatch('fetchMutes')
	getTOS({ store })
	getStickers({ store })

	const router = createRouter({
	history: createWebHistory(),
	routes: routes(store),
	scrollBehavior: (to, _from, savedPosition) => {
	if (to.matched.some(m => m.meta.dontScroll)) {
	return false
	}
	return savedPosition \|\| { left: 0, top: 0 }
	}
	})

	const app = createApp(App)

	app.use(router)
	app.use(store)
	app.use(i18n)

	app.use(vClickOutside)
	app.use(VBodyScrollLock)

	app.component('FAIcon', FontAwesomeIcon)
	app.component('FALayers', FontAwesomeLayers)

	app.mount('#app')

	return app
	}

	export default afterStoreSetup
	diff --git a/src/components/about/about.vue b/src/components/about/about.vue
	index 518f6184da..5d5d647955 100644
	--- a/src/components/about/about.vue
	+++ b/src/components/about/about.vue
	@@ -1,14 +1,14 @@
	<template>
	- <div class="sidebar">
	+ <div class="column-inner">
	<instance-specific-panel v-if="showInstanceSpecificPanel" />
	<staff-panel />
	<terms-of-service-panel />
	<MRFTransparencyPanel />
	<features-panel v-if="showFeaturesPanel" />
	</div>
	</template>

	<script src="./about.js" ></script>

	<style lang="scss">
	</style>
	diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
	index 1e31151ca6..c35d01afb9 100644
	--- a/src/components/account_actions/account_actions.vue
	+++ b/src/components/account_actions/account_actions.vue
	@@ -1,93 +1,89 @@
	<template>
	<div class="AccountActions">
	<Popover
	trigger="click"
	placement="bottom"
	:bound-to="{ x: 'container' }"
	remove-padding
	>
	<template v-slot:content>
	<div class="dropdown-menu">
	<template v-if="relationship.following">
	<button
	v-if="relationship.showing_reblogs"
	class="btn button-default dropdown-item"
	@click="hideRepeats"
	>
	{{ $t('user_card.hide_repeats') }}
	</button>
	<button
	v-if="!relationship.showing_reblogs"
	class="btn button-default dropdown-item"
	@click="showRepeats"
	>
	{{ $t('user_card.show_repeats') }}
	</button>
	<div
	role="separator"
	class="dropdown-divider"
	/>
	</template>
	<button
	v-if="relationship.blocking"
	class="btn button-default btn-block dropdown-item"
	@click="unblockUser"
	>
	{{ $t('user_card.unblock') }}
	</button>
	<button
	v-else
	class="btn button-default btn-block dropdown-item"
	@click="blockUser"
	>
	{{ $t('user_card.block') }}
	</button>
	<button
	class="btn button-default btn-block dropdown-item"
	@click="reportUser"
	>
	{{ $t('user_card.report') }}
	</button>
	<button
	v-if="pleromaChatMessagesAvailable"
	class="btn button-default btn-block dropdown-item"
	@click="openChat"
	>
	{{ $t('user_card.message') }}
	</button>
	</div>
	</template>
	<template v-slot:trigger>
	<button class="button-unstyled ellipsis-button">
	<FAIcon
	class="icon"
	icon="ellipsis-v"
	/>
	</button>
	</template>
	</Popover>
	</div>
	</template>

	<script src="./account_actions.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';
	.AccountActions {
	- button.dropdown-item {
	- margin-left: 0;
	- }
	-
	.ellipsis-button {
	width: 2.5em;
	margin: -0.5em 0;
	padding: 0.5em 0;
	text-align: center;

	&:not(:hover) .icon {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}
	}
	}
	</style>
	diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
	index dfda15bf8d..b2dea98d50 100644
	--- a/src/components/attachment/attachment.scss
	+++ b/src/components/attachment/attachment.scss
	@@ -1,268 +1,268 @@
	@import '../../_variables.scss';

	.Attachment {
	display: inline-flex;
	flex-direction: column;
	position: relative;
	align-self: flex-start;
	line-height: 0;
	height: 100%;
	border-style: solid;
	border-width: 1px;
	border-radius: $fallback--attachmentRadius;
	border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);

	.attachment-wrapper {
	flex: 1 1 auto;
	height: 100%;
	position: relative;
	overflow: hidden;
	}

	.description-container {
	flex: 0 1 0;
	display: flex;
	padding-top: 0.5em;
	z-index: 1;

	p {
	flex: 1;
	text-align: center;
	line-height: 1.5;
	padding: 0.5em;
	margin: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	}

	&.-static {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding-top: 0;
	background: var(--popover);
	box-shadow: var(--popupShadow);
	}
	}

	.description-field {
	flex: 1;
	min-width: 0;
	}

	& .placeholder-container,
	& .image-container,
	& .audio-container,
	& .video-container,
	& .flash-container,
	& .oembed-container {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
	}

	.image-container {
	.image {
	width: 100%;
	height: 100%;
	}
	}

	& .flash-container,
	& .video-container {
	& .flash,
	& video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	align-self: center;
	}
	}

	.audio-container {
	display: flex;
	align-items: flex-end;

	audio {
	width: 100%;
	height: 100%;
	}
	}

	.placeholder-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 0.5em;
	}


	.play-icon {
	position: absolute;
	font-size: 64px;
	top: calc(50% - 32px);
	left: calc(50% - 32px);
	color: rgba(255, 255, 255, 0.75);
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);

	&::before {
	margin: 0;
	}
	}

	.attachment-buttons {
	display: flex;
	position: absolute;
	right: 0;
	top: 0;
	margin-top: 0.5em;
	margin-right: 0.5em;
	z-index: 1;

	.attachment-button {
	padding: 0;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	text-align: center;
	width: 2em;
	height: 2em;
	margin-left: 0.5em;
	font-size: 1.25em;
	// TODO: theming? hard to theme with unknown background image color
	background: rgba(230, 230, 230, 0.7);

	.svg-inline--fa {
	color: rgba(0, 0, 0, 0.6);
	}

	&:hover .svg-inline--fa {
	color: rgba(0, 0, 0, 0.9);
	}
	}
	}

	.oembed-container {
	line-height: 1.2em;
	flex: 1 0 100%;
	width: 100%;
	margin-right: 15px;
	display: flex;

	img {
	width: 100%;
	}

	.image {
	flex: 1;
	img {
	border: 0px;
	border-radius: 5px;
	height: 100%;
	object-fit: cover;
	}
	}

	.text {
	flex: 2;
	margin: 8px;
	word-break: break-all;
	h1 {
	- font-size: 14px;
	+ font-size: 1rem;
	margin: 0px;
	}
	}
	}

	&.-size-small {
	.play-icon {
	zoom: 0.5;
	opacity: 0.7;
	}

	.attachment-buttons {
	zoom: 0.7;
	opacity: 0.5;
	}
	}

	&.-editable {
	padding: 0.5em;

	& .description-container,
	& .attachment-buttons {
	margin: 0;
	}
	}

	&.-placeholder {
	display: inline-block;
	color: $fallback--link;
	color: var(--postLink, $fallback--link);
	overflow: hidden;
	white-space: nowrap;
	height: auto;
	line-height: 1.5;

	&:not(.-editable) {
	border: none;
	}

	&.-editable {
	display: flex;
	flex-direction: row;
	align-items: baseline;

	& .description-container,
	& .attachment-buttons {
	margin: 0;
	padding: 0;
	position: relative;
	}

	.description-container {
	flex: 1;
	padding-left: 0.5em;
	}

	.attachment-buttons {
	order: 99;
	align-self: center;
	}
	}

	a {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	svg {
	color: inherit;
	}
	}

	&.-loading {
	cursor: progress;
	}

	&.-contain-fit {
	img,
	canvas {
	object-fit: contain;
	}
	}

	&.-cover-fit {
	img,
	canvas {
	object-fit: cover;
	}
	}
	}
	diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
	index aef1171205..9f6e64e3fb 100644
	--- a/src/components/chat/chat.js
	+++ b/src/components/chat/chat.js
	@@ -1,409 +1,346 @@
	import _ from 'lodash'
	import { WSConnectionStatus } from '../../services/api/api.service.js'
	import { mapGetters, mapState } from 'vuex'
	import ChatMessage from '../chat_message/chat_message.vue'
	import PostStatusForm from '../post_status_form/post_status_form.vue'
	import ChatTitle from '../chat_title/chat_title.vue'
	import chatService from '../../services/chat_service/chat_service.js'
	import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
	-import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight, isScrollable } from './chat_layout_utils.js'
	+import { getScrollPosition, getNewTopPosition, isBottomedOut, isScrollable } from './chat_layout_utils.js'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faChevronDown,
	faChevronLeft
	} from '@fortawesome/free-solid-svg-icons'
	import { buildFakeMessage } from '../../services/chat_utils/chat_utils.js'

	library.add(
	faChevronDown,
	faChevronLeft
	)

	const BOTTOMED_OUT_OFFSET = 10
	-const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
	+const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 10
	const SAFE_RESIZE_TIME_OFFSET = 100
	const MARK_AS_READ_DELAY = 1500
	const MAX_RETRIES = 10

	const Chat = {
	components: {
	ChatMessage,
	ChatTitle,
	PostStatusForm
	},
	data () {
	return {
	jumpToBottomButtonVisible: false,
	hoveredMessageChainId: undefined,
	lastScrollPosition: {},
	scrollableContainerHeight: '100%',
	errorLoadingChat: false,
	messageRetriers: {}
	}
	},
	created () {
	this.startFetching()
	- window.addEventListener('resize', this.handleLayoutChange)
	+ window.addEventListener('resize', this.handleResize)
	},
	mounted () {
	window.addEventListener('scroll', this.handleScroll)
	if (typeof document.hidden !== 'undefined') {
	document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
	}

	this.$nextTick(() => {
	- this.updateScrollableContainerHeight()
	this.handleResize()
	})
	- this.setChatLayout()
	},
	unmounted () {
	window.removeEventListener('scroll', this.handleScroll)
	- window.removeEventListener('resize', this.handleLayoutChange)
	- this.unsetChatLayout()
	if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
	this.$store.dispatch('clearCurrentChat')
	},
	computed: {
	recipient () {
	return this.currentChat && this.currentChat.account
	},
	recipientId () {
	return this.$route.params.recipient_id
	},
	formPlaceholder () {
	if (this.recipient) {
	return this.$t('chats.message_user', { nickname: this.recipient.screen_name_ui })
	} else {
	return ''
	}
	},
	chatViewItems () {
	return chatService.getView(this.currentChatMessageService)
	},
	newMessageCount () {
	return this.currentChatMessageService && this.currentChatMessageService.newMessageCount
	},
	streamingEnabled () {
	return this.mergedConfig.useStreamingApi && this.mastoUserSocketStatus === WSConnectionStatus.JOINED
	},
	...mapGetters([
	'currentChat',
	'currentChatMessageService',
	'findOpenedChatByRecipientId',
	'mergedConfig'
	]),
	...mapState({
	backendInteractor: state => state.api.backendInteractor,
	mastoUserSocketStatus: state => state.api.mastoUserSocketStatus,
	- mobileLayout: state => state.interface.mobileLayout,
	- layoutHeight: state => state.interface.layoutHeight,
	+ mobileLayout: state => state.interface.layoutType === 'mobile',
	currentUser: state => state.users.currentUser
	})
	},
	watch: {
	chatViewItems () {
	// We don't want to scroll to the bottom on a new message when the user is viewing older messages.
	// Therefore we need to know whether the scroll position was at the bottom before the DOM update.
	const bottomedOutBeforeUpdate = this.bottomedOut(BOTTOMED_OUT_OFFSET)
	this.$nextTick(() => {
	if (bottomedOutBeforeUpdate) {
	this.scrollDown()
	}
	})
	},
	'$route': function () {
	this.startFetching()
	},
	- layoutHeight () {
	- this.handleResize({ expand: true })
	- },
	mastoUserSocketStatus (newValue) {
	if (newValue === WSConnectionStatus.JOINED) {
	this.fetchChat({ isFirstFetch: true })
	}
	}
	},
	methods: {
	// Used to animate the avatar near the first message of the message chain when any message belonging to the chain is hovered
	onMessageHover ({ isHovered, messageChainId }) {
	this.hoveredMessageChainId = isHovered ? messageChainId : undefined
	},
	onFilesDropped () {
	this.$nextTick(() => {
	this.handleResize()
	- this.updateScrollableContainerHeight()
	})
	},
	handleVisibilityChange () {
	this.$nextTick(() => {
	if (!document.hidden && this.bottomedOut(BOTTOMED_OUT_OFFSET)) {
	this.scrollDown({ forceRead: true })
	}
	})
	},
	- setChatLayout () {
	- // This is a hacky way to adjust the global layout to the mobile chat (without modifying the rest of the app).
	- // This layout prevents empty spaces from being visible at the bottom
	- // of the chat on iOS Safari (`safe-area-inset`) when
	- // - the on-screen keyboard appears and the user starts typing
	- // - the user selects the text inside the input area
	- // - the user selects and deletes the text that is multiple lines long
	- // TODO: unify the chat layout with the global layout.
	- let html = document.querySelector('html')
	- if (html) {
	- html.classList.add('chat-layout')
	- }
	-
	- this.$nextTick(() => {
	- this.updateScrollableContainerHeight()
	- })
	- },
	- unsetChatLayout () {
	- let html = document.querySelector('html')
	- if (html) {
	- html.classList.remove('chat-layout')
	- }
	- },
	- handleLayoutChange () {
	- this.$nextTick(() => {
	- this.updateScrollableContainerHeight()
	- this.scrollDown()
	- })
	- },
	- // Ensures the proper position of the posting form in the mobile layout (the mobile browser panel does not overlap or hide it)
	- updateScrollableContainerHeight () {
	- const header = this.$refs.header
	- const footer = this.$refs.footer
	- const inner = this.mobileLayout ? window.document.body : this.$refs.inner
	- this.scrollableContainerHeight = scrollableContainerHeight(inner, header, footer) + 'px'
	- },
	- // Preserves the scroll position when OSK appears or the posting form changes its height.
	+ // "Sticks" scroll to bottom instead of top, helps with OSK resizing the viewport
	handleResize (opts = {}) {
	const { expand = false, delayed = false } = opts

	if (delayed) {
	setTimeout(() => {
	this.handleResize({ ...opts, delayed: false })
	}, SAFE_RESIZE_TIME_OFFSET)
	return
	}

	this.$nextTick(() => {
	- this.updateScrollableContainerHeight()
	-
	- const { offsetHeight = undefined } = this.lastScrollPosition
	- this.lastScrollPosition = getScrollPosition(this.$refs.scrollable)
	-
	+ const { offsetHeight = undefined } = getScrollPosition()
	const diff = this.lastScrollPosition.offsetHeight - offsetHeight
	- if (diff < 0 \|\| (!this.bottomedOut() && expand)) {
	+ if (diff !== 0 \|\| (!this.bottomedOut() && expand)) {
	this.$nextTick(() => {
	- this.updateScrollableContainerHeight()
	- this.$refs.scrollable.scrollTo({
	- top: this.$refs.scrollable.scrollTop - diff,
	- left: 0
	- })
	+ window.scrollTo({ top: window.scrollY + diff })
	})
	}
	+ this.lastScrollPosition = getScrollPosition()
	})
	},
	scrollDown (options = {}) {
	const { behavior = 'auto', forceRead = false } = options
	- const scrollable = this.$refs.scrollable
	- if (!scrollable) { return }
	this.$nextTick(() => {
	- scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior })
	+ window.scrollTo({ top: document.documentElement.scrollHeight, behavior })
	})
	if (forceRead) {
	this.readChat()
	}
	},
	readChat () {
	if (!(this.currentChatMessageService && this.currentChatMessageService.maxId)) { return }
	if (document.hidden) { return }
	const lastReadId = this.currentChatMessageService.maxId
	this.$store.dispatch('readChat', {
	id: this.currentChat.id,
	lastReadId
	})
	},
	bottomedOut (offset) {
	- return isBottomedOut(this.$refs.scrollable, offset)
	+ return isBottomedOut(offset)
	},
	reachedTop () {
	- const scrollable = this.$refs.scrollable
	- return scrollable && scrollable.scrollTop <= 0
	+ return window.scrollY <= 0
	},
	cullOlderCheck () {
	window.setTimeout(() => {
	if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
	this.$store.dispatch('cullOlderMessages', this.currentChatMessageService.chatId)
	}
	}, 5000)
	},
	handleScroll: _.throttle(function () {
	if (!this.currentChat) { return }

	if (this.reachedTop()) {
	this.fetchChat({ maxId: this.currentChatMessageService.minId })
	} else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
	this.jumpToBottomButtonVisible = false
	this.cullOlderCheck()
	if (this.newMessageCount > 0) {
	// Use a delay before marking as read to prevent situation where new messages
	// arrive just as you're leaving the view and messages that you didn't actually
	// get to see get marked as read.
	window.setTimeout(() => {
	// Don't mark as read if the element doesn't exist, user has left chat view
	if (this.$el) this.readChat()
	}, MARK_AS_READ_DELAY)
	}
	} else {
	this.jumpToBottomButtonVisible = true
	}
	}, 200),
	handleScrollUp (positionBeforeLoading) {
	- const positionAfterLoading = getScrollPosition(this.$refs.scrollable)
	- this.$refs.scrollable.scrollTo({
	- top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
	- left: 0
	+ const positionAfterLoading = getScrollPosition()
	+ window.scrollTo({
	+ top: getNewTopPosition(positionBeforeLoading, positionAfterLoading)
	})
	},
	fetchChat ({ isFirstFetch = false, fetchLatest = false, maxId }) {
	const chatMessageService = this.currentChatMessageService
	if (!chatMessageService) { return }
	if (fetchLatest && this.streamingEnabled) { return }

	const chatId = chatMessageService.chatId
	const fetchOlderMessages = !!maxId
	const sinceId = fetchLatest && chatMessageService.maxId

	return this.backendInteractor.chatMessages({ id: chatId, maxId, sinceId })
	.then((messages) => {
	// Clear the current chat in case we're recovering from a ws connection loss.
	if (isFirstFetch) {
	chatService.clear(chatMessageService)
	}

	- const positionBeforeUpdate = getScrollPosition(this.$refs.scrollable)
	+ const positionBeforeUpdate = getScrollPosition()
	this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => {
	this.$nextTick(() => {
	if (fetchOlderMessages) {
	this.handleScrollUp(positionBeforeUpdate)
	}

	- if (isFirstFetch) {
	- this.updateScrollableContainerHeight()
	- }
	-
	// In vertical screens, the first batch of fetched messages may not always take the
	// full height of the scrollable container.
	// If this is the case, we want to fetch the messages until the scrollable container
	// is fully populated so that the user has the ability to scroll up and load the history.
	- if (!isScrollable(this.$refs.scrollable) && messages.length > 0) {
	+ if (!isScrollable() && messages.length > 0) {
	this.fetchChat({ maxId: this.currentChatMessageService.minId })
	}
	})
	})
	})
	},
	async startFetching () {
	let chat = this.findOpenedChatByRecipientId(this.recipientId)
	if (!chat) {
	try {
	chat = await this.backendInteractor.getOrCreateChat({ accountId: this.recipientId })
	} catch (e) {
	console.error('Error creating or getting a chat', e)
	this.errorLoadingChat = true
	}
	}
	if (chat) {
	this.$nextTick(() => {
	this.scrollDown({ forceRead: true })
	})
	this.$store.dispatch('addOpenedChat', { chat })
	this.doStartFetching()
	}
	},
	doStartFetching () {
	this.$store.dispatch('startFetchingCurrentChat', {
	fetcher: () => promiseInterval(() => this.fetchChat({ fetchLatest: true }), 5000)
	})
	this.fetchChat({ isFirstFetch: true })
	},
	handleAttachmentPosting () {
	this.$nextTick(() => {
	this.handleResize()
	// When the posting form size changes because of a media attachment, we need an extra resize
	// to account for the potential delay in the DOM update.
	- setTimeout(() => {
	- this.updateScrollableContainerHeight()
	- }, SAFE_RESIZE_TIME_OFFSET)
	this.scrollDown({ forceRead: true })
	})
	},
	sendMessage ({ status, media, idempotencyKey }) {
	const params = {
	id: this.currentChat.id,
	content: status,
	idempotencyKey
	}

	if (media[0]) {
	params.mediaId = media[0].id
	}

	const fakeMessage = buildFakeMessage({
	attachments: media,
	chatId: this.currentChat.id,
	content: status,
	userId: this.currentUser.id,
	idempotencyKey
	})

	this.$store.dispatch('addChatMessages', {
	chatId: this.currentChat.id,
	messages: [fakeMessage]
	}).then(() => {
	this.handleAttachmentPosting()
	})

	return this.doSendMessage({ params, fakeMessage, retriesLeft: MAX_RETRIES })
	},
	doSendMessage ({ params, fakeMessage, retriesLeft = MAX_RETRIES }) {
	if (retriesLeft <= 0) return

	this.backendInteractor.sendChatMessage(params)
	.then(data => {
	this.$store.dispatch('addChatMessages', {
	chatId: this.currentChat.id,
	updateMaxId: false,
	messages: [{ ...data, fakeId: fakeMessage.id }]
	})

	return data
	})
	.catch(error => {
	console.error('Error sending message', error)
	this.$store.dispatch('handleMessageError', {
	chatId: this.currentChat.id,
	fakeId: fakeMessage.id,
	isRetry: retriesLeft !== MAX_RETRIES
	})
	if ((error.statusCode >= 500 && error.statusCode < 600) \|\| error.message === 'Failed to fetch') {
	this.messageRetriers[fakeMessage.id] = setTimeout(() => {
	this.doSendMessage({ params, fakeMessage, retriesLeft: retriesLeft - 1 })
	}, 1000 * (2 ** (MAX_RETRIES - retriesLeft)))
	}
	return {}
	})

	return Promise.resolve(fakeMessage)
	},
	goBack () {
	this.$router.push({ name: 'chats', params: { username: this.currentUser.screen_name } })
	}
	}
	}

	export default Chat
	diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
	index 3a26686c40..f2e154abf2 100644
	--- a/src/components/chat/chat.scss
	+++ b/src/components/chat/chat.scss
	@@ -1,170 +1,108 @@
	.chat-view {
	display: flex;
	- height: calc(100vh - 60px);
	- width: 100%;
	-
	- .chat-title {
	- // prevents chat header jumping on when the user avatar loads
	- height: 28px;
	- }
	+ height: 100%;

	.chat-view-inner {
	height: auto;
	width: 100%;
	overflow: visible;
	display: flex;
	- margin: 0.5em 0.5em 0 0.5em;
	}

	.chat-view-body {
	+ box-sizing: border-box;
	background-color: var(--chatBg, $fallback--bg);
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: visible;
	- min-height: 100%;
	+ min-height: calc(100vh - var(--navbar-height));
	margin: 0 0 0 0;
	border-radius: 10px 10px 0 0;
	border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;

	&::after {
	border-radius: 0;
	}
	}

	- .scrollable-message-list {
	+ .message-list {
	padding: 0 0.8em;
	height: 100%;
	- overflow-y: scroll;
	- overflow-x: hidden;
	display: flex;
	flex-direction: column;
	+ justify-content: end;
	}

	.footer {
	position: sticky;
	bottom: 0;
	+ background-color: $fallback--bg;
	+ background-color: var(--bg, $fallback--bg);
	+ z-index: 1;
	}

	.chat-view-heading {
	- align-items: center;
	- justify-content: space-between;
	- top: 50px;
	- display: flex;
	- z-index: 2;
	- position: sticky;
	- overflow: hidden;
	+ grid-template-columns: auto minmax(50%, 1fr);
	}

	.go-back-button {
	- cursor: pointer;
	- width: 28px;
	text-align: center;
	- padding: 0.6em;
	- margin: -0.6em 0.6em -0.6em -0.6em;
	+ line-height: 1;
	+ height: 100%;
	+ align-self: start;
	+ width: var(--__panel-heading-height-inner);
	}

	.jump-to-bottom-button {
	width: 2.5em;
	height: 2.5em;
	border-radius: 100%;
	position: absolute;
	right: 1.3em;
	top: -3.2em;
	background-color: $fallback--fg;
	background-color: var(--btn, $fallback--fg);
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
	z-index: 10;
	transition: 0.35s all;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
	opacity: 0;
	visibility: hidden;
	cursor: pointer;

	&.visible {
	opacity: 1;
	visibility: visible;
	}

	i {
	font-size: 1em;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}

	.unread-message-count {
	font-size: 0.8em;
	left: 50%;
	margin-top: -1rem;
	padding: 0.1em;
	border-radius: 50px;
	position: absolute;
	}

	.chat-loading-error {
	width: 100%;
	display: flex;
	align-items: flex-end;
	height: 100%;

	.error {
	width: 100%;
	}
	}
	}
	-
	- @media all and (max-width: 800px) {
	- height: 100%;
	- overflow: hidden;
	-
	- .chat-view-inner {
	- overflow: hidden;
	- height: 100%;
	- margin-top: 0;
	- margin-left: 0;
	- margin-right: 0;
	- }
	-
	- .chat-view-body {
	- display: flex;
	- min-height: auto;
	- overflow: hidden;
	- height: 100%;
	- margin: 0;
	- border-radius: 0;
	- }
	-
	- .chat-view-heading {
	- box-sizing: border-box;
	- position: static;
	- z-index: 9999;
	- top: 0;
	- margin-top: 0;
	- border-radius: 0;
	-
	- /* This practically overlays the panel heading color over panel background
	- * color. This is needed because we allow transparent panel background and
	- * it doesn't work well in this "disjointed panel header" case
	- */
	- background:
	- linear-gradient(to top, var(--panel), var(--panel)),
	- linear-gradient(to top, var(--bg), var(--bg));
	- height: 50px;
	- }
	-
	- .scrollable-message-list {
	- display: unset;
	- overflow-y: scroll;
	- overflow-x: hidden;
	- -webkit-overflow-scrolling: touch;
	- }
	-
	- .footer {
	- position: sticky;
	- bottom: auto;
	- }
	- }
	}
	diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
	index 493c5d5ac5..2e7df7bd38 100644
	--- a/src/components/chat/chat.vue
	+++ b/src/components/chat/chat.vue
	@@ -1,103 +1,100 @@
	<template>
	<div class="chat-view">
	<div class="chat-view-inner">
	<div
	- id="nav"
	ref="inner"
	class="panel-default panel chat-view-body"
	>
	<div
	ref="header"
	- class="panel-heading chat-view-heading mobile-hidden"
	+ class="panel-heading -sticky chat-view-heading"
	>
	- <a
	- class="go-back-button"
	+ <button
	+ class="button-unstyled go-back-button"
	@click="goBack"
	>
	<FAIcon
	size="lg"
	icon="chevron-left"
	/>
	- </a>
	+ </button>
	<div class="title text-center">
	<ChatTitle
	:user="recipient"
	:with-avatar="true"
	/>
	</div>
	</div>
	<div
	- ref="scrollable"
	- class="scrollable-message-list"
	+ class="message-list"
	:style="{ height: scrollableContainerHeight }"
	- @scroll="handleScroll"
	>
	<template v-if="!errorLoadingChat">
	<ChatMessage
	v-for="chatViewItem in chatViewItems"
	:key="chatViewItem.id"
	:author="recipient"
	:chat-view-item="chatViewItem"
	:hovered-message-chain="chatViewItem.messageChainId === hoveredMessageChainId"
	@hover="onMessageHover"
	/>
	</template>
	<div
	v-else
	class="chat-loading-error"
	>
	<div class="alert error">
	{{ $t('chats.error_loading_chat') }}
	</div>
	</div>
	</div>
	<div
	ref="footer"
	class="panel-body footer"
	>
	<div
	class="jump-to-bottom-button"
	:class="{ 'visible': jumpToBottomButtonVisible }"
	@click="scrollDown({ behavior: 'smooth' })"
	>
	<span>
	<FAIcon icon="chevron-down" />
	<div
	v-if="newMessageCount"
	class="badge badge-notification unread-chat-count unread-message-count"
	>
	{{ newMessageCount }}
	</div>
	</span>
	</div>
	<PostStatusForm
	:disable-subject="true"
	:disable-scope-selector="true"
	:disable-notice="true"
	:disable-lock-warning="true"
	:disable-polls="true"
	:disable-sensitivity-checkbox="true"
	:disable-submit="errorLoadingChat \|\| !currentChat"
	:disable-preview="true"
	:optimistic-posting="true"
	:post-handler="sendMessage"
	:submit-on-enter="!mobileLayout"
	:preserve-focus="!mobileLayout"
	:auto-focus="!mobileLayout"
	:placeholder="formPlaceholder"
	:file-limit="1"
	max-height="160"
	emoji-picker-placement="top"
	@resize="handleResize"
	/>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script src="./chat.js"></script>
	<style lang="scss">
	@import '../../_variables.scss';
	@import './chat.scss';
	</style>
	diff --git a/src/components/chat/chat_layout_utils.js b/src/components/chat/chat_layout_utils.js
	index 50a933ac71..c187892d9c 100644
	--- a/src/components/chat/chat_layout_utils.js
	+++ b/src/components/chat/chat_layout_utils.js
	@@ -1,33 +1,24 @@
	// Captures a scroll position
	-export const getScrollPosition = (el) => {
	+export const getScrollPosition = () => {
	return {
	- scrollTop: el.scrollTop,
	- scrollHeight: el.scrollHeight,
	- offsetHeight: el.offsetHeight
	+ scrollTop: window.scrollY,
	+ scrollHeight: document.documentElement.scrollHeight,
	+ offsetHeight: window.innerHeight
	}
	}

	// A helper function that is used to keep the scroll position fixed as the new elements are added to the top
	// Takes two scroll positions, before and after the update.
	export const getNewTopPosition = (previousPosition, newPosition) => {
	return previousPosition.scrollTop + (newPosition.scrollHeight - previousPosition.scrollHeight)
	}

	-export const isBottomedOut = (el, offset = 0) => {
	- if (!el) { return }
	- const scrollHeight = el.scrollTop + offset
	- const totalHeight = el.scrollHeight - el.offsetHeight
	+export const isBottomedOut = (offset = 0) => {
	+ const scrollHeight = window.scrollY + offset
	+ const totalHeight = document.documentElement.scrollHeight - window.innerHeight
	return totalHeight <= scrollHeight
	}
	-
	-// Height of the scrollable container. The dynamic height is needed to ensure the mobile browser panel doesn't overlap or hide the posting form.
	-export const scrollableContainerHeight = (inner, header, footer) => {
	- return inner.offsetHeight - header.clientHeight - footer.clientHeight
	-}
	-
	// Returns whether or not the scrollbar is visible.
	-export const isScrollable = (el) => {
	- if (!el) return
	-
	- return el.scrollHeight > el.clientHeight
	+export const isScrollable = () => {
	+ return document.documentElement.scrollHeight > window.innerHeight
	}
	diff --git a/src/components/chat_list/chat_list.vue b/src/components/chat_list/chat_list.vue
	index f98b7ed294..58e8d0b33d 100644
	--- a/src/components/chat_list/chat_list.vue
	+++ b/src/components/chat_list/chat_list.vue
	@@ -1,64 +1,64 @@
	<template>
	<div v-if="isNew">
	<ChatNew @cancel="cancelNewChat" />
	</div>
	<div
	v-else
	class="chat-list panel panel-default"
	>
	- <div class="panel-heading">
	+ <div class="panel-heading -sticky">
	<span class="title">
	{{ $t("chats.chats") }}
	</span>
	<button
	class="button-default"
	@click="newChat"
	>
	{{ $t("chats.new") }}
	</button>
	</div>
	<div class="panel-body">
	<div
	v-if="sortedChatList.length > 0"
	class="timeline"
	>
	<List :items="sortedChatList">
	<template v-slot:item="{item}">
	<ChatListItem
	:key="item.id"
	:compact="false"
	:chat="item"
	/>
	</template>
	</List>
	</div>
	<div
	v-else
	class="emtpy-chat-list-alert"
	>
	<span>{{ $t('chats.empty_chat_list_placeholder') }}</span>
	</div>
	</div>
	</div>
	</template>

	<script src="./chat_list.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.chat-list {
	min-height: 25em;
	margin-bottom: 0;
	}

	.emtpy-chat-list-alert {
	padding: 3em;
	font-size: 1.2em;
	display: flex;
	justify-content: center;
	color: $fallback--text;
	color: var(--faint, $fallback--text);
	}

	</style>
	diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
	index 57332bed49..c6b45c3494 100644
	--- a/src/components/chat_list_item/chat_list_item.scss
	+++ b/src/components/chat_list_item/chat_list_item.scss
	@@ -1,91 +1,91 @@
	.chat-list-item {
	display: flex;
	flex-direction: row;
	padding: 0.75em;
	height: 5em;
	overflow: hidden;
	box-sizing: border-box;
	cursor: pointer;

	:focus {
	outline: none;
	}

	&:hover {
	background-color: var(--selectedPost, $fallback--lightBg);
	box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
	}

	.chat-list-item-left {
	margin-right: 1em;
	}

	.chat-list-item-center {
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	word-wrap: break-word;
	}

	.heading {
	width: 100%;
	display: inline-flex;
	justify-content: space-between;
	line-height: 1em;
	}

	.heading-right {
	white-space: nowrap;
	}

	.name-and-account-name {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	flex-shrink: 1;
	- line-height: 1.4em;
	+ line-height: var(--post-line-height);
	}

	.chat-preview {
	display: inline-flex;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 0.35em 0;
	color: $fallback--text;
	color: var(--faint, $fallback--text);
	width: 100%;
	}

	a {
	color: var(--faintLink, $fallback--link);
	text-decoration: none;
	pointer-events: none;
	}

	&:hover .animated.avatar {
	canvas {
	display: none;
	}
	img {
	visibility: visible;
	}
	}

	.Avatar {
	border-radius: $fallback--avatarAltRadius;
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	}

	.chat-preview-body {
	--emoji-size: 1.4em;
	}

	.time-wrapper {
	- line-height: 1.4em;
	+ line-height: var(--post-line-height);
	}

	.chat-preview-body {
	padding-right: 1em;
	}
	}
	diff --git a/src/components/chat_new/chat_new.scss b/src/components/chat_new/chat_new.scss
	index 5506143d49..240e1a3802 100644
	--- a/src/components/chat_new/chat_new.scss
	+++ b/src/components/chat_new/chat_new.scss
	@@ -1,31 +1,31 @@
	.chat-new {
	.input-wrap {
	display: flex;
	margin: 0.7em 0.5em 0.7em 0.5em;

	input {
	width: 100%;
	}
	}

	.search-icon {
	margin-right: 0.3em;
	}

	.member-list {
	padding-bottom: 0.7rem;
	}

	.basic-user-card:hover {
	cursor: pointer;
	background-color: var(--selectedPost, $fallback--lightBg);
	}

	.go-back-button {
	- cursor: pointer;
	- width: 28px;
	text-align: center;
	- padding: 0.6em;
	- margin: -0.6em 0.6em -0.6em -0.6em;
	+ line-height: 1;
	+ height: 100%;
	+ align-self: start;
	+ width: var(--__panel-heading-height-inner);
	}
	}
	diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
	index f3894a3a9c..bf09a37965 100644
	--- a/src/components/chat_new/chat_new.vue
	+++ b/src/components/chat_new/chat_new.vue
	@@ -1,52 +1,51 @@
	<template>
	<div
	- id="nav"
	class="panel-default panel chat-new"
	>
	<div
	ref="header"
	class="panel-heading"
	>
	- <a
	- class="go-back-button"
	+ <button
	+ class="button-unstyled go-back-button"
	@click="goBack"
	>
	<FAIcon
	size="lg"
	icon="chevron-left"
	/>
	- </a>
	+ </button>
	</div>
	<div class="input-wrap">
	<div class="input-search">
	<FAIcon
	class="search-icon fa-scale-110 fa-old-padding"
	icon="search"
	/>
	</div>
	<input
	ref="search"
	v-model="query"
	placeholder="Search people"
	@input="onInput"
	>
	</div>
	<div class="member-list">
	<div
	v-for="user in availableUsers"
	:key="user.id"
	class="member"
	>
	<div @click.capture.prevent="goToChat(user)">
	<BasicUserCard :user="user" />
	</div>
	</div>
	</div>
	</div>
	</template>

	<script src="./chat_new.js"></script>
	<style lang="scss">
	@import '../../_variables.scss';
	@import './chat_new.scss';
	</style>
	diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
	index f4706cafdc..7f6aaaa418 100644
	--- a/src/components/chat_title/chat_title.vue
	+++ b/src/components/chat_title/chat_title.vue
	@@ -1,62 +1,65 @@
	<template>
	<div
	class="chat-title"
	:title="title"
	>
	<router-link
	+ class="avatar-container"
	v-if="withAvatar && user"
	:to="getUserProfileLink(user)"
	>
	<UserAvatar
	+ class="titlebar-avatar"
	:user="user"
	- width="23px"
	- height="23px"
	/>
	</router-link>
	<RichContent
	v-if="user"
	class="username"
	- :title="'@'+user.screen_name_ui"
	+ :title="'@'+(user && user.screen_name_ui)"
	:html="htmlTitle"
	:emoji="user.emoji \|\| []"
	/>
	</div>
	</template>

	<script src="./chat_title.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.chat-title {
	display: flex;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	- align-items: center;

	--emoji-size: 14px;

	.username {
	max-width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: inline;
	word-wrap: break-word;
	overflow: hidden;
	}

	- .Avatar {
	- width: 23px;
	- height: 23px;
	- margin-right: 0.5em;
	+ .avatar-container {
	+ align-self: center;
	+ line-height: 1;
	+ }

	+ .titlebar-avatar {
	+ margin-right: 0.5em;
	+ height: 1.5em;
	+ width: 1.5em;
	border-radius: $fallback--avatarAltRadius;
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);

	&.animated::before {
	display: none;
	}
	}
	}
	</style>
	diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
	index ccc523a2e1..6088e1ca02 100644
	--- a/src/components/conversation/conversation.vue
	+++ b/src/components/conversation/conversation.vue
	@@ -1,274 +1,282 @@
	<template>
	<div
	v-if="!hideStatus"
	:style="hiddenStyle"
	class="Conversation"
	:class="{ '-expanded' : isExpanded, 'panel' : isExpanded }"
	>
	<div
	v-if="isExpanded"
	- class="panel-heading conversation-heading"
	+ class="panel-heading conversation-heading -sticky"
	>
	<span class="title"> {{ $t('timeline.conversation') }} </span>
	<button
	v-if="collapsable"
	class="button-unstyled -link"
	@click.prevent="toggleExpanded"
	>
	{{ $t('timeline.collapse') }}
	</button>
	</div>
	<div class="conversation-body panel-body">
	<div
	v-if="isTreeView"
	class="thread-body"
	>
	<div
	v-if="shouldShowAllConversationButton"
	class="conversation-dive-to-top-level-box"
	>
	<i18n-t
	keypath="status.show_all_conversation_with_icon"
	tag="button"
	class="button-unstyled -link"
	@click.prevent="diveToTopLevel"
	scope="global"
	>
	<template #icon>
	<FAIcon
	icon="angle-double-left"
	/>
	</template>
	<template #text>
	<span>
	{{ $tc('status.show_all_conversation', otherTopLevelCount, { numStatus: otherTopLevelCount }) }}
	</span>
	</template>
	</i18n-t>
	</div>
	<div
	v-if="shouldShowAncestors"
	class="thread-ancestors"
	>
	<div
	v-for="status in ancestorsOf(diveRoot)"
	:key="status.id"
	class="thread-ancestor"
	:class="{'thread-ancestor-has-other-replies': getReplies(status.id).length > 1, '-faded': shouldFadeAncestors}"
	>
	<status
	ref="statusComponent"
	:inline-expanded="collapsable && isExpanded"
	:statusoid="status"
	:expandable="!isExpanded"
	:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
	:focused="focused(status.id)"
	:in-conversation="isExpanded"
	:highlight="getHighlight()"
	:replies="getReplies(status.id)"
	:in-profile="inProfile"
	:profile-user-id="profileUserId"
	class="conversation-status status-fadein panel-body"

	:simple-tree="treeViewIsSimple"
	:toggle-thread-display="toggleThreadDisplay"
	:thread-display-status="threadDisplayStatus"
	:show-thread-recursively="showThreadRecursively"
	:total-reply-count="totalReplyCount"
	:total-reply-depth="totalReplyDepth"
	:show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
	:dive="() => diveIntoStatus(status.id)"

	:controlled-showing-tall="statusContentProperties[status.id].showingTall"
	:controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
	:controlled-showing-long-subject="statusContentProperties[status.id].showingLongSubject"
	:controlled-replying="statusContentProperties[status.id].replying"
	:controlled-media-playing="statusContentProperties[status.id].mediaPlaying"
	:controlled-toggle-showing-tall="() => toggleStatusContentProperty(status.id, 'showingTall')"
	:controlled-toggle-expanding-subject="() => toggleStatusContentProperty(status.id, 'expandingSubject')"
	:controlled-toggle-showing-long-subject="() => toggleStatusContentProperty(status.id, 'showingLongSubject')"
	:controlled-toggle-replying="() => toggleStatusContentProperty(status.id, 'replying')"
	:controlled-set-media-playing="(newVal) => toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)"

	@goto="setHighlight"
	@toggleExpanded="toggleExpanded"
	/>
	<div
	v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 1"
	class="thread-ancestor-dive-box"
	>
	<div
	class="thread-ancestor-dive-box-inner"
	>
	<i18n-t
	tag="button"
	scope="global"
	keypath="status.ancestor_follow_with_icon"
	class="button-unstyled -link thread-tree-show-replies-button"
	@click.prevent="diveIntoStatus(status.id)"
	>
	<template #icon>
	<FAIcon
	icon="angle-double-right"
	/>
	</template>
	<template #text>
	<span>
	{{ $tc('status.ancestor_follow', getReplies(status.id).length - 1, { numReplies: getReplies(status.id).length - 1 }) }}
	</span>
	</template>
	</i18n-t>
	</div>
	</div>
	</div>
	</div>
	<thread-tree
	v-for="status in showingTopLevel"
	:key="status.id"
	ref="statusComponent"
	:depth="0"

	:status="status"
	:in-profile="inProfile"
	:conversation="conversation"
	:collapsable="collapsable"
	:is-expanded="isExpanded"
	:pinned-status-ids-object="pinnedStatusIdsObject"
	:profile-user-id="profileUserId"

	:focused="focused"
	:get-replies="getReplies"
	:highlight="maybeHighlight"
	:set-highlight="setHighlight"
	:toggle-expanded="toggleExpanded"

	:simple="treeViewIsSimple"
	:toggle-thread-display="toggleThreadDisplay"
	:thread-display-status="threadDisplayStatus"
	:show-thread-recursively="showThreadRecursively"
	:total-reply-count="totalReplyCount"
	:total-reply-depth="totalReplyDepth"
	:status-content-properties="statusContentProperties"
	:set-status-content-property="setStatusContentProperty"
	:toggle-status-content-property="toggleStatusContentProperty"
	:dive="canDive ? diveIntoStatus : undefined"
	/>
	</div>
	<div
	v-if="isLinearView"
	class="thread-body"
	>
	<status
	v-for="status in conversation"
	:key="status.id"
	ref="statusComponent"
	:inline-expanded="collapsable && isExpanded"
	:statusoid="status"
	:expandable="!isExpanded"
	:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
	:focused="focused(status.id)"
	:in-conversation="isExpanded"
	:highlight="getHighlight()"
	:replies="getReplies(status.id)"
	:in-profile="inProfile"
	:profile-user-id="profileUserId"
	class="conversation-status status-fadein panel-body"

	:toggle-thread-display="toggleThreadDisplay"
	:thread-display-status="threadDisplayStatus"
	:show-thread-recursively="showThreadRecursively"
	:total-reply-count="totalReplyCount"
	:total-reply-depth="totalReplyDepth"
	:status-content-properties="statusContentProperties"
	:set-status-content-property="setStatusContentProperty"
	:toggle-status-content-property="toggleStatusContentProperty"

	@goto="setHighlight"
	@toggleExpanded="toggleExpanded"
	/>
	</div>
	</div>
	</div>
	<div
	v-else
	:style="hiddenStyle"
	/>
	</template>

	<script src="./conversation.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.Conversation {
	+ z-index: 1;
	+
	.conversation-dive-to-top-level-box {
	padding: var(--status-margin, $status-margin);
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: var(--border, $fallback--border);
	border-radius: 0;
	/* Make the button stretch along the whole row */
	display: flex;
	align-items: stretch;
	flex-direction: column;
	}

	.thread-ancestors {
	margin-left: var(--status-margin, $status-margin);
	border-left: 2px solid var(--border, $fallback--border);
	}

	.thread-ancestor.-faded .StatusContent {
	--link: var(--faintLink);
	--text: var(--faint);
	color: var(--text);
	}
	+
	.thread-ancestor-dive-box {
	padding-left: var(--status-margin, $status-margin);
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: var(--border, $fallback--border);
	border-radius: 0;
	/* Make the button stretch along the whole row */
	&, &-inner {
	display: flex;
	align-items: stretch;
	flex-direction: column;
	}
	}
	.thread-ancestor-dive-box-inner {
	padding: var(--status-margin, $status-margin);
	}

	.conversation-status {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: var(--border, $fallback--border);
	border-radius: 0;
	}

	.thread-ancestor-has-other-replies .conversation-status,
	.thread-ancestor:last-child .conversation-status,
	.thread-ancestor:last-child .thread-ancestor-dive-box,
	+ &:last-child .conversation-status,
	&.-expanded .thread-tree .conversation-status {
	border-bottom: none;
	}

	.thread-ancestors + .thread-tree > .conversation-status {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: var(--border, $fallback--border);
	}

	/* expanded conversation in timeline */
	&.status-fadein.-expanded .thread-body {
	border-left-width: 4px;
	border-left-style: solid;
	border-left-color: $fallback--cRed;
	border-left-color: var(--cRed, $fallback--cRed);
	border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
	border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
	border-bottom: 1px solid var(--border, $fallback--border);
	}
	+
	+ &.-expanded.status-fadein {
	+ margin: calc(var(--status-margin, $status-margin) / 2);
	+ }
	}
	</style>
	diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
	index 2d46858854..0ca9802ece 100644
	--- a/src/components/desktop_nav/desktop_nav.scss
	+++ b/src/components/desktop_nav/desktop_nav.scss
	@@ -1,117 +1,115 @@
	@import '../../_variables.scss';

	.DesktopNav {
	- height: 50px;
	width: 100%;
	- position: fixed;

	a {
	color: var(--topBarLink, $fallback--link);
	}

	.inner-nav {
	display: grid;
	- grid-template-rows: 50px;
	+ grid-template-rows: var(--navbar-height);
	grid-template-columns: 2fr auto 2fr;
	grid-template-areas: "sitename logo actions";
	box-sizing: border-box;
	padding: 0 1.2em;
	margin: auto;
	max-width: 980px;
	}

	- &.-logoLeft {
	+ &.-logoLeft .inner-nav {
	grid-template-columns: auto 2fr 2fr;
	grid-template-areas: "logo sitename actions";
	}

	.button-default {
	&, svg {
	color: $fallback--text;
	color: var(--btnTopBarText, $fallback--text);
	}

	&:active {
	background-color: $fallback--fg;
	background-color: var(--btnPressedTopBar, $fallback--fg);
	color: $fallback--text;
	color: var(--btnPressedTopBarText, $fallback--text);
	}

	&:disabled {
	color: $fallback--text;
	color: var(--btnDisabledTopBarText, $fallback--text);
	}

	&.toggled {
	color: $fallback--text;
	color: var(--btnToggledTopBarText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btnToggledTopBar, $fallback--fg)
	}
	}

	.logo {
	grid-area: logo;
	position: relative;
	transition: opacity;
	transition-timing-function: ease-out;
	transition-duration: 100ms;

	@media all and (min-width: 800px) {
	opacity: 1 !important;
	}

	.mask {
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: $fallback--fg;
	background-color: var(--topBarText, $fallback--fg);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}

	img {
	display: inline-block;
	- height: 50px;
	+ height: var(--navbar-height);
	}
	}

	.nav-icon {
	margin-left: 0.2em;
	width: 2em;
	height: 100%;
	text-align: center;

	.svg-inline--fa {
	color: $fallback--link;
	color: var(--topBarLink, $fallback--link);
	}
	}

	.sitename {
	grid-area: sitename;
	}

	.actions {
	grid-area: actions;
	}

	.item {
	flex: 1;
	- line-height: 50px;
	- height: 50px;
	+ line-height: var(--navbar-height);
	+ height: var(--navbar-height);
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;

	&.right {
	justify-content: flex-end;
	text-align: right;
	}
	}
	}
	diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
	index 3241ce3eeb..06b270c395 100644
	--- a/src/components/dialog_modal/dialog_modal.vue
	+++ b/src/components/dialog_modal/dialog_modal.vue
	@@ -1,100 +1,91 @@
	<template>
	<span
	:class="{ 'dark-overlay': darkOverlay }"
	@click.self.stop="onCancel()"
	>
	<div
	class="dialog-modal panel panel-default"
	@click.stop=""
	>
	<div class="panel-heading dialog-modal-heading">
	<div class="title">
	<slot name="header" />
	</div>
	</div>
	<div class="dialog-modal-content">
	<slot name="default" />
	</div>
	<div class="dialog-modal-footer user-interactions panel-footer">
	<slot name="footer" />
	</div>
	</div>
	</span>
	</template>

	<script src="./dialog_modal.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';

	// TODO: unify with other modals.
	.dark-overlay {
	&::before {
	bottom: 0;
	content: " ";
	display: block;
	cursor: default;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	background: rgba(27,31,35,.5);
	z-index: 99;
	}
	}

	.dialog-modal.panel {
	top: 0;
	left: 50%;
	max-height: 80vh;
	max-width: 90vw;
	margin: 15vh auto;
	position: fixed;
	transform: translateX(-50%);
	z-index: 999;
	cursor: default;
	display: block;
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);

	.dialog-modal-heading {
	- padding: .5em .5em;
	- margin-right: auto;
	- margin-bottom: 0;
	- white-space: nowrap;
	- color: var(--panelText);
	- background-color: $fallback--fg;
	- background-color: var(--panel, $fallback--fg);
	-
	.title {
	- margin-bottom: 0;
	text-align: center;
	}
	}

	.dialog-modal-content {
	margin: 0;
	padding: 1rem 1rem;
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	white-space: normal;
	}

	.dialog-modal-footer {
	margin: 0;
	padding: .5em .5em;
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	border-top: 1px solid $fallback--border;
	border-top: 1px solid var(--border, $fallback--border);
	display: flex;
	justify-content: flex-end;

	button {
	width: auto;
	margin-left: .5rem;
	}
	}
	}

	</style>
	diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
	index aa2950ce8b..7d95ab7e5a 100644
	--- a/src/components/emoji_input/emoji_input.vue
	+++ b/src/components/emoji_input/emoji_input.vue
	@@ -1,185 +1,185 @@
	<template>
	<div
	ref="root"
	v-click-outside="onClickOutside"
	class="emoji-input"
	:class="{ 'with-picker': !hideEmojiButton }"
	>
	<slot />
	<template v-if="enableEmojiPicker">
	<button
	v-if="!hideEmojiButton"
	class="button-unstyled emoji-picker-icon"
	type="button"
	@click.prevent="togglePicker"
	>
	<FAIcon :icon="['far', 'smile-beam']" />
	</button>
	<EmojiPicker
	v-if="enableEmojiPicker"
	ref="picker"
	:class="{ hide: !showPicker }"
	:enable-sticker-picker="enableStickerPicker"
	class="emoji-picker-panel"
	@emoji="insert"
	@sticker-uploaded="onStickerUploaded"
	@sticker-upload-failed="onStickerUploadFailed"
	/>
	</template>
	<div
	ref="panel"
	class="autocomplete-panel"
	:class="{ hide: !showSuggestions }"
	>
	<div
	ref="panel-body"
	class="autocomplete-panel-body"
	>
	<div
	v-for="(suggestion, index) in suggestions"
	:key="index"
	class="autocomplete-item"
	:class="{ highlighted: index === highlighted }"
	@click.stop.prevent="onClick($event, suggestion)"
	>
	<span class="image">
	<img
	v-if="suggestion.img"
	:src="suggestion.img"
	>
	<span v-else>{{ suggestion.replacement }}</span>
	</span>
	<div class="label">
	<span class="displayText">{{ suggestion.displayText }}</span>
	<span class="detailText">{{ suggestion.detailText }}</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script src="./emoji_input.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.emoji-input {
	display: flex;
	flex-direction: column;
	position: relative;

	&.with-picker input {
	padding-right: 30px;
	}

	.emoji-picker-icon {
	position: absolute;
	top: 0;
	right: 0;
	margin: .2em .25em;
	- font-size: 16px;
	+ font-size: 1.3em;
	cursor: pointer;
	line-height: 24px;

	&:hover i {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	}
	.emoji-picker-panel {
	position: absolute;
	z-index: 20;
	margin-top: 2px;

	&.hide {
	display: none
	}
	}

	.autocomplete {
	&-panel {
	position: absolute;
	z-index: 20;
	margin-top: 2px;

	&.hide {
	display: none
	}

	&-body {
	margin: 0 0.5em 0 0.5em;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
	box-shadow: var(--popupShadow);
	min-width: 75%;
	background-color: $fallback--bg;
	background-color: var(--popover, $fallback--bg);
	color: $fallback--link;
	color: var(--popoverText, $fallback--link);
	--faint: var(--popoverFaintText, $fallback--faint);
	--faintLink: var(--popoverFaintLink, $fallback--faint);
	--lightText: var(--popoverLightText, $fallback--lightText);
	--postLink: var(--popoverPostLink, $fallback--link);
	--postFaintLink: var(--popoverPostFaintLink, $fallback--link);
	--icon: var(--popoverIcon, $fallback--icon);
	}
	}

	&-item {
	display: flex;
	cursor: pointer;
	padding: 0.2em 0.4em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	height: 32px;

	.image {
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 32px;

	margin-right: 4px;

	img {
	width: 32px;
	height: 32px;
	object-fit: contain;
	}
	}

	.label {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 0.1em 0 0.2em;

	.displayText {
	line-height: 1.5;
	}

	.detailText {
	font-size: 9px;
	line-height: 9px;
	}
	}

	&.highlighted {
	background-color: $fallback--fg;
	background-color: var(--selectedMenuPopover, $fallback--fg);
	color: var(--selectedMenuPopoverText, $fallback--text);
	--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
	--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
	--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
	--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
	}
	}
	}

	input, textarea {
	flex: 1 0 auto;
	}
	}
	</style>
	diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
	index ec71175879..2055e02e41 100644
	--- a/src/components/emoji_picker/emoji_picker.scss
	+++ b/src/components/emoji_picker/emoji_picker.scss
	@@ -1,184 +1,186 @@
	@import '../../_variables.scss';

	.emoji-picker {
	display: flex;
	flex-direction: column;
	position: absolute;
	right: 0;
	left: 0;
	margin: 0 !important;
	- z-index: 1;
	+ z-index: 100;
	background-color: $fallback--bg;
	background-color: var(--popover, $fallback--bg);
	color: $fallback--link;
	color: var(--popoverText, $fallback--link);
	--lightText: var(--popoverLightText, $fallback--faint);
	--faint: var(--popoverFaintText, $fallback--faint);
	--faintLink: var(--popoverFaintLink, $fallback--faint);
	--lightText: var(--popoverLightText, $fallback--lightText);
	--icon: var(--popoverIcon, $fallback--icon);

	.keep-open,
	.too-many-emoji {
	padding: 7px;
	line-height: normal;
	}

	.too-many-emoji {
	display: flex;
	flex-direction: column;
	}

	.keep-open-label {
	padding: 0 7px;
	display: flex;
	}

	.heading {
	display: flex;
	height: 32px;
	padding: 10px 7px 5px;
	}

	.content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0px;
	}

	.emoji-tabs {
	flex-grow: 1;
	}

	.emoji-groups {
	min-height: 200px;
	}

	.additional-tabs {
	border-left: 1px solid;
	border-left-color: $fallback--icon;
	border-left-color: var(--icon, $fallback--icon);
	padding-left: 7px;
	flex: 0 0 auto;
	}

	.additional-tabs,
	.emoji-tabs {
	display: block;
	min-width: 0;
	flex-basis: auto;
	flex-shrink: 1;

	&-item {
	padding: 0 7px;
	cursor: pointer;
	- font-size: 24px;
	+ font-size: 1.85em;

	&.disabled {
	opacity: 0.5;
	pointer-events: none;
	}
	+
	&.active {
	border-bottom: 4px solid;

	svg {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}
	}
	}
	}

	.sticker-picker {
	flex: 1 1 auto
	}

	.stickers,
	.emoji {
	&-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;

	&.hidden {
	opacity: 0;
	pointer-events: none;
	position: absolute;
	}
	}
	}

	.emoji {
	&-search {
	padding: 5px;
	flex: 0 0 auto;

	input {
	width: 100%;
	}
	}

	&-groups {
	flex: 1 1 1px;
	position: relative;
	overflow: auto;
	user-select: none;
	mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
	linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
	linear-gradient(to top, white, white);
	transition: mask-size 150ms;
	mask-size: 100% 20px, 100% 20px, auto;
	// Autoprefixed seem to ignore this one, and also syntax is different
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	&.scrolled {
	&-top {
	mask-size: 100% 20px, 100% 0, auto;
	}
	&-bottom {
	mask-size: 100% 0, 100% 20px, auto;
	}
	}
	}

	&-group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding-left: 5px;
	justify-content: left;

	&-title {
	- font-size: 12px;
	+ font-size: 0.85em;
	width: 100%;
	margin: 0;
	+
	&.disabled {
	display: none;
	}
	}
	}

	&-item {
	width: 32px;
	height: 32px;
	box-sizing: border-box;
	display: flex;
	font-size: 32px;
	align-items: center;
	justify-content: center;
	margin: 4px;

	cursor: pointer;

	img {
	object-fit: contain;
	max-width: 100%;
	max-height: 100%;
	}
	}

	}

	}
	diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
	index a45f458651..ddc45b81b5 100644
	--- a/src/components/global_notice_list/global_notice_list.vue
	+++ b/src/components/global_notice_list/global_notice_list.vue
	@@ -1,97 +1,96 @@
	<template>
	<div class="global-notice-list">
	<div
	v-for="(notice, index) in notices"
	:key="index"
	class="alert global-notice"
	:class="{ ['global-' + notice.level]: true }"
	>
	<div class="notice-message">
	{{ $t(notice.messageKey, notice.messageArgs) }}
	</div>
	<button
	class="button-unstyled close-notice"
	@click="closeNotice(notice)"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="times"
	/>
	</button>
	</div>
	</div>
	</template>

	<script src="./global_notice_list.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.global-notice-list {
	position: fixed;
	top: 50px;
	width: 100%;
	pointer-events: none;
	z-index: 1001;
	display: flex;
	flex-direction: column;
	align-items: center;

	.global-notice {
	pointer-events: auto;
	text-align: center;
	width: 40em;
	max-width: calc(100% - 3em);
	display: flex;
	padding-left: 1.5em;
	- line-height: 2em;
	+ line-height: 2;
	+ margin-bottom: 0.5em;
	+
	.notice-message {
	flex: 1 1 100%;
	}
	- i {
	- flex: 0 0;
	- width: 1.5em;
	- cursor: pointer;
	- }
	}

	.global-error {
	background-color: var(--alertPopupError, $fallback--cRed);
	color: var(--alertPopupErrorText, $fallback--text);
	+
	.svg-inline--fa {
	color: var(--alertPopupErrorText, $fallback--text);
	}
	}

	.global-warning {
	background-color: var(--alertPopupWarning, $fallback--cOrange);
	color: var(--alertPopupWarningText, $fallback--text);
	+
	.svg-inline--fa {
	color: var(--alertPopupWarningText, $fallback--text);
	}
	}

	.global-success {
	background-color: var(--alertPopupSuccess, $fallback--cGreen);
	color: var(--alertPopupSuccessText, $fallback--text);
	.svg-inline--fa {
	color: var(--alertPopupSuccessText, $fallback--text);
	}
	}

	.global-info {
	background-color: var(--alertPopupNeutral, $fallback--fg);
	color: var(--alertPopupNeutralText, $fallback--text);
	.svg-inline--fa {
	color: var(--alertPopupNeutralText, $fallback--text);
	}
	}

	.close-notice {
	padding-right: 0.2em;
	.svg-inline--fa:hover {
	opacity: 0.6;
	}
	}
	}
	</style>
	diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
	index d3ca39b85b..220527f29f 100644
	--- a/src/components/link-preview/link-preview.vue
	+++ b/src/components/link-preview/link-preview.vue
	@@ -1,93 +1,93 @@
	<template>
	<div>
	<a
	class="link-preview-card"
	:href="card.url"
	target="_blank"
	rel="noopener"
	>
	<div
	v-if="useImage && imageLoaded"
	class="card-image"
	>
	<img :src="card.image">
	</div>
	<div class="card-content">
	<span class="card-host faint">
	<span
	v-if="censored"
	class="nsfw-alert alert warning"
	>{{ $t('status.nsfw') }}</span>
	{{ card.provider_name }}
	</span>
	<h4 class="card-title">{{ card.title }}</h4>
	<p
	v-if="useDescription"
	class="card-description"
	>{{ card.description }}</p>
	</div>
	</a>
	</div>
	</template>

	<script src="./link-preview.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.link-preview-card {
	display: flex;
	flex-direction: row;
	cursor: pointer;
	overflow: hidden;
	margin-top: 0.5em;

	.card-image {
	flex-shrink: 0;
	width: 120px;
	max-width: 25%;
	img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: $fallback--attachmentRadius;
	border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
	}
	}

	.card-content {
	max-height: 100%;
	margin: 0.5em;
	display: flex;
	flex-direction: column;
	}

	.card-host {
	- font-size: 12px;
	+ font-size: 0.85em;
	}

	.card-description {
	margin: 0.5em 0 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-word;
	line-height: 1.2em;
	// cap description at 3 lines, the 1px is to clean up some stray pixels
	// TODO: fancier fade-out at the bottom to show off that it's too long?
	max-height: calc(1.2em * 3 - 1px);
	}

	.nsfw-alert {
	margin: 2em 0;
	}

	color: $fallback--text;
	color: var(--text, $fallback--text);
	border-style: solid;
	border-width: 1px;
	border-radius: $fallback--attachmentRadius;
	border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	}
	</style>
	diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
	index 87fa37c634..21482977eb 100644
	--- a/src/components/login_form/login_form.vue
	+++ b/src/components/login_form/login_form.vue
	@@ -1,151 +1,151 @@
	<template>
	<div class="login panel panel-default">
	<!-- Default panel contents -->

	<div class="panel-heading">
	{{ $t('login.login') }}
	</div>

	<div class="panel-body">
	<form
	class="login-form"
	@submit.prevent="submit"
	>
	<template v-if="isPasswordAuth">
	<div class="form-group">
	<label for="username">{{ $t('login.username') }}</label>
	<input
	id="username"
	v-model="user.username"
	:disabled="loggingIn"
	class="form-control"
	:placeholder="$t('login.placeholder')"
	>
	</div>
	<div class="form-group">
	<label for="password">{{ $t('login.password') }}</label>
	<input
	id="password"
	ref="passwordInput"
	v-model="user.password"
	:disabled="loggingIn"
	class="form-control"
	type="password"
	>
	</div>
	<div class="form-group">
	<router-link :to="{name: 'password-reset'}">
	{{ $t('password_reset.forgot_password') }}
	</router-link>
	</div>
	</template>

	<div
	v-if="isTokenAuth"
	class="form-group"
	>
	<p>{{ $t('login.description') }}</p>
	</div>

	<div class="form-group">
	<div class="login-bottom">
	<div>
	<router-link
	v-if="registrationOpen"
	:to="{name: 'registration'}"
	class="register"
	>
	{{ $t('login.register') }}
	</router-link>
	</div>
	<button
	:disabled="loggingIn"
	type="submit"
	class="btn button-default"
	>
	{{ $t('login.login') }}
	</button>
	</div>
	</div>
	</form>
	</div>

	<div
	v-if="error"
	class="form-group"
	>
	<div class="alert error">
	{{ error }}
	<button
	class="button-unstyled"
	@click="clearError"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="times"
	/>
	</button>
	</div>
	</div>
	</div>
	</template>

	<script src="./login_form.js" ></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.login-form {
	display: flex;
	flex-direction: column;
	padding: 0.6em;

	.btn {
	- min-height: 28px;
	+ min-height: 2em;
	width: 10em;
	}

	.register {
	flex: 1 1;
	}

	.login-bottom {
	margin-top: 1.0em;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	}

	.form-group {
	display: flex;
	flex-direction: column;
	padding: 0.3em 0.5em 0.6em;
	line-height:24px;
	}

	.form-bottom {
	display: flex;
	padding: 0.5em;
	height: 32px;

	button {
	width: 10em;
	}

	p {
	margin: 0.35em;
	padding: 0.35em;
	display: flex;
	}
	}

	.error {
	text-align: center;

	animation-name: shakeError;
	animation-duration: 0.4s;
	animation-timing-function: ease-in-out;
	}
	}
	</style>
	diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
	index 708a43c614..8b76aafb5c 100644
	--- a/src/components/media_modal/media_modal.vue
	+++ b/src/components/media_modal/media_modal.vue
	@@ -1,287 +1,287 @@
	<template>
	<Modal
	v-if="showing"
	class="media-modal-view"
	@backdropClicked="hideIfNotSwiped"
	>
	<SwipeClick
	v-if="type === 'image'"
	ref="swipeClick"
	class="modal-image-container"
	:direction="swipeDirection"
	:threshold="swipeThreshold"
	@preview-requested="handleSwipePreview"
	@swipe-finished="handleSwipeEnd"
	@swipeless-clicked="hide"
	>
	<PinchZoom
	ref="pinchZoom"
	class="modal-image-container-inner"
	selector=".modal-image"
	reach-min-scale-strategy="reset"
	stop-propagate-handled="stop-propgate-handled"
	:allow-pan-min-scale="pinchZoomMinScale"
	:min-scale="pinchZoomMinScale"
	:reset-to-min-scale-limit="pinchZoomScaleResetLimit"
	>
	<img
	:class="{ loading }"
	class="modal-image"
	:src="currentMedia.url"
	:alt="currentMedia.description"
	:title="currentMedia.description"
	@load="onImageLoaded"
	>
	</PinchZoom>
	</SwipeClick>
	<VideoAttachment
	v-if="type === 'video'"
	class="modal-image"
	:attachment="currentMedia"
	:controls="true"
	/>
	<audio
	v-if="type === 'audio'"
	class="modal-image"
	:src="currentMedia.url"
	:alt="currentMedia.description"
	:title="currentMedia.description"
	controls
	/>
	<Flash
	v-if="type === 'flash'"
	class="modal-image"
	:src="currentMedia.url"
	:alt="currentMedia.description"
	:title="currentMedia.description"
	/>
	<button
	v-if="canNavigate"
	:title="$t('media_modal.previous')"
	class="modal-view-button modal-view-button-arrow modal-view-button-arrow--prev"
	@click.stop.prevent="goPrev"
	>
	<FAIcon
	class="button-icon arrow-icon"
	icon="chevron-left"
	/>
	</button>
	<button
	v-if="canNavigate"
	:title="$t('media_modal.next')"
	class="modal-view-button modal-view-button-arrow modal-view-button-arrow--next"
	@click.stop.prevent="goNext"
	>
	<FAIcon
	class="button-icon arrow-icon"
	icon="chevron-right"
	/>
	</button>
	<button
	class="modal-view-button modal-view-button-hide"
	:title="$t('media_modal.hide')"
	@click.stop.prevent="hide"
	>
	<FAIcon
	class="button-icon"
	icon="times"
	/>
	</button>

	<span
	v-if="description"
	class="description"
	>
	{{ description }}
	</span>
	<span
	class="counter"
	>
	{{ $tc('media_modal.counter', currentIndex + 1, { current: currentIndex + 1, total: media.length }) }}
	</span>
	<span
	v-if="loading"
	class="loading-spinner"
	>
	<FAIcon
	spin
	icon="circle-notch"
	size="5x"
	/>
	</span>
	</Modal>
	</template>

	<script src="./media_modal.js"></script>

	<style lang="scss">
	$modal-view-button-icon-height: 3em;
	$modal-view-button-icon-half-height: calc(#{$modal-view-button-icon-height} / 2);
	$modal-view-button-icon-width: 3em;
	$modal-view-button-icon-margin: 0.5em;

	.modal-view.media-modal-view {
	- z-index: 1001;
	+ z-index: 9000;
	flex-direction: column;

	.modal-view-button-arrow,
	.modal-view-button-hide {
	opacity: 0.75;

	&:focus,
	&:hover {
	outline: none;
	box-shadow: none;
	}

	&:hover {
	opacity: 1;
	}
	}
	overflow: hidden;
	}

	.media-modal-view {
	@keyframes media-fadein {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}

	.modal-image-container {
	display: flex;
	overflow: hidden;
	align-items: center;
	flex-direction: column;
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	flex-grow: 1;
	justify-content: center;

	&-inner {
	width: 100%;
	height: 100%;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	}
	}

	.description,
	.counter {
	/* Hardcoded since background is also hardcoded */
	color: white;
	margin-top: 1em;
	text-shadow: 0 0 10px black, 0 0 10px black;
	padding: 0.2em 2em;
	}

	.description {
	flex: 0 0 auto;
	overflow-y: auto;
	min-height: 1em;
	max-width: 500px;
	max-height: 9.5em;
	word-break: break-all;
	}

	.modal-image {
	max-width: 100%;
	max-height: 100%;
	image-orientation: from-image; // NOTE: only FF supports this
	animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;

	&.loading {
	opacity: 0.5;
	}
	}

	.loading-spinner {
	width: 100%;
	height: 100%;
	position: absolute;
	pointer-events: none;
	display: flex;
	justify-content: center;
	align-items: center;

	svg {
	color: white;
	}
	}

	.modal-view-button {
	border: 0;
	padding: 0;
	opacity: 0;
	box-shadow: none;
	background: none;
	appearance: none;
	overflow: visible;
	cursor: pointer;
	transition: opacity 333ms cubic-bezier(.4,0,.22,1);
	height: $modal-view-button-icon-height;
	width: $modal-view-button-icon-width;

	.button-icon {
	position: absolute;
	height: $modal-view-button-icon-height;
	width: $modal-view-button-icon-width;
	- font-size: 14px;
	+ font-size: 1rem;
	line-height: $modal-view-button-icon-height;
	color: #FFF;
	text-align: center;
	background-color: rgba(0,0,0,.3);
	}
	}

	.modal-view-button-arrow {
	position: absolute;
	display: block;
	top: 50%;
	margin-top: $modal-view-button-icon-half-height;
	width: $modal-view-button-icon-width;
	height: $modal-view-button-icon-height;

	.arrow-icon {
	position: absolute;
	top: 0;
	line-height: $modal-view-button-icon-height;
	color: #FFF;
	text-align: center;
	background-color: rgba(0,0,0,.3);
	}

	&--prev {
	left: 0;
	.arrow-icon {
	left: $modal-view-button-icon-margin;
	}
	}

	&--next {
	right: 0;
	.arrow-icon {
	right: $modal-view-button-icon-margin;
	}
	}
	}

	.modal-view-button-hide {
	position: absolute;
	top: 0;
	right: 0;
	.button-icon {
	top: $modal-view-button-icon-margin;
	right: $modal-view-button-icon-margin;
	}
	}
	}
	</style>
	diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
	index e955aa7246..7cc59f5abc 100644
	--- a/src/components/media_upload/media_upload.vue
	+++ b/src/components/media_upload/media_upload.vue
	@@ -1,37 +1,41 @@
	<template>
	<label
	class="media-upload"
	:class="{ disabled: disabled }"
	:title="$t('tool_tip.media_upload')"
	>
	<FAIcon
	v-if="uploading"
	class="progress-icon"
	icon="circle-notch"
	spin
	/>
	<FAIcon
	v-if="!uploading"
	class="new-icon"
	icon="upload"
	/>
	<input
	v-if="uploadReady"
	+ class="hidden-input-file"
	:disabled="disabled"
	type="file"
	- style="position: fixed; top: -100em"
	multiple="true"
	@change="change"
	>
	</label>
	</template>

	<script src="./media_upload.js" ></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.media-upload {
	- cursor: pointer;
	+ cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
	+
	+ .hidden-input-file {
	+ display: none;
	+ }
	}
	</style>
	diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
	index 9e736cfb7b..877d52a937 100644
	--- a/src/components/mobile_nav/mobile_nav.js
	+++ b/src/components/mobile_nav/mobile_nav.js
	@@ -1,98 +1,99 @@
	import SideDrawer from '../side_drawer/side_drawer.vue'
	import Notifications from '../notifications/notifications.vue'
	import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
	import GestureService from '../../services/gesture_service/gesture_service'
	import { mapGetters } from 'vuex'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faTimes,
	faBell,
	faBars
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faTimes,
	faBell,
	faBars
	)

	const MobileNav = {
	components: {
	SideDrawer,
	Notifications
	},
	data: () => ({
	notificationsCloseGesture: undefined,
	notificationsOpen: false
	}),
	created () {
	this.notificationsCloseGesture = GestureService.swipeGesture(
	GestureService.DIRECTION_RIGHT,
	this.closeMobileNotifications,
	50
	)
	},
	computed: {
	currentUser () {
	return this.$store.state.users.currentUser
	},
	unseenNotifications () {
	return unseenNotificationsFromStore(this.$store)
	},
	unseenNotificationsCount () {
	return this.unseenNotifications.length
	},
	hideSitename () { return this.$store.state.instance.hideSitename },
	sitename () { return this.$store.state.instance.name },
	isChat () {
	return this.$route.name === 'chat'
	},
	...mapGetters(['unreadChatCount'])
	},
	methods: {
	toggleMobileSidebar () {
	this.$refs.sideDrawer.toggleDrawer()
	},
	openMobileNotifications () {
	this.notificationsOpen = true
	},
	closeMobileNotifications () {
	if (this.notificationsOpen) {
	// make sure to mark notifs seen only when the notifs were open and not
	// from close-calls.
	this.notificationsOpen = false
	this.markNotificationsAsSeen()
	}
	},
	notificationsTouchStart (e) {
	GestureService.beginSwipe(e, this.notificationsCloseGesture)
	},
	notificationsTouchMove (e) {
	GestureService.updateSwipe(e, this.notificationsCloseGesture)
	},
	scrollToTop () {
	window.scrollTo(0, 0)
	},
	logout () {
	this.$router.replace('/main/public')
	this.$store.dispatch('logout')
	},
	markNotificationsAsSeen () {
	- this.$refs.notifications.markAsSeen()
	+ // this.$refs.notifications.markAsSeen()
	+ this.$store.dispatch('markNotificationsAsSeen')
	},
	onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
	if (scrollTop + clientHeight >= scrollHeight) {
	this.$refs.notifications.fetchOlderNotifications()
	}
	}
	},
	watch: {
	$route () {
	// handles closing notificaitons when you press any router-link on the
	// notifications.
	this.closeMobileNotifications()
	}
	}
	}

	export default MobileNav
	diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
	index f5279b3efb..d2d48a0392 100644
	--- a/src/components/mobile_nav/mobile_nav.vue
	+++ b/src/components/mobile_nav/mobile_nav.vue
	@@ -1,217 +1,212 @@
	<template>
	<div
	class="MobileNav"
	>
	<nav
	id="nav"
	class="mobile-nav"
	- :class="{ 'mobile-hidden': isChat }"
	@click="scrollToTop()"
	>
	<div class="item">
	<button
	class="button-unstyled mobile-nav-button"
	@click.stop.prevent="toggleMobileSidebar()"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="bars"
	/>
	<div
	v-if="unreadChatCount"
	class="alert-dot"
	/>
	</button>
	<router-link
	v-if="!hideSitename"
	class="site-name"
	:to="{ name: 'root' }"
	active-class="home"
	>
	{{ sitename }}
	</router-link>
	</div>
	<div class="item right">
	<button
	v-if="currentUser"
	class="button-unstyled mobile-nav-button"
	@click.stop.prevent="openMobileNotifications()"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="bell"
	/>
	<div
	v-if="unseenNotificationsCount"
	class="alert-dot"
	/>
	</button>
	</div>
	</nav>
	<div
	v-if="currentUser"
	class="mobile-notifications-drawer"
	- :class="{ 'closed': !notificationsOpen }"
	+ :class="{ '-closed': !notificationsOpen }"
	@touchstart.stop="notificationsTouchStart"
	@touchmove.stop="notificationsTouchMove"
	>
	<div class="mobile-notifications-header">
	<span class="title">{{ $t('notifications.notifications') }}</span>
	<a
	class="mobile-nav-button"
	@click.stop.prevent="closeMobileNotifications()"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="times"
	/>
	</a>
	</div>
	<div
	class="mobile-notifications"
	+ id="mobile-notifications"
	@scroll="onScroll"
	>
	- <Notifications
	- ref="notifications"
	- :no-heading="true"
	- />
	</div>
	</div>
	<SideDrawer
	ref="sideDrawer"
	:logout="logout"
	/>
	</div>
	</template>

	<script src="./mobile_nav.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.MobileNav {
	.mobile-nav {
	display: grid;
	- line-height: 50px;
	- height: 50px;
	+ line-height: var(--navbar-height);
	grid-template-rows: 50px;
	grid-template-columns: 2fr auto;
	width: 100%;
	- position: fixed;
	box-sizing: border-box;
	a {
	color: var(--topBarLink, $fallback--link);
	}
	}

	.mobile-inner-nav {
	width: 100%;
	display: flex;
	align-items: center;
	}

	.mobile-nav-button {
	display: inline-block;
	text-align: center;
	padding: 0 1em;
	position: relative;
	cursor: pointer;
	}

	.site-name {
	padding: 0 .3em;
	display: inline-block;
	}

	.item {
	/* moslty just to get rid of extra whitespaces */
	display: flex;
	}

	.alert-dot {
	border-radius: 100%;
	height: 8px;
	width: 8px;
	position: absolute;
	left: calc(50% - 4px);
	top: calc(50% - 4px);
	margin-left: 6px;
	margin-top: -6px;
	background-color: $fallback--cRed;
	background-color: var(--badgeNotification, $fallback--cRed);
	}

	.mobile-notifications-drawer {
	width: 100%;
	height: 100vh;
	overflow-x: hidden;
	position: fixed;
	top: 0;
	left: 0;
	box-shadow: 1px 1px 4px rgba(0,0,0,.6);
	box-shadow: var(--panelShadow);
	transition-property: transform;
	transition-duration: 0.25s;
	transform: translateX(0);
	z-index: 1001;
	-webkit-overflow-scrolling: touch;

	- &.closed {
	+ &.-closed {
	transform: translateX(100%);
	+ box-shadow: none;
	}
	}

	.mobile-notifications-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 1;
	width: 100%;
	height: 50px;
	line-height: 50px;
	position: absolute;
	color: var(--topBarText);
	background-color: $fallback--fg;
	background-color: var(--topBar, $fallback--fg);
	box-shadow: 0px 0px 4px rgba(0,0,0,.6);
	box-shadow: var(--topBarShadow);

	.title {
	font-size: 1.3em;
	margin-left: 0.6em;
	}
	}

	.mobile-notifications {
	margin-top: 50px;
	width: 100vw;
	- height: calc(100vh - 50px);
	+ height: calc(100vh - var(--navbar-height));
	overflow-x: hidden;
	overflow-y: scroll;

	color: $fallback--text;
	color: var(--text, $fallback--text);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);

	.notifications {
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	.panel {
	border-radius: 0;
	margin: 0;
	box-shadow: none;
	}
	.panel:after {
	border-radius: 0;
	}
	.panel .panel-heading {
	border-radius: 0;
	box-shadow: none;
	}
	}
	}
	}

	</style>
	diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.js b/src/components/mobile_post_status_button/mobile_post_status_button.js
	index 4866ac577e..ecf79b645a 100644
	--- a/src/components/mobile_post_status_button/mobile_post_status_button.js
	+++ b/src/components/mobile_post_status_button/mobile_post_status_button.js
	@@ -1,111 +1,111 @@
	import { debounce } from 'lodash'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faPen
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faPen
	)

	const HIDDEN_FOR_PAGES = new Set([
	'chats',
	'chat'
	])

	const MobilePostStatusButton = {
	data () {
	return {
	hidden: false,
	scrollingDown: false,
	inputActive: false,
	oldScrollPos: 0,
	amountScrolled: 0
	}
	},
	created () {
	if (this.autohideFloatingPostButton) {
	this.activateFloatingPostButtonAutohide()
	}
	window.addEventListener('resize', this.handleOSK)
	},
	unmounted () {
	if (this.autohideFloatingPostButton) {
	this.deactivateFloatingPostButtonAutohide()
	}
	window.removeEventListener('resize', this.handleOSK)
	},
	computed: {
	isLoggedIn () {
	return !!this.$store.state.users.currentUser
	},
	isHidden () {
	if (HIDDEN_FOR_PAGES.has(this.$route.name)) { return true }

	return this.autohideFloatingPostButton && (this.hidden \|\| this.inputActive)
	},
	isPersistent () {
	- return !!this.$store.getters.mergedConfig.showNewPostButton
	+ return !!this.$store.getters.mergedConfig.alwaysShowNewPostButton
	},
	autohideFloatingPostButton () {
	return !!this.$store.getters.mergedConfig.autohideFloatingPostButton
	}
	},
	watch: {
	autohideFloatingPostButton: function (isEnabled) {
	if (isEnabled) {
	this.activateFloatingPostButtonAutohide()
	} else {
	this.deactivateFloatingPostButtonAutohide()
	}
	}
	},
	methods: {
	activateFloatingPostButtonAutohide () {
	window.addEventListener('scroll', this.handleScrollStart)
	window.addEventListener('scroll', this.handleScrollEnd)
	},
	deactivateFloatingPostButtonAutohide () {
	window.removeEventListener('scroll', this.handleScrollStart)
	window.removeEventListener('scroll', this.handleScrollEnd)
	},
	openPostForm () {
	this.$store.dispatch('openPostStatusModal')
	},
	handleOSK () {
	// This is a big hack: we're guessing from changed window sizes if the
	// on-screen keyboard is active or not. This is only really important
	// for phones in portrait mode and it's more important to show the button
	// in normal scenarios on all phones, than it is to hide it when the
	// keyboard is active.
	// Guesswork based on https://www.mydevice.io/#compare-devices

	// for example, iphone 4 and android phones from the same time period
	const smallPhone = window.innerWidth < 350
	const smallPhoneKbOpen = smallPhone && window.innerHeight < 345

	const biggerPhone = !smallPhone && window.innerWidth < 450
	const biggerPhoneKbOpen = biggerPhone && window.innerHeight < 560
	if (smallPhoneKbOpen \|\| biggerPhoneKbOpen) {
	this.inputActive = true
	} else {
	this.inputActive = false
	}
	},
	handleScrollStart: debounce(function () {
	if (window.scrollY > this.oldScrollPos) {
	this.hidden = true
	} else {
	this.hidden = false
	}
	this.oldScrollPos = window.scrollY
	}, 100, { leading: true, trailing: false }),

	handleScrollEnd: debounce(function () {
	this.hidden = false
	this.oldScrollPos = window.scrollY
	}, 100, { leading: false, trailing: true })
	}
	}

	export default MobilePostStatusButton
	diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
	index 2b58913f18..9394efff7b 100644
	--- a/src/components/modal/modal.vue
	+++ b/src/components/modal/modal.vue
	@@ -1,75 +1,75 @@
	<template>
	<div
	v-show="isOpen"
	v-body-scroll-lock="isOpen && !noBackground"
	class="modal-view"
	:class="classes"
	@click.self="$emit('backdropClicked')"
	>
	<slot />
	</div>
	</template>

	<script>
	export default {
	props: {
	isOpen: {
	type: Boolean,
	default: true
	},
	noBackground: {
	type: Boolean,
	default: false
	}
	},
	computed: {
	classes () {
	return {
	'modal-background': !this.noBackground,
	'open': this.isOpen
	}
	}
	}
	}
	</script>

	<style lang="scss">
	.modal-view {
	- z-index: 1000;
	+ z-index: 2000;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: auto;
	pointer-events: none;
	animation-duration: 0.2s;
	animation-name: modal-background-fadein;
	opacity: 0;

	> * {
	pointer-events: initial;
	}

	&.modal-background {
	pointer-events: initial;
	background-color: rgba(0, 0, 0, 0.5);
	}

	&.open {
	opacity: 1;
	}
	}

	@keyframes modal-background-fadein {
	from {
	background-color: rgba(0, 0, 0, 0);
	}
	to {
	background-color: rgba(0, 0, 0, 0.5);
	}
	}
	</style>
	diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
	index 0fe6713f1c..00a531b3fb 100644
	--- a/src/components/notifications/notification_filters.vue
	+++ b/src/components/notifications/notification_filters.vue
	@@ -1,131 +1,130 @@
	<template>
	<Popover
	trigger="click"
	class="NotificationFilters"
	placement="bottom"
	:bound-to="{ x: 'container' }"
	>
	<template v-slot:content>
	<div class="dropdown-menu">
	<button
	class="button-default dropdown-item"
	@click="toggleNotificationFilter('likes')"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': filters.likes }"
	/>{{ $t('settings.notification_visibility_likes') }}
	</button>
	<button
	class="button-default dropdown-item"
	@click="toggleNotificationFilter('repeats')"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': filters.repeats }"
	/>{{ $t('settings.notification_visibility_repeats') }}
	</button>
	<button
	class="button-default dropdown-item"
	@click="toggleNotificationFilter('follows')"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': filters.follows }"
	/>{{ $t('settings.notification_visibility_follows') }}
	</button>
	<button
	class="button-default dropdown-item"
	@click="toggleNotificationFilter('mentions')"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': filters.mentions }"
	/>{{ $t('settings.notification_visibility_mentions') }}
	</button>
	<button
	class="button-default dropdown-item"
	@click="toggleNotificationFilter('emojiReactions')"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': filters.emojiReactions }"
	/>{{ $t('settings.notification_visibility_emoji_reactions') }}
	</button>
	<button
	class="button-default dropdown-item"
	@click="toggleNotificationFilter('moves')"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': filters.moves }"
	/>{{ $t('settings.notification_visibility_moves') }}
	</button>
	<button
	class="button-default dropdown-item"
	@click="toggleNotificationFilter('polls')"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': filters.polls }"
	/>{{ $t('settings.notification_visibility_polls') }}
	</button>
	</div>
	</template>
	<template v-slot:trigger>
	- <button class="button-unstyled">
	+ <button class="filter-trigger-button button-unstyled">
	<FAIcon icon="filter" />
	</button>
	</template>
	</Popover>
	</template>

	<script>
	import Popover from '../popover/popover.vue'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faFilter } from '@fortawesome/free-solid-svg-icons'

	library.add(
	faFilter
	)

	export default {
	components: { Popover },
	computed: {
	filters () {
	return this.$store.getters.mergedConfig.notificationVisibility
	}
	},
	methods: {
	toggleNotificationFilter (type) {
	this.$store.dispatch('setOption', {
	name: 'notificationVisibility',
	value: {
	...this.filters,
	[type]: !this.filters[type]
	}
	})
	}
	}
	}
	</script>

	<style lang="scss">

	.NotificationFilters {
	align-self: stretch;

	> button {
	- font-size: 1.2em;
	- padding-left: 0.7em;
	- padding-right: 0.2em;
	line-height: 100%;
	height: 100%;
	- }
	+ width: var(--__panel-heading-height-inner);
	+ text-align: center;

	- .dropdown-item {
	- margin: 0;
	+ svg {
	+ font-size: 1.2em;
	+ }
	}
	}

	</style>
	diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
	index c8f1ebcbe2..fb2579a55a 100644
	--- a/src/components/notifications/notifications.js
	+++ b/src/components/notifications/notifications.js
	@@ -1,120 +1,130 @@
	import { mapGetters } from 'vuex'
	import Notification from '../notification/notification.vue'
	import NotificationFilters from './notification_filters.vue'
	import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
	import {
	notificationsFromStore,
	filteredNotificationsFromStore,
	unseenNotificationsFromStore
	} from '../../services/notification_utils/notification_utils.js'
	import FaviconService from '../../services/favicon_service/favicon_service.js'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'

	library.add(
	faCircleNotch
	)

	const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30

	const Notifications = {
	components: {
	Notification,
	NotificationFilters
	},
	props: {
	- // Disables display of panel header
	- noHeading: Boolean,
	// Disables panel styles, unread mark, potentially other notification-related actions
	// meant for "Interactions" timeline
	minimalMode: Boolean,
	// Custom filter mode, an array of strings, possible values 'mention', 'repeat', 'like', 'follow', used to override global filter for use in "Interactions" timeline
	filterMode: Array
	},
	data () {
	return {
	bottomedOut: false,
	// How many seen notifications to display in the list. The more there are,
	// the heavier the page becomes. This count is increased when loading
	// older notifications, and cut back to default whenever hitting "Read!".
	seenToDisplayCount: DEFAULT_SEEN_TO_DISPLAY_COUNT
	}
	},
	computed: {
	mainClass () {
	return this.minimalMode ? '' : 'panel panel-default'
	},
	notifications () {
	return notificationsFromStore(this.$store)
	},
	error () {
	return this.$store.state.statuses.notifications.error
	},
	unseenNotifications () {
	return unseenNotificationsFromStore(this.$store)
	},
	filteredNotifications () {
	return filteredNotificationsFromStore(this.$store, this.filterMode)
	},
	unseenCount () {
	return this.unseenNotifications.length
	},
	unseenCountTitle () {
	return this.unseenCount + (this.unreadChatCount)
	},
	loading () {
	return this.$store.state.statuses.notifications.loading
	},
	+ noHeading () {
	+ const { layoutType } = this.$store.state.interface
	+ return this.minimalMode \|\| layoutType === 'mobile'
	+ },
	+ teleportTarget () {
	+ const { layoutType } = this.$store.state.interface
	+ const map = {
	+ wide: '#notifs-column',
	+ mobile: '#mobile-notifications'
	+ }
	+ return map[layoutType] \|\| '#notifs-sidebar'
	+ },
	notificationsToDisplay () {
	return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
	},
	...mapGetters(['unreadChatCount'])
	},
	watch: {
	unseenCountTitle (count) {
	if (count > 0) {
	FaviconService.drawFaviconBadge()
	this.$store.dispatch('setPageTitle', `(${count})`)
	} else {
	FaviconService.clearFaviconBadge()
	this.$store.dispatch('setPageTitle', '')
	}
	}
	},
	methods: {
	markAsSeen () {
	this.$store.dispatch('markNotificationsAsSeen')
	this.seenToDisplayCount = DEFAULT_SEEN_TO_DISPLAY_COUNT
	},
	fetchOlderNotifications () {
	if (this.loading) {
	return
	}

	const seenCount = this.filteredNotifications.length - this.unseenCount
	if (this.seenToDisplayCount < seenCount) {
	this.seenToDisplayCount = Math.min(this.seenToDisplayCount + 20, seenCount)
	return
	} else if (this.seenToDisplayCount > seenCount) {
	this.seenToDisplayCount = seenCount
	}

	const store = this.$store
	const credentials = store.state.users.currentUser.credentials
	store.commit('setNotificationsLoading', { value: true })
	notificationsFetcher.fetchAndUpdate({
	store,
	credentials,
	older: true
	}).then(notifs => {
	store.commit('setNotificationsLoading', { value: false })
	if (notifs.length === 0) {
	this.bottomedOut = true
	}
	this.seenToDisplayCount += notifs.length
	})
	}
	}
	}

	export default Notifications
	diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
	index a285027df4..3d3408f709 100644
	--- a/src/components/notifications/notifications.scss
	+++ b/src/components/notifications/notifications.scss
	@@ -1,170 +1,171 @@
	@import '../../_variables.scss';

	.Notifications {
	&:not(.minimal) {
	// a bit of a hack to allow scrolling below notifications
	padding-bottom: 15em;
	}

	.loadmore-error {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}

	- .notifications-footer {
	- border: none;
	- }
	-
	.notification {
	position: relative;

	.notification-overlay {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	pointer-events: none;
	}

	&.unseen {
	.notification-overlay {
	background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px)
	}
	}
	}
	}

	.notification {
	box-sizing: border-box;

	&:hover .animated.Avatar {
	canvas {
	display: none;
	}
	img {
	visibility: visible;
	}
	}

	+ &:last-child .Notification {
	+ border-bottom: none;
	+ }
	+
	.non-mention {
	display: flex;
	flex: 1;
	flex-wrap: nowrap;
	padding: 0.6em;
	min-width: 0;

	.avatar-container {
	width: 32px;
	height: 32px;
	}

	--link: var(--faintLink);
	--text: var(--faint);
	}

	.follow-request-accept {
	&:hover {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	}

	.follow-request-reject {
	&:hover {
	color: $fallback--cRed;
	color: var(--cRed, $fallback--cRed);
	}
	}

	.follow-text, .move-text {
	padding: 0.5em 0;
	overflow-wrap: break-word;
	display: flex;
	justify-content: space-between;

	.follow-name {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	}

	/* TODO cleanup this */
	.Status {
	flex: 1;
	}

	time {
	white-space: nowrap;
	}

	.notification-right {
	flex: 1;
	padding-left: 0.8em;
	min-width: 0;

	.timeago {
	min-width: 3em;
	text-align: right;
	}
	}

	.emoji-reaction-emoji {
	- font-size: 16px;
	+ font-size: 1.3em;
	}

	.notification-details {
	- min-width: 0px;
	+ min-width: 0;
	word-wrap: break-word;
	- line-height:18px;
	+ line-height: var(--post-line-height);
	position: relative;
	overflow: hidden;
	width: 100%;
	flex: 1 1 0;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;

	.name-and-action {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	.username {
	font-weight: bolder;
	max-width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	.timeago {
	- margin-right: .2em;
	+ margin-right: 0.2em;
	}

	.status-content {
	margin: 0;
	max-height: 300px;
	}

	h1 {
	word-break: break-all;
	margin: 0 0 0.3em;
	padding: 0;
	font-size: 1em;
	- line-height:20px;
	+ line-height: 1.5;
	+
	small {
	font-weight: lighter;
	}
	}

	p {
	margin: 0;
	margin-top: 0;
	margin-bottom: 0.3em;
	}
	}
	}
	diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
	index 2ce5d56f7e..794ef51d00 100644
	--- a/src/components/notifications/notifications.vue
	+++ b/src/components/notifications/notifications.vue
	@@ -1,70 +1,72 @@
	<template>
	- <div
	- :class="{ minimal: minimalMode }"
	- class="Notifications"
	- >
	- <div :class="mainClass">
	- <div
	- v-if="!noHeading"
	- class="panel-heading"
	- >
	- <div class="title">
	- {{ $t('notifications.notifications') }}
	- <span
	- v-if="unseenCount"
	- class="badge badge-notification unseen-count"
	- >{{ unseenCount }}</span>
	- </div>
	- <button
	- v-if="unseenCount"
	- class="button-default read-button"
	- @click.prevent="markAsSeen"
	- >
	- {{ $t('notifications.read') }}
	- </button>
	- <NotificationFilters />
	- </div>
	- <div class="panel-body">
	+ <teleport :disabled="minimalMode" :to="teleportTarget">
	+ <div
	+ :class="{ minimal: minimalMode }"
	+ class="Notifications"
	+ >
	+ <div :class="mainClass">
	<div
	- v-for="notification in notificationsToDisplay"
	- :key="notification.id"
	- class="notification"
	- :class="{"unseen": !minimalMode && !notification.seen}"
	+ v-if="!noHeading"
	+ class="notifications-heading panel-heading -sticky"
	>
	- <div class="notification-overlay" />
	- <notification :notification="notification" />
	+ <div class="title">
	+ {{ $t('notifications.notifications') }}
	+ <span
	+ v-if="unseenCount"
	+ class="badge badge-notification unseen-count"
	+ >{{ unseenCount }}</span>
	+ </div>
	+ <button
	+ v-if="unseenCount"
	+ class="button-default read-button"
	+ @click.prevent="markAsSeen"
	+ >
	+ {{ $t('notifications.read') }}
	+ </button>
	+ <NotificationFilters />
	</div>
	- </div>
	- <div class="panel-footer notifications-footer">
	- <div
	- v-if="bottomedOut"
	- class="new-status-notification text-center faint"
	- >
	- {{ $t('notifications.no_more_notifications') }}
	+ <div class="panel-body">
	+ <div
	+ v-for="notification in notificationsToDisplay"
	+ :key="notification.id"
	+ class="notification"
	+ :class="{unseen: !minimalMode && !notification.seen}"
	+ >
	+ <div class="notification-overlay" />
	+ <notification :notification="notification" />
	+ </div>
	</div>
	- <button
	- v-else-if="!loading"
	- class="button-unstyled -link -fullwidth"
	- @click.prevent="fetchOlderNotifications()"
	- >
	- <div class="new-status-notification text-center">
	- {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
	+ <div class="panel-footer">
	+ <div
	+ v-if="bottomedOut"
	+ class="new-status-notification text-center faint"
	+ >
	+ {{ $t('notifications.no_more_notifications') }}
	+ </div>
	+ <button
	+ v-else-if="!loading"
	+ class="button-unstyled -link -fullwidth"
	+ @click.prevent="fetchOlderNotifications()"
	+ >
	+ <div class="new-status-notification text-center">
	+ {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
	+ </div>
	+ </button>
	+ <div
	+ v-else
	+ class="new-status-notification text-center"
	+ >
	+ <FAIcon
	+ icon="circle-notch"
	+ spin
	+ size="lg"
	+ />
	</div>
	- </button>
	- <div
	- v-else
	- class="new-status-notification text-center"
	- >
	- <FAIcon
	- icon="circle-notch"
	- spin
	- size="lg"
	- />
	</div>
	</div>
	</div>
	- </div>
	+ </teleport>
	</template>

	<script src="./notifications.js"></script>
	<style lang="scss" src="./notifications.scss"></style>
	diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
	index 3ffa5425cd..90673f4437 100644
	--- a/src/components/password_reset/password_reset.vue
	+++ b/src/components/password_reset/password_reset.vue
	@@ -1,130 +1,134 @@
	<template>
	<div class="settings panel panel-default">
	<div class="panel-heading">
	{{ $t('password_reset.password_reset') }}
	</div>
	<div class="panel-body">
	<form
	class="password-reset-form"
	@submit.prevent="submit"
	>
	<div class="container">
	<div v-if="!mailerEnabled">
	<p v-if="passwordResetRequested">
	{{ $t('password_reset.password_reset_required_but_mailer_is_disabled') }}
	</p>
	<p v-else>
	{{ $t('password_reset.password_reset_disabled') }}
	</p>
	</div>
	<div v-else-if="success \|\| throttled">
	<p v-if="success">
	{{ $t('password_reset.check_email') }}
	</p>
	<div class="form-group text-center">
	<router-link :to="{name: 'root'}">
	{{ $t('password_reset.return_home') }}
	</router-link>
	</div>
	</div>
	<div v-else>
	<p
	v-if="passwordResetRequested"
	class="password-reset-required error"
	>
	{{ $t('password_reset.password_reset_required') }}
	</p>
	<p>
	{{ $t('password_reset.instruction') }}
	</p>
	<div class="form-group">
	<input
	ref="email"
	v-model="user.email"
	:disabled="isPending"
	:placeholder="$t('password_reset.placeholder')"
	class="form-control"
	type="input"
	>
	</div>
	<div class="form-group">
	<button
	:disabled="isPending"
	type="submit"
	class="btn button-default btn-block"
	>
	{{ $t('settings.save') }}
	</button>
	</div>
	</div>
	<p
	v-if="error"
	class="alert error notice-dismissible"
	>
	<span>{{ error }}</span>
	<a
	class="fa-scale-110 fa-old-padding dismiss"
	@click.prevent="dismissError()"
	>
	<FAIcon icon="times" />
	</a>
	</p>
	</div>
	</form>
	</div>
	</div>
	</template>

	<script src="./password_reset.js"></script>
	<style lang="scss">
	@import '../../_variables.scss';

	.password-reset-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0.6em;

	.container {
	display: flex;
	flex: 1 0;
	flex-direction: column;
	margin-top: 0.6em;
	max-width: 18rem;
	+
	+ > * {
	+ min-width: 0;
	+ }
	}

	.form-group {
	display: flex;
	flex-direction: column;
	margin-bottom: 1em;
	- padding: 0.3em 0.0em 0.3em;
	- line-height: 24px;
	+ padding: 0.3em 0;
	+ line-height: 1.85em;
	}

	.error {
	text-align: center;
	animation-name: shakeError;
	animation-duration: 0.4s;
	animation-timing-function: ease-in-out;
	}

	.alert {
	padding: 0.5em;
	- margin: 0.3em 0.0em 1em;
	+ margin: 0.3em 0 1em;
	}

	.password-reset-required {
	background-color: var(--alertError, $fallback--alertError);
	padding: 10px 0;
	}

	.notice-dismissible {
	padding-right: 2rem;
	}

	.dismiss {
	cursor: pointer;
	}
	}

	</style>
	diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
	index 332a0398f3..c2a3e8016b 100644
	--- a/src/components/popover/popover.vue
	+++ b/src/components/popover/popover.vue
	@@ -1,178 +1,194 @@
	<template>
	<div
	@mouseenter="onMouseenter"
	@mouseleave="onMouseleave"
	>
	<button
	ref="trigger"
	- class="button-unstyled -fullwidth popover-trigger-button"
	+ class="button-unstyled popover-trigger-button"
	type="button"
	@click="onClick"
	>
	<slot name="trigger" />
	</button>
	<div
	v-if="!hidden"
	ref="content"
	:style="styles"
	class="popover"
	:class="popoverClass \|\| 'popover-default'"
	>
	<slot
	name="content"
	class="popover-inner"
	:close="hidePopover"
	/>
	</div>
	</div>
	</template>

	<script src="./popover.js" />

	<style lang="scss">
	@import '../../_variables.scss';

	.popover-trigger-button {
	display: inline-block;
	}

	.popover {
	- z-index: 8;
	+ z-index: 500;
	position: absolute;
	min-width: 0;
	}

	.popover-default {
	transition: opacity 0.3s;

	- box-shadow: 1px 1px 4px rgba(0,0,0,.6);
	- box-shadow: var(--panelShadow);
	+ &:after {
	+ content: '';
	+ position: absolute;
	+ top: 0;
	+ bottom: 0;
	+ left: 0;
	+ right: 0;
	+ z-index: 3;
	+ box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
	+ box-shadow: var(--panelShadow);
	+ pointer-events: none;
	+ }
	+
	border-radius: $fallback--btnRadius;
	border-radius: var(--btnRadius, $fallback--btnRadius);

	background-color: $fallback--bg;
	background-color: var(--popover, $fallback--bg);
	color: $fallback--text;
	color: var(--popoverText, $fallback--text);
	--faint: var(--popoverFaintText, $fallback--faint);
	--faintLink: var(--popoverFaintLink, $fallback--faint);
	--lightText: var(--popoverLightText, $fallback--lightText);
	--postLink: var(--popoverPostLink, $fallback--link);
	--postFaintLink: var(--popoverPostFaintLink, $fallback--link);
	--icon: var(--popoverIcon, $fallback--icon);
	}

	.dropdown-menu {
	display: block;
	padding: .5rem 0;
	- font-size: 1rem;
	+ font-size: 1em;
	text-align: left;
	list-style: none;
	max-width: 100vw;
	- z-index: 10;
	+ z-index: 200;
	white-space: nowrap;

	.dropdown-divider {
	height: 0;
	margin: .5rem 0;
	overflow: hidden;
	border-top: 1px solid $fallback--border;
	border-top: 1px solid var(--border, $fallback--border);
	}

	.dropdown-item {
	line-height: 21px;
	- overflow: auto;
	+ overflow: hidden;
	display: block;
	- padding: .5em 0.75em;
	+ padding: 0.5em 0.75em;
	clear: both;
	font-weight: 400;
	text-align: inherit;
	white-space: nowrap;
	border: none;
	border-radius: 0px;
	background-color: transparent;
	box-shadow: none;
	width: 100%;
	height: 100%;
	box-sizing: border-box;

	--btnText: var(--popoverText, $fallback--text);

	&-icon {
	svg {
	width: 22px;
	margin-right: 0.75rem;
	color: var(--menuPopoverIcon, $fallback--icon)
	}
	}

	&:active, &:hover {
	background-color: $fallback--lightBg;
	background-color: var(--selectedMenuPopover, $fallback--lightBg);
	- color: $fallback--link;
	- color: var(--selectedMenuPopoverText, $fallback--link);
	+ box-shadow: none;
	+ --btnText: var(--selectedMenuPopoverText, $fallback--link);
	--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
	--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
	--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
	--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
	svg {
	color: var(--selectedMenuPopoverIcon, $fallback--icon);
	+ --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
	}
	}

	.menu-checkbox {
	display: inline-block;
	vertical-align: middle;
	min-width: 22px;
	max-width: 22px;
	min-height: 22px;
	max-height: 22px;
	line-height: 22px;
	text-align: center;
	border-radius: 0px;
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	box-shadow: 0px 0px 2px black inset;
	box-shadow: var(--inputShadow);
	margin-right: 0.75em;

	&.menu-checkbox-checked::after {
	font-size: 1.25em;
	content: '✓';
	}

	- &.menu-checkbox-radio::after {
	- font-size: 2em;
	- content: '•';
	+ &.-radio {
	+ border-radius: 9999px;
	+
	+ &.menu-checkbox-checked::after {
	+ font-size: 2em;
	+ content: '•';
	+ }
	}
	}

	}

	.button-default.dropdown-item {
	&,
	i[class*=icon-] {
	color: $fallback--text;
	color: var(--btnText, $fallback--text);
	}

	&:active {
	background-color: $fallback--lightBg;
	background-color: var(--selectedMenuPopover, $fallback--lightBg);
	color: $fallback--link;
	color: var(--selectedMenuPopoverText, $fallback--link);
	}

	&:disabled {
	color: $fallback--text;
	color: var(--btnDisabledText, $fallback--text);
	}

	&.toggled {
	color: $fallback--text;
	color: var(--btnToggledText, $fallback--text);
	}
	}
	}
	</style>
	diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
	index 84a9e29ea4..2febf22620 100644
	--- a/src/components/post_status_form/post_status_form.js
	+++ b/src/components/post_status_form/post_status_form.js
	@@ -1,611 +1,611 @@
	import statusPoster from '../../services/status_poster/status_poster.service.js'
	import MediaUpload from '../media_upload/media_upload.vue'
	import ScopeSelector from '../scope_selector/scope_selector.vue'
	import EmojiInput from '../emoji_input/emoji_input.vue'
	import PollForm from '../poll/poll_form.vue'
	import Attachment from '../attachment/attachment.vue'
	import Gallery from 'src/components/gallery/gallery.vue'
	import StatusContent from '../status_content/status_content.vue'
	import fileTypeService from '../../services/file_type/file_type.service.js'
	import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
	import { reject, map, uniqBy, debounce } from 'lodash'
	import suggestor from '../emoji_input/suggestor.js'
	import { mapGetters, mapState } from 'vuex'
	import Checkbox from '../checkbox/checkbox.vue'
	import Select from '../select/select.vue'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faSmileBeam,
	faPollH,
	faUpload,
	faBan,
	faTimes,
	faCircleNotch
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faSmileBeam,
	faPollH,
	faUpload,
	faBan,
	faTimes,
	faCircleNotch
	)

	const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
	let allAttentions = [...attentions]

	allAttentions.unshift(user)

	allAttentions = uniqBy(allAttentions, 'id')
	allAttentions = reject(allAttentions, { id: currentUser.id })

	let mentions = map(allAttentions, (attention) => {
	return `@${attention.screen_name}`
	})

	return mentions.length > 0 ? mentions.join(' ') + ' ' : ''
	}

	// Converts a string with px to a number like '2px' -> 2
	const pxStringToNumber = (str) => {
	return Number(str.substring(0, str.length - 2))
	}

	const PostStatusForm = {
	props: [
	'replyTo',
	'repliedUser',
	'attentions',
	'copyMessageScope',
	'subject',
	'disableSubject',
	'disableScopeSelector',
	'disableNotice',
	'disableLockWarning',
	'disablePolls',
	'disableSensitivityCheckbox',
	'disableSubmit',
	'disablePreview',
	'placeholder',
	'maxHeight',
	'postHandler',
	'preserveFocus',
	'autoFocus',
	'fileLimit',
	'submitOnEnter',
	'emojiPickerPlacement',
	'optimisticPosting'
	],
	emits: [
	'posted',
	'resize',
	'mediaplay',
	'mediapause'
	],
	components: {
	MediaUpload,
	EmojiInput,
	PollForm,
	ScopeSelector,
	Checkbox,
	Select,
	Attachment,
	StatusContent,
	Gallery
	},
	mounted () {
	this.updateIdempotencyKey()
	this.resize(this.$refs.textarea)

	if (this.replyTo) {
	const textLength = this.$refs.textarea.value.length
	this.$refs.textarea.setSelectionRange(textLength, textLength)
	}

	if (this.replyTo \|\| this.autoFocus) {
	this.$refs.textarea.focus()
	}
	},
	data () {
	const preset = this.$route.query.message
	let statusText = preset \|\| ''

	const { scopeCopy } = this.$store.getters.mergedConfig

	if (this.replyTo) {
	const currentUser = this.$store.state.users.currentUser
	statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
	}

	const scope = ((this.copyMessageScope && scopeCopy) \|\| this.copyMessageScope === 'direct')
	? this.copyMessageScope
	: this.$store.state.users.currentUser.default_scope

	const { postContentType: contentType, sensitiveByDefault } = this.$store.getters.mergedConfig

	return {
	dropFiles: [],
	uploadingFiles: false,
	error: null,
	posting: false,
	highlighted: 0,
	newStatus: {
	spoilerText: this.subject \|\| '',
	status: statusText,
	nsfw: !!sensitiveByDefault,
	files: [],
	poll: {},
	mediaDescriptions: {},
	visibility: scope,
	contentType
	},
	caret: 0,
	pollFormVisible: false,
	showDropIcon: 'hide',
	dropStopTimeout: null,
	preview: null,
	previewLoading: false,
	emojiInputShown: false,
	idempotencyKey: ''
	}
	},
	computed: {
	users () {
	return this.$store.state.users.users
	},
	userDefaultScope () {
	return this.$store.state.users.currentUser.default_scope
	},
	showAllScopes () {
	return !this.mergedConfig.minimalScopesMode
	},
	emojiUserSuggestor () {
	return suggestor({
	emoji: [
	...this.$store.state.instance.emoji,
	...this.$store.state.instance.customEmoji
	],
	store: this.$store
	})
	},
	emojiSuggestor () {
	return suggestor({
	emoji: [
	...this.$store.state.instance.emoji,
	...this.$store.state.instance.customEmoji
	]
	})
	},
	emoji () {
	return this.$store.state.instance.emoji \|\| []
	},
	customEmoji () {
	return this.$store.state.instance.customEmoji \|\| []
	},
	statusLength () {
	return this.newStatus.status.length
	},
	spoilerTextLength () {
	return this.newStatus.spoilerText.length
	},
	statusLengthLimit () {
	return this.$store.state.instance.textlimit
	},
	hasStatusLengthLimit () {
	return this.statusLengthLimit > 0
	},
	charactersLeft () {
	return this.statusLengthLimit - (this.statusLength + this.spoilerTextLength)
	},
	isOverLengthLimit () {
	return this.hasStatusLengthLimit && (this.charactersLeft < 0)
	},
	minimalScopesMode () {
	return this.$store.state.instance.minimalScopesMode
	},
	alwaysShowSubject () {
	return this.mergedConfig.alwaysShowSubjectInput
	},
	postFormats () {
	return this.$store.state.instance.postFormats \|\| []
	},
	safeDMEnabled () {
	return this.$store.state.instance.safeDM
	},
	pollsAvailable () {
	return this.$store.state.instance.pollsAvailable &&
	this.$store.state.instance.pollLimits.max_options >= 2 &&
	this.disablePolls !== true
	},
	hideScopeNotice () {
	return this.disableNotice \|\| this.$store.getters.mergedConfig.hideScopeNotice
	},
	pollContentError () {
	return this.pollFormVisible &&
	this.newStatus.poll &&
	this.newStatus.poll.error
	},
	showPreview () {
	return !this.disablePreview && (!!this.preview \|\| this.previewLoading)
	},
	emptyStatus () {
	return this.newStatus.status.trim() === '' && this.newStatus.files.length === 0
	},
	uploadFileLimitReached () {
	return this.newStatus.files.length >= this.fileLimit
	},
	...mapGetters(['mergedConfig']),
	...mapState({
	mobileLayout: state => state.interface.mobileLayout
	})
	},
	watch: {
	'newStatus': {
	deep: true,
	handler () {
	this.statusChanged()
	}
	}
	},
	methods: {
	statusChanged () {
	this.autoPreview()
	this.updateIdempotencyKey()
	},
	clearStatus () {
	const newStatus = this.newStatus
	this.newStatus = {
	status: '',
	spoilerText: '',
	files: [],
	visibility: newStatus.visibility,
	contentType: newStatus.contentType,
	poll: {},
	mediaDescriptions: {}
	}
	this.pollFormVisible = false
	this.$refs.mediaUpload && this.$refs.mediaUpload.clearFile()
	this.clearPollForm()
	if (this.preserveFocus) {
	this.$nextTick(() => {
	this.$refs.textarea.focus()
	})
	}
	let el = this.$el.querySelector('textarea')
	el.style.height = 'auto'
	el.style.height = undefined
	this.error = null
	if (this.preview) this.previewStatus()
	},
	async postStatus (event, newStatus, opts = {}) {
	if (this.posting && !this.optimisticPosting) { return }
	if (this.disableSubmit) { return }
	if (this.emojiInputShown) { return }
	if (this.submitOnEnter) {
	event.stopPropagation()
	event.preventDefault()
	}

	if (this.optimisticPosting && (this.emptyStatus \|\| this.isOverLengthLimit)) { return }

	if (this.emptyStatus) {
	this.error = this.$t('post_status.empty_status_error')
	return
	}

	const poll = this.pollFormVisible ? this.newStatus.poll : {}
	if (this.pollContentError) {
	this.error = this.pollContentError
	return
	}

	this.posting = true

	try {
	await this.setAllMediaDescriptions()
	} catch (e) {
	this.error = this.$t('post_status.media_description_error')
	this.posting = false
	return
	}

	const postingOptions = {
	status: newStatus.status,
	spoilerText: newStatus.spoilerText \|\| null,
	visibility: newStatus.visibility,
	sensitive: newStatus.nsfw,
	media: newStatus.files,
	store: this.$store,
	inReplyToStatusId: this.replyTo,
	contentType: newStatus.contentType,
	poll,
	idempotencyKey: this.idempotencyKey
	}

	const postHandler = this.postHandler ? this.postHandler : statusPoster.postStatus

	postHandler(postingOptions).then((data) => {
	if (!data.error) {
	this.clearStatus()
	this.$emit('posted', data)
	} else {
	this.error = data.error
	}
	this.posting = false
	})
	},
	previewStatus () {
	if (this.emptyStatus && this.newStatus.spoilerText.trim() === '') {
	this.preview = { error: this.$t('post_status.preview_empty') }
	this.previewLoading = false
	return
	}
	const newStatus = this.newStatus
	this.previewLoading = true
	statusPoster.postStatus({
	status: newStatus.status,
	spoilerText: newStatus.spoilerText \|\| null,
	visibility: newStatus.visibility,
	sensitive: newStatus.nsfw,
	media: [],
	store: this.$store,
	inReplyToStatusId: this.replyTo,
	contentType: newStatus.contentType,
	poll: {},
	preview: true
	}).then((data) => {
	// Don't apply preview if not loading, because it means
	// user has closed the preview manually.
	if (!this.previewLoading) return
	if (!data.error) {
	this.preview = data
	} else {
	this.preview = { error: data.error }
	}
	}).catch((error) => {
	this.preview = { error }
	}).finally(() => {
	this.previewLoading = false
	})
	},
	debouncePreviewStatus: debounce(function () { this.previewStatus() }, 500),
	autoPreview () {
	if (!this.preview) return
	this.previewLoading = true
	this.debouncePreviewStatus()
	},
	closePreview () {
	this.preview = null
	this.previewLoading = false
	},
	togglePreview () {
	if (this.showPreview) {
	this.closePreview()
	} else {
	this.previewStatus()
	}
	},
	addMediaFile (fileInfo) {
	this.newStatus.files.push(fileInfo)
	this.$emit('resize', { delayed: true })
	},
	removeMediaFile (fileInfo) {
	let index = this.newStatus.files.indexOf(fileInfo)
	this.newStatus.files.splice(index, 1)
	this.$emit('resize')
	},
	editAttachment (fileInfo, newText) {
	this.newStatus.mediaDescriptions[fileInfo.id] = newText
	},
	shiftUpMediaFile (fileInfo) {
	const { files } = this.newStatus
	const index = this.newStatus.files.indexOf(fileInfo)
	files.splice(index, 1)
	files.splice(index - 1, 0, fileInfo)
	},
	shiftDnMediaFile (fileInfo) {
	const { files } = this.newStatus
	const index = this.newStatus.files.indexOf(fileInfo)
	files.splice(index, 1)
	files.splice(index + 1, 0, fileInfo)
	},
	uploadFailed (errString, templateArgs) {
	templateArgs = templateArgs \|\| {}
	this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs)
	},
	startedUploadingFiles () {
	this.uploadingFiles = true
	},
	finishedUploadingFiles () {
	this.$emit('resize')
	this.uploadingFiles = false
	},
	type (fileInfo) {
	return fileTypeService.fileType(fileInfo.mimetype)
	},
	paste (e) {
	this.autoPreview()
	this.resize(e)
	if (e.clipboardData.files.length > 0) {
	// prevent pasting of file as text
	e.preventDefault()
	// Strangely, files property gets emptied after event propagation
	// Trying to wrap it in array doesn't work. Plus I doubt it's possible
	// to hold more than one file in clipboard.
	this.dropFiles = [e.clipboardData.files[0]]
	}
	},
	fileDrop (e) {
	if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
	e.preventDefault() // allow dropping text like before
	this.dropFiles = e.dataTransfer.files
	clearTimeout(this.dropStopTimeout)
	this.showDropIcon = 'hide'
	}
	},
	fileDragStop (e) {
	// The false-setting is done with delay because just using leave-events
	// directly caused unwanted flickering, this is not perfect either but
	// much less noticable.
	clearTimeout(this.dropStopTimeout)
	this.showDropIcon = 'fade'
	this.dropStopTimeout = setTimeout(() => (this.showDropIcon = 'hide'), 500)
	},
	fileDrag (e) {
	e.dataTransfer.dropEffect = this.uploadFileLimitReached ? 'none' : 'copy'
	if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
	clearTimeout(this.dropStopTimeout)
	this.showDropIcon = 'show'
	}
	},
	onEmojiInputInput (e) {
	this.$nextTick(() => {
	this.resize(this.$refs['textarea'])
	})
	},
	resize (e) {
	const target = e.target \|\| e
	if (!(target instanceof window.Element)) { return }

	// Reset to default height for empty form, nothing else to do here.
	if (target.value === '') {
	target.style.height = null
	this.$emit('resize')
	this.$refs['emoji-input'].resize()
	return
	}

	const formRef = this.$refs['form']
	const bottomRef = this.$refs['bottom']
	/* Scroller is either `window` (replies in TL), sidebar (main post form,
	* replies in notifs) or mobile post form. Note that getting and setting
	* scroll is different for `Window` and `Element`s
	*/
	const bottomBottomPaddingStr = window.getComputedStyle(bottomRef)['padding-bottom']
	const bottomBottomPadding = pxStringToNumber(bottomBottomPaddingStr)

	- const scrollerRef = this.$el.closest('.sidebar-scroller') \|\|
	+ const scrollerRef = this.$el.closest('.column.-scrollable') \|\|
	this.$el.closest('.post-form-modal-view') \|\|
	window

	// Getting info about padding we have to account for, removing 'px' part
	const topPaddingStr = window.getComputedStyle(target)['padding-top']
	const bottomPaddingStr = window.getComputedStyle(target)['padding-bottom']
	const topPadding = pxStringToNumber(topPaddingStr)
	const bottomPadding = pxStringToNumber(bottomPaddingStr)
	const vertPadding = topPadding + bottomPadding

	const oldHeight = pxStringToNumber(target.style.height)

	/* Explanation:
	*
	* https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
	* scrollHeight returns element's scrollable content height, i.e. visible
	* element + overscrolled parts of it. We use it to determine when text
	* inside the textarea exceeded its height, so we can set height to prevent
	* overscroll, i.e. make textarea grow with the text. HOWEVER, since we
	* explicitly set new height, scrollHeight won't go below that, so we can't
	* SHRINK the textarea when there's extra space. To workaround that we set
	* height to 'auto' which makes textarea tiny again, so that scrollHeight
	* will match text height again. HOWEVER, shrinking textarea can screw with
	* the scroll since there might be not enough padding around form-bottom to even
	* warrant a scroll, so it will jump to 0 and refuse to move anywhere,
	* so we check current scroll position before shrinking and then restore it
	* with needed delta.
	*/

	// this part has to be BEFORE the content size update
	const currentScroll = scrollerRef === window
	? scrollerRef.scrollY
	: scrollerRef.scrollTop
	const scrollerHeight = scrollerRef === window
	? scrollerRef.innerHeight
	: scrollerRef.offsetHeight
	const scrollerBottomBorder = currentScroll + scrollerHeight

	// BEGIN content size update
	target.style.height = 'auto'
	const heightWithoutPadding = Math.floor(target.scrollHeight - vertPadding)
	let newHeight = this.maxHeight ? Math.min(heightWithoutPadding, this.maxHeight) : heightWithoutPadding
	// This is a bit of a hack to combat target.scrollHeight being different on every other input
	// on some browsers for whatever reason. Don't change the height if difference is 1px or less.
	if (Math.abs(newHeight - oldHeight) <= 1) {
	newHeight = oldHeight
	}
	target.style.height = `${newHeight}px`
	this.$emit('resize', newHeight)
	// END content size update

	// We check where the bottom border of form-bottom element is, this uses findOffset
	// to find offset relative to scrollable container (scroller)
	const bottomBottomBorder = bottomRef.offsetHeight + findOffset(bottomRef, scrollerRef).top + bottomBottomPadding

	const isBottomObstructed = scrollerBottomBorder < bottomBottomBorder
	const isFormBiggerThanScroller = scrollerHeight < formRef.offsetHeight
	const bottomChangeDelta = bottomBottomBorder - scrollerBottomBorder
	// The intention is basically this;
	// Keep form-bottom always visible so that submit button is in view EXCEPT
	// if form element bigger than scroller and caret isn't at the end, so that
	// if you scroll up and edit middle of text you won't get scrolled back to bottom
	const shouldScrollToBottom = isBottomObstructed &&
	!(isFormBiggerThanScroller &&
	this.$refs.textarea.selectionStart !== this.$refs.textarea.value.length)
	const totalDelta = shouldScrollToBottom ? bottomChangeDelta : 0
	const targetScroll = Math.round(currentScroll + totalDelta)

	if (scrollerRef === window) {
	scrollerRef.scroll(0, targetScroll)
	} else {
	scrollerRef.scrollTop = targetScroll
	}

	this.$refs['emoji-input'].resize()
	},
	showEmojiPicker () {
	this.$refs['textarea'].focus()
	this.$refs['emoji-input'].triggerShowPicker()
	},
	clearError () {
	this.error = null
	},
	changeVis (visibility) {
	this.newStatus.visibility = visibility
	},
	togglePollForm () {
	this.pollFormVisible = !this.pollFormVisible
	},
	setPoll (poll) {
	this.newStatus.poll = poll
	},
	clearPollForm () {
	if (this.$refs.pollForm) {
	this.$refs.pollForm.clear()
	}
	},
	dismissScopeNotice () {
	this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true })
	},
	setMediaDescription (id) {
	const description = this.newStatus.mediaDescriptions[id]
	if (!description \|\| description.trim() === '') return
	return statusPoster.setMediaDescription({ store: this.$store, id, description })
	},
	setAllMediaDescriptions () {
	const ids = this.newStatus.files.map(file => file.id)
	return Promise.all(ids.map(id => this.setMediaDescription(id)))
	},
	handleEmojiInputShow (value) {
	this.emojiInputShown = value
	},
	updateIdempotencyKey () {
	this.idempotencyKey = Date.now().toString()
	},
	openProfileTab () {
	this.$store.dispatch('openSettingsModalTab', 'profile')
	}
	}
	}

	export default PostStatusForm
	diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
	index 0fdb6dc733..62613bd1cc 100644
	--- a/src/components/post_status_form/post_status_form.vue
	+++ b/src/components/post_status_form/post_status_form.vue
	@@ -1,592 +1,575 @@
	<template>
	<div
	ref="form"
	class="post-status-form"
	>
	<form
	autocomplete="off"
	@submit.prevent
	@dragover.prevent="fileDrag"
	>
	- <div
	- v-show="showDropIcon !== 'hide'"
	- :style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
	- class="drop-indicator"
	- @dragleave="fileDragStop"
	- @drop.stop="fileDrop"
	- >
	- <FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
	- </div>
	<div class="form-group">
	<i18n-t
	v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
	keypath="post_status.account_not_locked_warning"
	tag="p"
	class="visibility-notice"
	scope="global"
	>
	<button
	class="button-unstyled -link"
	@click="openProfileTab"
	>
	{{ $t('post_status.account_not_locked_warning_link') }}
	</button>
	</i18n-t>
	<p
	v-if="!hideScopeNotice && newStatus.visibility === 'public'"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.public') }}</span>
	<a
	class="fa-scale-110 fa-old-padding dismiss"
	@click.prevent="dismissScopeNotice()"
	>
	<FAIcon icon="times" />
	</a>
	</p>
	<p
	v-else-if="!hideScopeNotice && newStatus.visibility === 'unlisted'"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.unlisted') }}</span>
	<a
	class="fa-scale-110 fa-old-padding dismiss"
	@click.prevent="dismissScopeNotice()"
	>
	<FAIcon icon="times" />
	</a>
	</p>
	<p
	v-else-if="!hideScopeNotice && newStatus.visibility === 'private' && $store.state.users.currentUser.locked"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.private') }}</span>
	<a
	class="fa-scale-110 fa-old-padding dismiss"
	@click.prevent="dismissScopeNotice()"
	>
	<FAIcon icon="times" />
	</a>
	</p>
	<p
	v-else-if="newStatus.visibility === 'direct'"
	class="visibility-notice"
	>
	<span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
	<span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
	</p>
	<div
	v-if="!disablePreview"
	class="preview-heading faint"
	>
	<a
	class="preview-toggle faint"
	@click.stop.prevent="togglePreview"
	>
	{{ $t('post_status.preview') }}
	<FAIcon :icon="showPreview ? 'chevron-left' : 'chevron-right'" />
	</a>
	<div
	v-show="previewLoading"
	class="preview-spinner"
	>
	<FAIcon
	class="fa-old-padding"
	spin
	icon="circle-notch"
	/>
	</div>
	</div>
	<div
	v-if="showPreview"
	class="preview-container"
	>
	<div
	v-if="!preview"
	class="preview-status"
	>
	{{ $t('general.loading') }}
	</div>
	<div
	v-else-if="preview.error"
	class="preview-status preview-error"
	>
	{{ preview.error }}
	</div>
	<StatusContent
	v-else
	:status="preview"
	class="preview-status"
	/>
	</div>
	<EmojiInput
	v-if="!disableSubject && (newStatus.spoilerText \|\| alwaysShowSubject)"
	v-model="newStatus.spoilerText"
	enable-emoji-picker
	:suggest="emojiSuggestor"
	class="form-control"
	>
	<input
	v-model="newStatus.spoilerText"
	type="text"
	:placeholder="$t('post_status.content_warning')"
	:disabled="posting && !optimisticPosting"
	size="1"
	class="form-post-subject"
	>
	</EmojiInput>
	<EmojiInput
	ref="emoji-input"
	v-model="newStatus.status"
	:suggest="emojiUserSuggestor"
	:placement="emojiPickerPlacement"
	class="form-control main-input"
	enable-emoji-picker
	hide-emoji-button
	:newline-on-ctrl-enter="submitOnEnter"
	enable-sticker-picker
	@input="onEmojiInputInput"
	@sticker-uploaded="addMediaFile"
	@sticker-upload-failed="uploadFailed"
	@shown="handleEmojiInputShow"
	>
	<textarea
	ref="textarea"
	v-model="newStatus.status"
	:placeholder="placeholder \|\| $t('post_status.default')"
	rows="1"
	cols="1"
	:disabled="posting && !optimisticPosting"
	class="form-post-body"
	:class="{ 'scrollable-form': !!maxHeight }"
	@keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
	@keydown.meta.enter="postStatus($event, newStatus)"
	@keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
	@input="resize"
	@compositionupdate="resize"
	@paste="paste"
	/>
	<p
	v-if="hasStatusLengthLimit"
	class="character-counter faint"
	:class="{ error: isOverLengthLimit }"
	>
	{{ charactersLeft }}
	</p>
	</EmojiInput>
	<div
	v-if="!disableScopeSelector"
	class="visibility-tray"
	>
	<scope-selector
	:show-all="showAllScopes"
	:user-default="userDefaultScope"
	:original-scope="copyMessageScope"
	:initial-scope="newStatus.visibility"
	:on-scope-change="changeVis"
	/>

	<div
	v-if="postFormats.length > 1"
	class="text-format"
	>
	<Select
	id="post-content-type"
	v-model="newStatus.contentType"
	class="form-control"
	>
	<option
	v-for="postFormat in postFormats"
	:key="postFormat"
	:value="postFormat"
	>
	{{ $t(`post_status.content_type["${postFormat}"]`) }}
	</option>
	</Select>
	</div>
	<div
	v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"
	class="text-format"
	>
	<span class="only-format">
	{{ $t(`post_status.content_type["${postFormats[0]}"]`) }}
	</span>
	</div>
	</div>
	</div>
	<poll-form
	v-if="pollsAvailable"
	ref="pollForm"
	:visible="pollFormVisible"
	@update-poll="setPoll"
	/>
	<div
	ref="bottom"
	class="form-bottom"
	>
	<div class="form-bottom-left">
	<media-upload
	ref="mediaUpload"
	class="media-upload-icon"
	:drop-files="dropFiles"
	:disabled="uploadFileLimitReached"
	@uploading="startedUploadingFiles"
	@uploaded="addMediaFile"
	@upload-failed="uploadFailed"
	@all-uploaded="finishedUploadingFiles"
	/>
	<button
	class="emoji-icon button-unstyled"
	:title="$t('emoji.add_emoji')"
	@click="showEmojiPicker"
	>
	<FAIcon icon="smile-beam" />
	</button>
	<button
	v-if="pollsAvailable"
	class="poll-icon button-unstyled"
	:class="{ selected: pollFormVisible }"
	:title="$t('polls.add_poll')"
	@click="togglePollForm"
	>
	<FAIcon icon="poll-h" />
	</button>
	</div>
	<button
	v-if="posting"
	disabled
	class="btn button-default"
	>
	{{ $t('post_status.posting') }}
	</button>
	<button
	v-else-if="isOverLengthLimit"
	disabled
	class="btn button-default"
	>
	{{ $t('post_status.post') }}
	</button>
	<!-- touchstart is used to keep the OSK at the same position after a message send -->
	<button
	v-else
	:disabled="uploadingFiles \|\| disableSubmit"
	class="btn button-default"
	@touchstart.stop.prevent="postStatus($event, newStatus)"
	@click.stop.prevent="postStatus($event, newStatus)"
	>
	{{ $t('post_status.post') }}
	</button>
	</div>
	+ <div
	+ v-show="showDropIcon !== 'hide'"
	+ :style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
	+ class="drop-indicator"
	+ @dragleave="fileDragStop"
	+ @drop.stop="fileDrop"
	+ >
	+ <FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
	+ </div>
	<div
	v-if="error"
	class="alert error"
	>
	Error: {{ error }}
	<button
	class="button-unstyled"
	@click="clearError"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="times"
	/>
	</button>
	</div>
	<gallery
	v-if="newStatus.files && newStatus.files.length > 0"
	class="attachments"
	:grid="true"
	:nsfw="false"
	:attachments="newStatus.files"
	:descriptions="newStatus.mediaDescriptions"
	:set-media="() => $store.dispatch('setMedia', newStatus.files)"
	:editable="true"
	:edit-attachment="editAttachment"
	:remove-attachment="removeMediaFile"
	:shift-up-attachment="newStatus.files.length > 1 && shiftUpMediaFile"
	:shift-dn-attachment="newStatus.files.length > 1 && shiftDnMediaFile"
	@play="$emit('mediaplay', attachment.id)"
	@pause="$emit('mediapause', attachment.id)"
	/>
	<div
	v-if="newStatus.files.length > 0 && !disableSensitivityCheckbox"
	class="upload_settings"
	>
	<Checkbox v-model="newStatus.nsfw">
	{{ $t('post_status.attachments_sensitive') }}
	</Checkbox>
	</div>
	</form>
	</div>
	</template>

	<script src="./post_status_form.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.post-status-form {
	position: relative;

	.attachments {
	margin-bottom: 0.5em;
	}

	.form-bottom {
	display: flex;
	justify-content: space-between;
	padding: 0.5em;
	- height: 32px;
	+ height: 2.5em;

	button {
	width: 10em;
	}

	p {
	margin: 0.35em;
	padding: 0.35em;
	display: flex;
	}
	}

	.form-bottom-left {
	display: flex;
	flex: 1;
	padding-right: 7px;
	margin-right: 7px;
	max-width: 10em;
	}

	.preview-heading {
	display: flex;
	padding-left: 0.5em;
	}

	.preview-toggle {
	flex: 1;
	cursor: pointer;
	user-select: none;

	&:hover {
	text-decoration: underline;
	}
	svg, i {
	margin-left: 0.2em;
	font-size: 0.8em;
	transform: rotate(90deg);
	}
	}

	.preview-container {
	margin-bottom: 1em;
	}

	.preview-error {
	font-style: italic;
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	}

	.preview-status {
	border: 1px solid $fallback--border;
	border: 1px solid var(--border, $fallback--border);
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	padding: 0.5em;
	margin: 0;
	- line-height: 1.4em;
	}

	.text-format {
	.only-format {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	}
	}

	.visibility-tray {
	display: flex;
	justify-content: space-between;
	padding-top: 5px;
	+ align-items: baseline;
	}

	.media-upload-icon, .poll-icon, .emoji-icon {
	- font-size: 26px;
	+ font-size: 1.85em;
	line-height: 1.1;
	flex: 1;
	padding: 0 0.1em;
	+ display: flex;
	+ align-items: center;

	&.selected, &:hover {
	// needs to be specific to override icon default color
	svg, i, label {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}
	}

	&.disabled {
	svg, i {
	cursor: not-allowed;
	color: $fallback--icon;
	color: var(--btnDisabledText, $fallback--icon);

	&:hover {
	color: $fallback--icon;
	color: var(--btnDisabledText, $fallback--icon);
	}
	}
	}
	}

	// Order is not necessary but a good indicator
	.media-upload-icon {
	order: 1;
	- text-align: left;
	+ justify-content: left;
	}

	.emoji-icon {
	order: 2;
	- text-align: center;
	+ justify-content: center;
	}

	.poll-icon {
	order: 3;
	- text-align: right;
	- }
	-
	- .poll-icon {
	- cursor: pointer;
	+ justify-content: right;
	}

	.error {
	text-align: center;
	}

	.media-upload-wrapper {
	margin-right: .2em;
	margin-bottom: .5em;
	width: 18em;

	img, video {
	object-fit: contain;
	max-height: 10em;
	}

	.video {
	max-height: 10em;
	}

	input {
	flex: 1;
	width: 100%;
	}
	}

	.status-input-wrapper {
	display: flex;
	position: relative;
	width: 100%;
	flex-direction: column;
	}

	- .btn {
	- cursor: pointer;
	- }
	-
	.btn[disabled] {
	cursor: not-allowed;
	}

	form {
	display: flex;
	flex-direction: column;
	margin: 0.6em;
	position: relative;
	}

	.form-group {
	display: flex;
	flex-direction: column;
	padding: 0.25em 0.5em 0.5em;
	- line-height:24px;
	- }
	-
	- form textarea.form-cw {
	- line-height:16px;
	- resize: none;
	- overflow: hidden;
	- transition: min-height 200ms 100ms;
	- min-height: 1px;
	+ line-height: 1.85;
	}

	.form-post-body {
	- height: 16px; // Only affects the empty-height
	- line-height: 16px;
	- resize: none;
	+ // TODO: make a resizable textarea component?
	+ box-sizing: content-box; // needed for easier computation of dynamic size
	overflow: hidden;
	transition: min-height 200ms 100ms;
	- padding-bottom: 1.75em;
	- min-height: 1px;
	- box-sizing: content-box;
	+ // stock padding + 1 line of text (for counter)
	+ padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em);
	+ // two lines of text
	+ height: calc(var(--post-line-height) * 1em);
	+ min-height: calc(var(--post-line-height) * 1em);
	+ resize: none;

	&.scrollable-form {
	overflow-y: auto;
	}
	}

	.main-input {
	position: relative;
	}

	.character-counter {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0;
	margin: 0 0.5em;

	&.error {
	color: $fallback--cRed;
	color: var(--cRed, $fallback--cRed);
	}
	}

	- .btn {
	- cursor: pointer;
	- }
	-
	.btn[disabled] {
	cursor: not-allowed;
	}

	@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 0.6; }
	}

	@keyframes fade-out {
	from { opacity: 0.6; }
	to { opacity: 0; }
	}

	.drop-indicator {
	position: absolute;
	- z-index: 1;
	width: 100%;
	height: 100%;
	font-size: 5em;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.6;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	border: 2px dashed $fallback--text;
	border: 2px dashed var(--text, $fallback--text);
	}
	}
	</style>
	diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
	index c69c315ba7..7f35b7b5e4 100644
	--- a/src/components/react_button/react_button.vue
	+++ b/src/components/react_button/react_button.vue
	@@ -1,129 +1,129 @@
	<template>
	<Popover
	trigger="click"
	class="ReactButton"
	placement="top"
	:offset="{ y: 5 }"
	:bound-to="{ x: 'container' }"
	remove-padding
	@show="focusInput"
	>
	<template v-slot:content="{close}">
	<div class="reaction-picker-filter">
	<input
	v-model="filterWord"
	size="1"
	:placeholder="$t('emoji.search_emoji')"
	>
	</div>
	<div class="reaction-picker">
	<span
	v-for="emoji in commonEmojis"
	:key="emoji.replacement"
	class="emoji-button"
	:title="emoji.displayText"
	@click="addReaction($event, emoji.replacement, close)"
	>
	{{ emoji.replacement }}
	</span>
	<div class="reaction-picker-divider" />
	<span
	v-for="(emoji, key) in emojis"
	:key="key"
	class="emoji-button"
	:title="emoji.displayText"
	@click="addReaction($event, emoji.replacement, close)"
	>
	{{ emoji.replacement }}
	</span>
	<div class="reaction-bottom-fader" />
	</div>
	</template>
	<template v-slot:trigger>
	<button
	class="button-unstyled popover-trigger"
	:title="$t('tool_tip.add_reaction')"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	:icon="['far', 'smile-beam']"
	/>
	</button>
	</template>
	</Popover>
	</template>

	<script src="./react_button.js" ></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.ReactButton {
	.reaction-picker-filter {
	padding: 0.5em;
	display: flex;

	input {
	flex: 1;
	}
	}

	.reaction-picker-divider {
	height: 1px;
	width: 100%;
	margin: 0.5em;
	background-color: var(--border, $fallback--border);
	}

	.reaction-picker {
	width: 10em;
	height: 9em;
	font-size: 1.5em;
	overflow-y: scroll;
	display: flex;
	flex-wrap: wrap;
	padding: 0.5em;
	text-align: center;
	align-content: flex-start;
	user-select: none;

	mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
	linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
	linear-gradient(to top, white, white);
	transition: mask-size 150ms;
	mask-size: 100% 20px, 100% 20px, auto;

	/* Autoprefixed seem to ignore this one, and also syntax is different */
	-webkit-mask-composite: xor;
	mask-composite: exclude;

	.emoji-button {
	cursor: pointer;

	flex-basis: 20%;
	- line-height: 1.5em;
	+ line-height: 1.5;
	align-content: center;

	&:hover {
	transform: scale(1.25);
	}
	}
	}

	/* override of popover internal stuff */
	.popover-trigger-button {
	width: auto;
	}

	.popover-trigger {
	padding: 10px;
	margin: -10px;

	&:hover .svg-inline--fa {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	}
	}

	</style>
	diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
	index 1f323f9de6..cc655c0b5a 100644
	--- a/src/components/registration/registration.vue
	+++ b/src/components/registration/registration.vue
	@@ -1,369 +1,372 @@
	<template>
	<div class="settings panel panel-default">
	<div class="panel-heading">
	{{ $t('registration.registration') }}
	</div>
	<div class="panel-body">
	<form
	class="registration-form"
	@submit.prevent="submit(user)"
	>
	<div class="container">
	<div class="text-fields">
	<div
	class="form-group"
	:class="{ 'form-group--error': v$.user.username.$error }"
	>
	<label
	class="form--label"
	for="sign-up-username"
	>{{ $t('login.username') }}</label>
	<input
	id="sign-up-username"
	v-model.trim="v$.user.username.$model"
	:disabled="isPending"
	class="form-control"
	:placeholder="$t('registration.username_placeholder')"
	>
	</div>
	<div
	v-if="v$.user.username.$dirty"
	class="form-error"
	>
	<ul>
	<li v-if="!v$.user.username.required">
	<span>{{ $t('registration.validations.username_required') }}</span>
	</li>
	</ul>
	</div>

	<div
	class="form-group"
	:class="{ 'form-group--error': v$.user.fullname.$error }"
	>
	<label
	class="form--label"
	for="sign-up-fullname"
	>{{ $t('registration.fullname') }}</label>
	<input
	id="sign-up-fullname"
	v-model.trim="v$.user.fullname.$model"
	:disabled="isPending"
	class="form-control"
	:placeholder="$t('registration.fullname_placeholder')"
	>
	</div>
	<div
	v-if="v$.user.fullname.$dirty"
	class="form-error"
	>
	<ul>
	<li v-if="!v$.user.fullname.required">
	<span>{{ $t('registration.validations.fullname_required') }}</span>
	</li>
	</ul>
	</div>

	<div
	class="form-group"
	:class="{ 'form-group--error': v$.user.email.$error }"
	>
	<label
	class="form--label"
	for="email"
	>{{ $t('registration.email') }}</label>
	<input
	id="email"
	v-model="v$.user.email.$model"
	:disabled="isPending"
	class="form-control"
	type="email"
	>
	</div>
	<div
	v-if="v$.user.email.$dirty"
	class="form-error"
	>
	<ul>
	<li v-if="!v$.user.email.required">
	<span>{{ $t('registration.validations.email_required') }}</span>
	</li>
	</ul>
	</div>

	<div class="form-group">
	<label
	class="form--label"
	for="bio"
	>{{ $t('registration.bio') }} ({{ $t('general.optional') }})</label>
	<textarea
	id="bio"
	v-model="user.bio"
	:disabled="isPending"
	class="form-control"
	:placeholder="bioPlaceholder"
	/>
	</div>

	<div
	class="form-group"
	:class="{ 'form-group--error': v$.user.password.$error }"
	>
	<label
	class="form--label"
	for="sign-up-password"
	>{{ $t('login.password') }}</label>
	<input
	id="sign-up-password"
	v-model="user.password"
	:disabled="isPending"
	class="form-control"
	type="password"
	>
	</div>
	<div
	v-if="v$.user.password.$dirty"
	class="form-error"
	>
	<ul>
	<li v-if="!v$.user.password.required">
	<span>{{ $t('registration.validations.password_required') }}</span>
	</li>
	</ul>
	</div>

	<div
	class="form-group"
	:class="{ 'form-group--error': v$.user.confirm.$error }"
	>
	<label
	class="form--label"
	for="sign-up-password-confirmation"
	>{{ $t('registration.password_confirm') }}</label>
	<input
	id="sign-up-password-confirmation"
	v-model="user.confirm"
	:disabled="isPending"
	class="form-control"
	type="password"
	>
	</div>
	<div
	v-if="v$.user.confirm.$dirty"
	class="form-error"
	>
	<ul>
	<li v-if="!v$.user.confirm.required">
	<span>{{ $t('registration.validations.password_confirmation_required') }}</span>
	</li>
	<li v-if="!v$.user.confirm.sameAsPassword">
	<span>{{ $t('registration.validations.password_confirmation_match') }}</span>
	</li>
	</ul>
	</div>

	<div
	class="form-group"
	:class="{ 'form-group--error': v$.user.language.$error }"
	>
	<interface-language-switcher
	for="email-language"
	:prompt-text="$t('registration.email_language')"
	:language="v$.user.language.$model"
	:set-language="val => v$.user.language.$model = val"
	/>
	</div>

	<div
	v-if="accountApprovalRequired"
	class="form-group"
	>
	<label
	class="form--label"
	for="reason"
	>{{ $t('registration.reason') }}</label>
	<textarea
	id="reason"
	v-model="user.reason"
	:disabled="isPending"
	class="form-control"
	:placeholder="reasonPlaceholder"
	/>
	</div>

	<div
	v-if="captcha.type != 'none'"
	id="captcha-group"
	class="form-group"
	>
	<label
	class="form--label"
	for="captcha-label"
	>{{ $t('registration.captcha') }}</label>

	<template v-if="['kocaptcha', 'native'].includes(captcha.type)">
	<img
	:src="captcha.url"
	@click="setCaptcha"
	>

	<sub>{{ $t('registration.new_captcha') }}</sub>

	<input
	id="captcha-answer"
	v-model="captcha.solution"
	:disabled="isPending"
	class="form-control"
	type="text"
	autocomplete="off"
	autocorrect="off"
	autocapitalize="off"
	spellcheck="false"
	>
	</template>
	</div>

	<div
	v-if="token"
	class="form-group"
	>
	<label for="token">{{ $t('registration.token') }}</label>
	<input
	id="token"
	v-model="token"
	disabled="true"
	class="form-control"
	type="text"
	>
	</div>
	<div class="form-group">
	<button
	:disabled="isPending"
	type="submit"
	class="btn button-default"
	>
	{{ $t('registration.register') }}
	</button>
	</div>
	</div>

	<!-- eslint-disable vue/no-v-html -->
	<div
	class="terms-of-service"
	v-html="termsOfService"
	/>
	<!-- eslint-enable vue/no-v-html -->
	</div>
	<div
	v-if="serverValidationErrors.length"
	class="form-group"
	>
	<div class="alert error">
	<span
	v-for="error in serverValidationErrors"
	:key="error"
	>{{ error }}</span>
	</div>
	</div>
	</form>
	</div>
	</div>
	</template>

	<script src="./registration.js"></script>
	<style lang="scss">
	@import '../../_variables.scss';
	$validations-cRed: #f04124;

	.registration-form {
	display: flex;
	flex-direction: column;
	margin: 0.6em;

	.container {
	display: flex;
	flex-direction: row;
	- //margin-bottom: 1em;
	+
	+ > * {
	+ min-width: 0;
	+ }
	}

	.terms-of-service {
	flex: 0 1 50%;
	margin: 0.8em;
	}

	.text-fields {
	margin-top: 0.6em;
	flex: 1 0;
	display: flex;
	flex-direction: column;
	}

	textarea {
	min-height: 100px;
	resize: vertical;
	}

	.form-group {
	display: flex;
	flex-direction: column;
	- padding: 0.3em 0.0em 0.3em;
	- line-height:24px;
	+ padding: 0.3em 0;
	+ line-height: 2;
	margin-bottom: 1em;
	}

	.form-group--error {
	animation-name: shakeError;
	animation-duration: .6s;
	animation-timing-function: ease-in-out;
	}

	.form-group--error .form--label {
	color: $validations-cRed;
	color: var(--cRed, $validations-cRed);
	}

	.form-error {
	margin-top: -0.7em;
	text-align: left;

	span {
	- font-size: 12px;
	+ font-size: 0.85em;
	}
	}

	.form-error ul {
	list-style: none;
	padding: 0 0 0 5px;
	margin-top: 0;

	li::before {
	content: "• ";
	}
	}

	form textarea {
	line-height:16px;
	resize: vertical;
	}

	.captcha {
	max-width: 350px;
	margin-bottom: 0.4em;
	}

	.btn {
	margin-top: 0.6em;
	- height: 28px;
	+ height: 2em;
	}

	.error {
	text-align: center;
	}
	}

	@media all and (max-width: 800px) {
	.registration-form .container {
	flex-direction: column-reverse;
	}
	}
	</style>
	diff --git a/src/components/remote_follow/remote_follow.vue b/src/components/remote_follow/remote_follow.vue
	index be8274001c..e17aa2e928 100644
	--- a/src/components/remote_follow/remote_follow.vue
	+++ b/src/components/remote_follow/remote_follow.vue
	@@ -1,38 +1,38 @@
	<template>
	<div class="remote-follow">
	<form
	method="POST"
	:action="subscribeUrl"
	>
	<input
	type="hidden"
	name="nickname"
	:value="user.screen_name"
	>
	<input
	type="hidden"
	name="profile"
	value=""
	>
	<button
	click="submit"
	class="button-default remote-button"
	>
	{{ $t('user_card.remote_follow') }}
	</button>
	</form>
	</div>
	</template>

	<script src="./remote_follow.js"></script>

	<style lang="scss">
	.remote-follow {
	max-width: 220px;

	.remote-button {
	width: 100%;
	- min-height: 28px;
	+ min-height: 2em;
	}
	}
	</style>
	diff --git a/src/components/select/select.vue b/src/components/select/select.vue
	index ea8c8b695d..92493b0b77 100644
	--- a/src/components/select/select.vue
	+++ b/src/components/select/select.vue
	@@ -1,64 +1,64 @@
	<template>
	<label
	class="Select input"
	:class="{ disabled, unstyled }"
	>
	<select
	:disabled="disabled"
	:value="modelValue"
	@change="$emit('update:modelValue', $event.target.value)"
	>
	<slot />
	</select>
	{{ ' ' }}
	<FAIcon
	class="select-down-icon"
	icon="chevron-down"
	/>
	</label>
	</template>

	<script src="./select.js"> </script>

	<style lang="scss">
	@import '../../_variables.scss';

	/* TODO fix order of styles */
	label.Select {
	padding: 0;

	select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: none;
	color: $fallback--text;
	color: var(--inputText, --text, $fallback--text);
	margin: 0;
	padding: 0 2em 0 .2em;
	font-family: sans-serif;
	font-family: var(--inputFont, sans-serif);
	- font-size: 14px;
	+ font-size: 1em;
	width: 100%;
	z-index: 1;
	- height: 28px;
	+ height: 2em;
	line-height: 16px;
	}

	.select-down-icon {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 5px;
	height: 100%;
	width: 0.875em;
	color: $fallback--text;
	color: var(--inputText, $fallback--text);
	- line-height: 28px;
	+ line-height: 2;
	z-index: 0;
	pointer-events: none;
	}

	}
	</style>
	diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
	index 2f7649a912..13cb0e650e 100644
	--- a/src/components/settings_modal/settings_modal.scss
	+++ b/src/components/settings_modal/settings_modal.scss
	@@ -1,63 +1,75 @@
	@import 'src/_variables.scss';
	.settings-modal {
	overflow: hidden;

	+ .setting-list,
	+ .option-list {
	+ list-style-type: none;
	+ padding-left: 2em;
	+ li {
	+ margin-bottom: 0.5em;
	+ }
	+ .suboptions {
	+ margin-top: 0.3em
	+ }
	+ }
	+
	&.peek {
	.settings-modal-panel {
	/* Explanation:
	* Modal is positioned vertically centered.
	* 100vh - 100% = Distance between modal's top+bottom boundaries and screen
	* (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
	* + 100% - we move modal completely off-screen, it's top boundary touches
	* bottom of the screen
	* - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
	*/
	transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));

	@media all and (max-width: 800px) {
	/* For mobile, the modal takes 100% of the available screen.
	This ensures the minimized modal is always 50px above the browser bottom bar regardless of whether or not it is visible.
	*/
	transform: translateY(calc(100% - 50px));
	}
	}
	}

	.settings-modal-panel {
	overflow: hidden;
	transition: transform;
	transition-timing-function: ease-in-out;
	transition-duration: 300ms;
	width: 1000px;
	max-width: 90vw;
	height: 90vh;

	@media all and (max-width: 800px) {
	max-width: 100vw;
	height: 100%;
	}

	>.panel-body {
	height: 100%;
	overflow-y: hidden;

	.btn {
	- min-height: 28px;
	+ min-height: 2em;
	min-width: 10em;
	padding: 0 2em;
	}
	}
	}

	.settings-footer {
	display: flex;
	>* {
	margin-right: 0.5em;
	}

	.extra-content {
	display: flex;
	flex-grow: 1;
	}
	}
	}
	diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
	index e0e8304dd9..d3bed0610e 100644
	--- a/src/components/settings_modal/settings_modal.vue
	+++ b/src/components/settings_modal/settings_modal.vue
	@@ -1,130 +1,121 @@
	<template>
	<Modal
	:is-open="modalActivated"
	class="settings-modal"
	:class="{ peek: modalPeeked }"
	:no-background="modalPeeked"
	>
	<div class="settings-modal-panel panel">
	<div class="panel-heading">
	<span class="title">
	{{ $t('settings.settings') }}
	</span>
	<transition name="fade">
	- <div v-if="currentSaveStateNotice">
	- <div
	- v-if="currentSaveStateNotice.error"
	- class="alert error"
	- @click.prevent
	- >
	- {{ $t('settings.saving_err') }}
	- </div>
	-
	- <div
	- v-if="!currentSaveStateNotice.error"
	- class="alert transparent"
	- @click.prevent
	- >
	- {{ $t('settings.saving_ok') }}
	- </div>
	+ <div
	+ v-if="currentSaveStateNotice"
	+ class="alert"
	+ :class="{ transparent: !currentSaveStateNotice.error, error: currentSaveStateNotice.error}"
	+ @click.prevent
	+ >
	+ {{ currentSaveStateNotice.error ? $t('settings.saving_err') : $t('settings.saving_ok') }}
	</div>
	</transition>
	<button
	class="btn button-default"
	:title="$t('general.peek')"
	@click="peekModal"
	>
	<FAIcon
	:icon="['far', 'window-minimize']"
	fixed-width
	/>
	</button>
	<button
	class="btn button-default"
	:title="$t('general.close')"
	@click="closeModal"
	>
	<FAIcon
	icon="times"
	fixed-width
	/>
	</button>
	</div>
	<div class="panel-body">
	<SettingsModalContent v-if="modalOpenedOnce" />
	</div>
	<div class="panel-footer settings-footer">
	<Popover
	class="export"
	trigger="click"
	placement="top"
	:offset="{ y: 5, x: 5 }"
	:bound-to="{ x: 'container' }"
	remove-padding
	>
	<template v-slot:trigger>
	<button
	class="btn button-default"
	:title="$t('general.close')"
	>
	<span>{{ $t("settings.file_export_import.backup_restore") }}</span>
	{{ ' ' }}
	<FAIcon
	icon="chevron-down"
	/>
	</button>
	</template>
	<template v-slot:content="{close}">
	<div class="dropdown-menu">
	<button
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="backup"
	@click="close"
	>
	<FAIcon
	icon="file-download"
	fixed-width
	/><span>{{ $t("settings.file_export_import.backup_settings") }}</span>
	</button>
	<button
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="backupWithTheme"
	@click="close"
	>
	<FAIcon
	icon="file-download"
	fixed-width
	/><span>{{ $t("settings.file_export_import.backup_settings_theme") }}</span>
	</button>
	<button
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="restore"
	@click="close"
	>
	<FAIcon
	icon="file-upload"
	fixed-width
	/><span>{{ $t("settings.file_export_import.restore_settings") }}</span>
	</button>
	</div>
	</template>
	</Popover>

	<Checkbox
	:model-value="!!expertLevel"
	@update:modelValue="expertLevel = Number($event)"
	>
	{{ $t("settings.expert_mode") }}
	</Checkbox>
	<span
	id="unscrolled-content"
	class="extra-content"
	/>
	</div>
	</div>
	</Modal>
	</template>

	<script src="./settings_modal.js"></script>

	<style src="./settings_modal.scss" lang="scss"></style>
	diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
	index de925155c5..1e11b9e0bc 100644
	--- a/src/components/settings_modal/tabs/general_tab.js
	+++ b/src/components/settings_modal/tabs/general_tab.js
	@@ -1,90 +1,95 @@
	import BooleanSetting from '../helpers/boolean_setting.vue'
	import ChoiceSetting from '../helpers/choice_setting.vue'
	import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
	import IntegerSetting from '../helpers/integer_setting.vue'
	import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'

	import SharedComputedObject from '../helpers/shared_computed_object.js'
	import ServerSideIndicator from '../helpers/server_side_indicator.vue'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faGlobe
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faGlobe
	)

	const GeneralTab = {
	data () {
	return {
	subjectLineOptions: ['email', 'noop', 'masto'].map(mode => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`)
	})),
	conversationDisplayOptions: ['tree', 'linear'].map(mode => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.conversation_display_${mode}`)
	})),
	conversationOtherRepliesButtonOptions: ['below', 'inside'].map(mode => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.conversation_other_replies_button_${mode}`)
	})),
	mentionLinkDisplayOptions: ['short', 'full_for_remote', 'full'].map(mode => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.mention_link_display_${mode}`)
	})),
	+ thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
	+ key: mode,
	+ value: mode,
	+ label: this.$t(`settings.third_column_mode_${mode}`)
	+ })),
	loopSilentAvailable:
	// Firefox
	Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') \|\|
	// Chrome-likes
	Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') \|\|
	// Future spec, still not supported in Nightly 63 as of 08/2018
	Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks')
	}
	},
	components: {
	BooleanSetting,
	ChoiceSetting,
	IntegerSetting,
	InterfaceLanguageSwitcher,
	ScopeSelector,
	ServerSideIndicator
	},
	computed: {
	postFormats () {
	return this.$store.state.instance.postFormats \|\| []
	},
	postContentOptions () {
	return this.postFormats.map(format => ({
	key: format,
	value: format,
	label: this.$t(`post_status.content_type["${format}"]`)
	}))
	},
	instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
	instanceWallpaperUsed () {
	return this.$store.state.instance.background &&
	!this.$store.state.users.currentUser.background_image
	},
	instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
	language: {
	get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
	set: function (val) {
	this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
	}
	},
	...SharedComputedObject()
	},
	methods: {
	changeDefaultScope (value) {
	this.$store.dispatch('setServerSideOption', { name: 'defaultScope', value })
	}
	}
	}

	export default GeneralTab
	diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
	index 39149d7f7c..1fe51b6d10 100644
	--- a/src/components/settings_modal/tabs/general_tab.vue
	+++ b/src/components/settings_modal/tabs/general_tab.vue
	@@ -1,403 +1,423 @@
	<template>
	<div :label="$t('settings.general')">
	<div class="setting-item">
	<h2>{{ $t('settings.interface') }}</h2>
	<ul class="setting-list">
	<li>
	<interface-language-switcher
	:prompt-text="$t('settings.interfaceLanguage')"
	:language="language"
	:set-language="val => language = val"
	/>
	</li>
	<li v-if="instanceSpecificPanelPresent">
	<BooleanSetting path="hideISP">
	{{ $t('settings.hide_isp') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="sidebarRight">
	{{ $t('settings.right_sidebar') }}
	</BooleanSetting>
	</li>
	<li v-if="instanceWallpaperUsed">
	<BooleanSetting path="hideInstanceWallpaper">
	{{ $t('settings.hide_wallpaper') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="stopGifs">
	{{ $t('settings.stop_gifs') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="streaming">
	{{ $t('settings.streaming') }}
	</BooleanSetting>
	<ul
	class="setting-list suboptions"
	:class="[{disabled: !streaming}]"
	>
	<li>
	<BooleanSetting
	path="pauseOnUnfocused"
	:disabled="!streaming"
	>
	{{ $t('settings.pause_on_unfocused') }}
	</BooleanSetting>
	</li>
	</ul>
	</li>
	<li>
	<BooleanSetting
	path="useStreamingApi"
	expert="1"
	>
	{{ $t('settings.useStreamingApi') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="virtualScrolling"
	expert="1"
	>
	{{ $t('settings.virtual_scrolling') }}
	</BooleanSetting>
	</li>
	+ <li>
	+ <BooleanSetting path="disableStickyHeaders">
	+ {{ $t('settings.disable_sticky_headers') }}
	+ </BooleanSetting>
	+ </li>
	+ <li>
	+ <BooleanSetting path="showScrollbars">
	+ {{ $t('settings.show_scrollbars') }}
	+ </BooleanSetting>
	+ </li>
	+ <li>
	+ <ChoiceSetting
	+ v-if="user"
	+ id="thirdColumnMode"
	+ path="thirdColumnMode"
	+ :options="thirdColumnModeOptions"
	+ >
	+ {{ $t('settings.third_column_mode') }}
	+ </ChoiceSetting>
	+ </li>
	<li>
	<BooleanSetting
	path="alwaysShowNewPostButton"
	expert="1"
	>
	{{ $t('settings.always_show_post_button') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="autohideFloatingPostButton"
	expert="1"
	>
	{{ $t('settings.autohide_floating_post_button') }}
	</BooleanSetting>
	</li>
	<li v-if="instanceShoutboxPresent">
	<BooleanSetting
	path="hideShoutbox"
	expert="1"
	>
	{{ $t('settings.hide_shoutbox') }}
	</BooleanSetting>
	</li>
	</ul>
	</div>
	<div class="setting-item">
	<h2>{{ $t('settings.post_look_feel') }}</h2>
	<ul class="setting-list">
	<li>
	<ChoiceSetting
	id="conversationDisplay"
	path="conversationDisplay"
	:options="conversationDisplayOptions"
	>
	{{ $t('settings.conversation_display') }}
	</ChoiceSetting>
	</li>
	<ul
	v-if="conversationDisplay !== 'linear'"
	class="setting-list suboptions"
	>
	<li>
	<BooleanSetting path="conversationTreeAdvanced">
	{{ $t('settings.tree_advanced') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="conversationTreeFadeAncestors"
	:expert="1"
	>
	{{ $t('settings.tree_fade_ancestors') }}
	</BooleanSetting>
	</li>
	<li>
	<IntegerSetting
	path="maxDepthInThread"
	:min="3"
	:expert="1"
	>
	{{ $t('settings.max_depth_in_thread') }}
	</IntegerSetting>
	</li>
	<li>
	<ChoiceSetting
	id="conversationOtherRepliesButton"
	path="conversationOtherRepliesButton"
	:options="conversationOtherRepliesButtonOptions"
	:expert="1"
	>
	{{ $t('settings.conversation_other_replies_button') }}
	</ChoiceSetting>
	</li>
	</ul>
	<li>
	<BooleanSetting path="collapseMessageWithSubject">
	{{ $t('settings.collapse_subject') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="emojiReactionsOnTimeline"
	expert="1"
	>
	{{ $t('settings.emoji_reactions_on_timeline') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	v-if="user"
	path="serverSide_stripRichContent"
	expert="1"
	>
	{{ $t('settings.no_rich_text_description') }}
	</BooleanSetting>
	</li>
	<h3>{{ $t('settings.attachments') }}</h3>
	<li>
	<BooleanSetting
	path="useContainFit"
	expert="1"
	>
	{{ $t('settings.use_contain_fit') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="hideNsfw">
	{{ $t('settings.nsfw_clickthrough') }}
	</BooleanSetting>
	</li>
	<ul class="setting-list suboptions">
	<li>
	<BooleanSetting
	path="preloadImage"
	expert="1"
	:disabled="!hideNsfw"
	>
	{{ $t('settings.preload_images') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="useOneClickNsfw"
	expert="1"
	:disabled="!hideNsfw"
	>
	{{ $t('settings.use_one_click_nsfw') }}
	</BooleanSetting>
	</li>
	</ul>
	<li>
	<BooleanSetting
	path="loopVideo"
	expert="1"
	>
	{{ $t('settings.loop_video') }}
	</BooleanSetting>
	<ul
	class="setting-list suboptions"
	:class="[{disabled: !streaming}]"
	>
	<li>
	<BooleanSetting
	path="loopVideoSilentOnly"
	expert="1"
	:disabled="!loopVideo \|\| !loopSilentAvailable"
	>
	{{ $t('settings.loop_video_silent_only') }}
	</BooleanSetting>
	<div
	v-if="!loopSilentAvailable"
	class="unavailable"
	>
	<FAIcon icon="globe" />! {{ $t('settings.limited_availability') }}
	</div>
	</li>
	</ul>
	</li>
	<li>
	<BooleanSetting
	path="playVideosInModal"
	expert="1"
	>
	{{ $t('settings.play_videos_in_modal') }}
	</BooleanSetting>
	</li>
	<h3>{{ $t('settings.mention_links') }}</h3>
	<li>
	<ChoiceSetting
	id="mentionLinkDisplay"
	path="mentionLinkDisplay"
	:options="mentionLinkDisplayOptions"
	>
	{{ $t('settings.mention_link_display') }}
	</ChoiceSetting>
	</li>
	<ul
	class="setting-list suboptions"
	>
	<li v-if="mentionLinkDisplay === 'short'">
	<BooleanSetting
	path="mentionLinkShowTooltip"
	expert="1"
	>
	{{ $t('settings.mention_link_show_tooltip') }}
	</BooleanSetting>
	</li>
	</ul>
	<li>
	<BooleanSetting
	path="useAtIcon"
	expert="1"
	>
	{{ $t('settings.use_at_icon') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="mentionLinkShowAvatar">
	{{ $t('settings.mention_link_show_avatar') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="mentionLinkFadeDomain"
	expert="1"
	>
	{{ $t('settings.mention_link_fade_domain') }}
	</BooleanSetting>
	</li>
	<li v-if="user">
	<BooleanSetting
	path="mentionLinkBoldenYou"
	expert="1"
	>
	{{ $t('settings.mention_link_bolden_you') }}
	</BooleanSetting>
	</li>
	<h3 v-if="expertLevel > 0">
	{{ $t('settings.fun') }}
	</h3>
	<li>
	<BooleanSetting
	path="greentext"
	expert="1"
	>
	{{ $t('settings.greentext') }}
	</BooleanSetting>
	</li>
	<li v-if="user">
	<BooleanSetting
	path="mentionLinkShowYous"
	expert="1"
	>
	{{ $t('settings.show_yous') }}
	</BooleanSetting>
	</li>
	</ul>
	</div>

	<div
	v-if="user"
	class="setting-item"
	>
	<h2>{{ $t('settings.composing') }}</h2>
	<ul class="setting-list">
	<li>
	<label for="default-vis">
	{{ $t('settings.default_vis') }} <ServerSideIndicator :server-side="true" />
	<ScopeSelector
	class="scope-selector"
	:show-all="true"
	:user-default="serverSide_defaultScope"
	:initial-scope="serverSide_defaultScope"
	:on-scope-change="changeDefaultScope"
	/>
	</label>
	</li>
	<li>
	<!-- <BooleanSetting path="serverSide_defaultNSFW"> -->
	<BooleanSetting path="sensitiveByDefault">
	{{ $t('settings.sensitive_by_default') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="scopeCopy"
	expert="1"
	>
	{{ $t('settings.scope_copy') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="alwaysShowSubjectInput"
	expert="1"
	>
	{{ $t('settings.subject_input_always_show') }}
	</BooleanSetting>
	</li>
	<li>
	<ChoiceSetting
	id="subjectLineBehavior"
	path="subjectLineBehavior"
	:options="subjectLineOptions"
	expert="1"
	>
	{{ $t('settings.subject_line_behavior') }}
	</ChoiceSetting>
	</li>
	<li v-if="postFormats.length > 0">
	<ChoiceSetting
	id="postContentType"
	path="postContentType"
	:options="postContentOptions"
	>
	{{ $t('settings.post_status_content_type') }}
	</ChoiceSetting>
	</li>
	<li>
	<BooleanSetting
	path="minimalScopesMode"
	expert="1"
	>
	{{ $t('settings.minimal_scopes_mode') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="alwaysShowNewPostButton"
	expert="1"
	>
	{{ $t('settings.always_show_post_button') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="autohideFloatingPostButton"
	expert="1"
	>
	{{ $t('settings.autohide_floating_post_button') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="padEmoji"
	expert="1"
	>
	{{ $t('settings.pad_emoji') }}
	</BooleanSetting>
	</li>
	</ul>
	</div>
	</div>
	</template>

	<script src="./general_tab.js"></script>
	diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss b/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss
	index ceb64efbc8..2adff84755 100644
	--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss
	+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss
	@@ -1,29 +1,29 @@
	.mutes-and-blocks-tab {
	height: 100%;

	.usersearch-wrapper {
	padding: 1em;
	}

	.bulk-actions {
	text-align: right;
	padding: 0 1em;
	- min-height: 28px;
	+ min-height: 2em;
	}

	.bulk-action-button {
	width: 10em
	}

	.domain-mute-form {
	padding: 1em;
	display: flex;
	flex-direction: column
	}

	.domain-mute-button {
	align-self: flex-end;
	margin-top: 1em;
	width: 10em
	}
	}
	diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
	index 3c9683cdb7..201f1a7640 100644
	--- a/src/components/settings_modal/tabs/profile_tab.scss
	+++ b/src/components/settings_modal/tabs/profile_tab.scss
	@@ -1,131 +1,131 @@
	@import '../../../_variables.scss';
	.profile-tab {
	.bio {
	margin: 0;
	}

	.visibility-tray {
	padding-top: 5px;
	}

	input[type=file] {
	padding: 5px;
	height: auto;
	}

	.banner-background-preview {
	max-width: 100%;
	width: 300px;
	position: relative;

	img {
	width: 100%;
	}
	}

	.uploading {
	font-size: 1.5em;
	margin: 0.25em;
	}

	.name-changer {
	width: 100%;
	}

	.current-avatar-container {
	position: relative;
	width: 150px;
	height: 150px;
	}

	.current-avatar {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: $fallback--avatarRadius;
	border-radius: var(--avatarRadius, $fallback--avatarRadius);
	}

	.reset-button {
	position: absolute;
	top: 0.2em;
	right: 0.2em;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	background-color: rgba(0, 0, 0, 0.6);
	opacity: 0.7;
	width: 1.5em;
	height: 1.5em;
	text-align: center;
	line-height: 1.5em;
	font-size: 1.5em;
	cursor: pointer;

	&:hover {
	opacity: 1;
	}

	svg {
	color: white;
	}
	}

	.oauth-tokens {
	width: 100%;

	th {
	text-align: left;
	}

	.actions {
	text-align: right;
	}
	}

	&-usersearch-wrapper {
	padding: 1em;
	}

	&-bulk-actions {
	text-align: right;
	padding: 0 1em;
	- min-height: 28px;
	+ min-height: 2em;

	button {
	width: 10em;
	}
	}

	&-domain-mute-form {
	padding: 1em;
	display: flex;
	flex-direction: column;

	button {
	align-self: flex-end;
	margin-top: 1em;
	width: 10em;
	}
	}

	.setting-subitem {
	margin-left: 1.75em;
	}

	.profile-fields {
	display: flex;

	& > .emoji-input {
	flex: 1 1 auto;
	margin: 0 0.2em 0.5em;
	min-width: 0;
	}

	.delete-field {
	width: 20px;
	align-self: center;
	margin: 0 0.2em 0.5em;
	padding: 0 0.5em;
	}
	}
	}
	diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
	index 21b49a32c5..bad6f51b1f 100644
	--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
	+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
	@@ -1,351 +1,334 @@
	@import 'src/_variables.scss';
	.theme-tab {
	padding-bottom: 2em;
	.theme-warning {
	display: flex;
	align-items: baseline;
	margin-bottom: .5em;
	.buttons {
	.btn {
	margin-bottom: .5em;
	}
	}
	}
	.preset-switcher {
	margin-right: 1em;
	}

	.style-control {
	display: flex;
	align-items: baseline;
	margin-bottom: 5px;

	.label {
	flex: 1;
	}

	&.disabled {
	input, select {
	opacity: .5
	}
	}

	.opt {
	margin: .5em;
	}

	.color-input {
	flex: 0 0 0;
	}

	input, select {
	min-width: 3em;
	margin: 0;
	flex: 0;

	&[type=number] {
	min-width: 5em;
	}

	&[type=range] {
	flex: 1;
	min-width: 3em;
	align-self: flex-start;
	}
	}
	}

	.reset-container {
	flex-wrap: wrap;
	}

	.fonts-container,
	.reset-container,
	.apply-container,
	.radius-container,
	.color-container,
	{
	display: flex;
	}

	.fonts-container,
	.radius-container {
	flex-direction: column;
	}

	.color-container{
	> h4 {
	width: 99%;
	}
	flex-wrap: wrap;
	justify-content: space-between;
	}

	.fonts-container,
	.color-container,
	.shadow-container,
	.radius-container,
	.presets-container {
	margin: 1em 1em 0;
	}

	.tab-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	width: 100%;
	min-height: 30px;
	margin-bottom: 1em;

	p {
	flex: 1;
	margin: 0;
	margin-right: .5em;
	}
	}

	.tab-header-buttons {
	display: flex;
	flex-direction: column;

	.btn {
	min-width: 1px;
	flex: 0 auto;
	padding: 0 1em;
	margin-bottom: .5em;
	}
	}

	.shadow-selector {
	.override {
	flex: 1;
	margin-left: .5em;
	}
	.select-container {
	margin-top: -4px;
	margin-bottom: -3px;
	}
	}

	.save-load,
	.save-load-options {
	display: flex;
	justify-content: center;
	align-items: baseline;
	flex-wrap: wrap;

	.presets,
	.import-export {
	margin-bottom: .5em;
	}

	.import-export {
	display: flex;
	}

	.override {
	margin-left: .5em;
	}
	}

	.save-load-options {
	flex-wrap: wrap;
	margin-top: .5em;
	justify-content: center;
	.keep-option {
	margin: 0 .5em .5em;
	min-width: 25%;
	}
	}

	.preview-container {
	border-top: 1px dashed;
	border-bottom: 1px dashed;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	margin: 1em 0;
	padding: 1em;
	background-color: var(--wallpaper);
	background-image: var(--body-background-image);
	background-size: cover;
	background-position: 50% 50%;

	.dummy {
	.post {
	font-family: var(--postFont);
	display: flex;

	.content {
	flex: 1;

	h4 {
	margin-bottom: .25em;
	}

	.icons {
	margin-top: .5em;
	display: flex;

	i {
	margin-right: 1em;
	}
	}
	}
	}

	.after-post {
	margin-top: 1em;
	display: flex;
	align-items: center;
	}

	.avatar, .avatar-alt{
	background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
	color: black;
	font-family: sans-serif;
	text-align: center;
	margin-right: 1em;
	}

	.avatar-alt {
	flex: 0 auto;
	margin-left: 28px;
	font-size: 12px;
	min-width: 20px;
	min-height: 20px;
	line-height: 20px;
	border-radius: $fallback--avatarAltRadius;
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	}

	.avatar {
	flex: 0 auto;
	width: 48px;
	height: 48px;
	font-size: 14px;
	line-height: 48px;
	}

	.actions {
	display: flex;
	align-items: baseline;

	.checkbox {
	display: inline-flex;
	align-items: baseline;
	margin-right: 1em;
	flex: 1;
	}
	}

	.separator {
	margin: 1em;
	border-bottom: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	}

	- .panel-heading {
	- .badge, .alert, .btn, .faint {
	- margin-left: 1em;
	- white-space: nowrap;
	- }
	- .faint {
	- text-overflow: ellipsis;
	- min-width: 2em;
	- overflow-x: hidden;
	- }
	- .flex-spacer {
	- flex: 1;
	- }
	- }
	.btn {
	- margin-left: 0;
	- padding: 0 1em;
	min-width: 3em;
	- min-height: 30px;
	}
	}
	}

	.radius-item,
	.color-item {
	min-width: 20em;
	margin: 5px 6px 0 0;
	display:flex;
	flex-direction: column;
	flex: 1 1 0;

	&.wide {
	min-width: 60%
	}

	&:not(.wide):nth-child(2n+1) {
	margin-right: 7px;

	}

	.color, .opacity {
	display:flex;
	align-items: baseline;
	}
	}

	.radius-item {
	flex-basis: auto;
	}

	.theme-radius-rn,
	.theme-color-cl {
	border: 0;
	box-shadow: none;
	background: transparent;
	color: var(--faint, $fallback--faint);
	align-self: stretch;
	}

	.theme-color-cl,
	.theme-radius-in,
	.theme-color-in {
	margin-left: 4px;
	}

	.theme-radius-in {
	min-width: 1em;
	}

	.theme-radius-in {
	max-width: 7em;
	flex: 1;
	}

	.theme-radius-lb{
	max-width: 50em;
	}

	.theme-preview-content {
	padding: 20px;
	}

	.btn {
	margin-left: .25em;
	margin-right: .25em;
	}
	}

	.extra-content {
	.apply-container {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-grow: 1;

	.btn {
	flex-grow: 1;
	- min-height: 28px;
	+ min-height: 2em;
	min-width: 0;
	max-width: 10em;
	padding: 0;
	}
	}
	}
	diff --git a/src/components/shout_panel/shout_panel.vue b/src/components/shout_panel/shout_panel.vue
	index f3e9ff96cf..1eca88a7aa 100644
	--- a/src/components/shout_panel/shout_panel.vue
	+++ b/src/components/shout_panel/shout_panel.vue
	@@ -1,155 +1,156 @@
	<template>
	<div
	v-if="!collapsed \|\| !floating"
	class="shout-panel"
	>
	<div class="panel panel-default">
	<div
	class="panel-heading timeline-heading"
	:class="{ 'shout-heading': floating }"
	@click.stop.prevent="togglePanel"
	>
	<div class="title">
	{{ $t('shoutbox.title') }}
	<FAIcon
	v-if="floating"
	icon="times"
	class="close-icon"
	/>
	</div>
	</div>
	<div class="shout-window">
	<div
	v-for="message in messages"
	:key="message.id"
	class="shout-message"
	>
	<span class="shout-avatar">
	<img :src="message.author.avatar">
	</span>
	<div class="shout-content">
	<router-link
	class="shout-name"
	:to="userProfileLink(message.author)"
	>
	{{ message.author.username }}
	</router-link>
	<br>
	<span class="shout-text">
	{{ message.text }}
	</span>
	</div>
	</div>
	</div>
	<div class="shout-input">
	<textarea
	v-model="currentMessage"
	class="shout-input-textarea"
	rows="1"
	@keyup.enter="submit(currentMessage)"
	/>
	</div>
	</div>
	</div>
	<div
	v-else
	class="shout-panel"
	>
	<div class="panel panel-default">
	<div
	- class="panel-heading stub timeline-heading shout-heading"
	+ class="panel-heading -stub timeline-heading shout-heading"
	@click.stop.prevent="togglePanel"
	>
	<div class="title">
	<FAIcon
	class="icon"
	icon="bullhorn"
	/>
	{{ $t('shoutbox.title') }}
	</div>
	</div>
	</div>
	</div>
	</template>

	<script src="./shout_panel.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.floating-shout {
	position: fixed;
	- bottom: 0px;
	+ bottom: 0.5em;
	z-index: 1000;
	max-width: 25em;
	-}

	-.floating-shout.left {
	- left: 0px;
	-}
	+ &.-left {
	+ left: 0.5em;
	+ }

	-.floating-shout:not(.left) {
	- right: 0px;
	+ &:not(.-left) {
	+ right: 0.5em;
	+ }
	}

	.shout-panel {
	.shout-heading {
	cursor: pointer;

	.icon {
	color: $fallback--text;
	color: var(--panelText, $fallback--text);
	margin-right: 0.5em;
	}

	.title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	}
	}

	.shout-window {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 20em;
	}

	.shout-window-container {
	height: 100%;
	}

	.shout-message {
	display: flex;
	- padding: 0.2em 0.5em
	+ padding: 0.2em 0.5em;
	}

	.shout-avatar {
	img {
	height: 24px;
	width: 24px;
	border-radius: $fallback--avatarRadius;
	border-radius: var(--avatarRadius, $fallback--avatarRadius);
	margin-right: 0.5em;
	margin-top: 0.25em;
	}
	}

	.shout-input {
	display: flex;
	+
	textarea {
	flex: 1;
	margin: 0.6em;
	min-height: 3.5em;
	resize: none;
	}
	}

	.shout-panel {
	.title {
	display: flex;
	justify-content: space-between;
	}
	}
	}
	</style>
	diff --git a/src/components/status/status.scss b/src/components/status/status.scss
	index 5ed43e0d56..b3ad3818c6 100644
	--- a/src/components/status/status.scss
	+++ b/src/components/status/status.scss
	@@ -1,421 +1,424 @@
	@import '../../_variables.scss';

	.Status {
	min-width: 0;
	white-space: normal;
	word-wrap: break-word;
	word-break: break-word;

	&:hover {
	--_still-image-img-visibility: visible;
	--_still-image-canvas-visibility: hidden;
	--_still-image-label-visibility: hidden;
	}

	&.-focused {
	background-color: $fallback--lightBg;
	background-color: var(--selectedPost, $fallback--lightBg);
	color: $fallback--text;
	color: var(--selectedPostText, $fallback--text);

	--lightText: var(--selectedPostLightText, $fallback--light);
	--faint: var(--selectedPostFaintText, $fallback--faint);
	--faintLink: var(--selectedPostFaintLink, $fallback--faint);
	--postLink: var(--selectedPostPostLink, $fallback--faint);
	--postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint);
	--icon: var(--selectedPostIcon, $fallback--icon);
	}

	.gravestone {
	padding: var(--status-margin, $status-margin);
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	display: flex;

	.deleted-text {
	margin: 0.5em 0;
	align-items: center;
	}
	}

	.status-container {
	display: flex;
	padding: var(--status-margin, $status-margin);

	+ > * {
	+ min-width: 0;
	+ }
	+
	&.-repeat {
	padding-top: 0;
	}
	}

	.pin {
	padding: var(--status-margin, $status-margin) var(--status-margin, $status-margin) 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	}

	._misclick-prevention & {
	pointer-events: none;

	.attachments {
	pointer-events: initial;
	cursor: initial;
	}
	}

	.left-side {
	margin-right: var(--status-margin, $status-margin);
	}

	.right-side {
	flex: 1;
	min-width: 0;
	}

	.usercard {
	margin-bottom: var(--status-margin, $status-margin);
	}

	.status-username {
	white-space: nowrap;
	- font-size: 14px;
	overflow: hidden;
	max-width: 85%;
	font-weight: bold;
	flex-shrink: 1;
	margin-right: 0.4em;
	text-overflow: ellipsis;

	--_still_image-label-scale: 0.25;
	--emoji-size: 14px;
	}

	.status-favicon {
	height: 18px;
	width: 18px;
	margin-right: 0.4em;
	}

	.status-heading {
	margin-bottom: 0.5em;
	}

	.heading-name-row {
	display: flex;
	justify-content: space-between;
	- line-height: 18px;
	+ line-height: 1.3;

	a {
	display: inline-block;
	word-break: break-all;
	}
	}

	.account-name {
	min-width: 1.6em;
	margin-right: 0.4em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1 1 0;
	}

	.heading-left {
	display: flex;
	min-width: 0;
	}

	.heading-right {
	display: flex;
	flex-shrink: 0;

	.button-unstyled {
	padding: 5px;
	margin: -5px;

	&:hover svg {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}
	}

	.svg-inline--fa {
	margin-left: 0.25em;
	}
	}

	.glued-label {
	display: inline-flex;
	white-space: nowrap;
	}

	.timeago {
	margin-right: 0.2em;
	}

	& .heading-reply-row {
	position: relative;
	align-content: baseline;
	- font-size: 12px;
	+ font-size: 0.85em;
	margin-top: 0.2em;
	line-height: 130%;
	max-width: 100%;
	align-items: stretch;
	}

	& .reply-to-popover,
	& .reply-to-no-popover,
	& .mentions {
	min-width: 0;
	margin-right: 0.4em;
	flex-shrink: 0;
	}

	.reply-glued-label {
	margin-right: 0.5em;
	}

	.reply-to-popover {
	.reply-to:hover::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	border-bottom: 1px solid var(--faint);
	pointer-events: none;
	}

	.faint-link:hover {
	// override default
	text-decoration: none;
	}

	&.-strikethrough {
	.reply-to::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	width: 100%;
	border-bottom: 1px solid var(--faint);
	pointer-events: none;
	}
	}
	}

	& .mentions,
	& .reply-to {
	white-space: nowrap;
	position: relative;
	}

	& .mentions-text,
	& .reply-to-text {
	color: var(--faint);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	.mentions-line {
	display: inline;
	}

	.replies {
	margin-top: 0.25em;
	- line-height: 18px;
	- font-size: 12px;
	+ line-height: 1.3;
	+ font-size: 0.85em;
	display: flex;
	flex-wrap: wrap;

	& > * {
	margin-right: 0.4em;
	}
	}

	.reply-link {
	height: 17px;
	}

	.repeat-info {
	padding: 0.4em var(--status-margin, $status-margin);

	.repeat-icon {
	color: $fallback--cGreen;
	color: var(--cGreen, $fallback--cGreen);
	}
	}

	.repeater-avatar {
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	margin-left: 28px;
	width: 20px;
	height: 20px;
	}

	.repeater-name {
	text-overflow: ellipsis;
	margin-right: 0;

	.emoji {
	width: 14px;
	height: 14px;
	vertical-align: middle;
	object-fit: contain;
	}
	}

	.status-fadein {
	animation-duration: 0.4s;
	animation-name: fadein;
	}

	@keyframes fadein {
	from {
	opacity: 0;
	}

	to {
	opacity: 1;
	}
	}

	.status-actions {
	position: relative;
	width: 100%;
	display: flex;
	margin-top: var(--status-margin, $status-margin);

	> * {
	max-width: 4em;
	flex: 1;
	}
	}

	.muted {
	padding: 0.25em 0.6em;
	height: 1.2em;
	line-height: 1.2em;
	text-overflow: ellipsis;
	overflow: hidden;
	display: flex;
	flex-wrap: nowrap;

	& .status-username,
	& .mute-thread,
	& .mute-words {
	word-wrap: normal;
	word-break: normal;
	white-space: nowrap;
	}

	& .status-username,
	& .mute-words {
	text-overflow: ellipsis;
	overflow: hidden;
	}

	.status-username {
	font-weight: normal;
	flex: 0 1 auto;
	margin-right: 0.2em;
	font-size: smaller;
	}

	.mute-thread {
	flex: 0 0 auto;
	}

	.mute-words {
	flex: 1 0 5em;
	margin-left: 0.2em;

	&::before {
	content: ' ';
	}
	}

	.unmute {
	flex: 0 0 auto;
	margin-left: auto;
	display: block;
	}
	}

	.reply-form {
	padding-top: 0;
	padding-bottom: 0;
	}

	.reply-body {
	flex: 1;
	}

	.favs-repeated-users {
	margin-top: var(--status-margin, $status-margin);
	}

	.stats {
	width: 100%;
	display: flex;
	line-height: 1em;
	}

	.avatar-row {
	flex: 1;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;

	&::before {
	content: '';
	position: absolute;
	height: 100%;
	width: 1px;
	left: 0;
	background-color: var(--faint, $fallback--faint);
	}
	}

	.stat-count {
	margin-right: var(--status-margin, $status-margin);
	user-select: none;

	.stat-title {
	color: var(--faint, $fallback--faint);
	- font-size: 12px;
	+ font-size: 0.85em;
	text-transform: uppercase;
	position: relative;
	}

	.stat-number {
	font-weight: bolder;
	- font-size: 16px;
	+ font-size: 1.1em;
	line-height: 1em;
	}

	&:hover .stat-title {
	text-decoration: underline;
	}
	}

	@media all and (max-width: 800px) {
	.repeater-avatar {
	margin-left: 20px;
	}

	.post-avatar {
	width: 40px;
	height: 40px;

	// TODO define those other way somehow?
	// stylelint-disable rscss/class-format
	&.-compact {
	width: 32px;
	height: 32px;
	}
	}
	}
	}
	diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
	index f261108ebb..039d4c7f3c 100644
	--- a/src/components/status_body/status_body.scss
	+++ b/src/components/status_body/status_body.scss
	@@ -1,174 +1,174 @@
	@import '../../_variables.scss';

	.StatusBody {
	display: flex;
	flex-direction: column;

	.emoji {
	--_still_image-label-scale: 0.5;
	}

	.attachments {
	margin-top: 0.5em;
	}

	& .text,
	& .summary {
	font-family: var(--postFont, sans-serif);
	white-space: pre-wrap;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	- line-height: 1.4em;
	+ line-height: var(--post-line-height);
	}

	.summary {
	display: block;
	font-style: italic;
	padding-bottom: 0.5em;
	}

	.text {
	&.-single-line {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	height: 1.4em;
	}
	}

	.summary-wrapper {
	margin-bottom: 0.5em;
	border-style: solid;
	border-width: 0 0 1px 0;
	border-color: var(--border, $fallback--border);
	flex-grow: 0;

	&.-tall {
	position: relative;

	.summary {
	max-height: 2em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	}
	}
	}

	.text-wrapper {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;

	&.-tall-status {
	position: relative;
	height: 220px;
	overflow-x: hidden;
	overflow-y: hidden;
	z-index: 1;

	.media-body {
	min-height: 0;
	mask:
	linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
	linear-gradient(to top, white, white);

	/* Autoprefixed seem to ignore this one, and also syntax is different */
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	}
	}
	}

	& .tall-status-hider,
	& .tall-subject-hider,
	& .status-unhider,
	& .cw-status-hider {
	display: inline-block;
	word-break: break-all;
	width: 100%;
	text-align: center;
	}

	.tall-status-hider {
	position: absolute;
	height: 70px;
	margin-top: 150px;
	line-height: 110px;
	z-index: 2;
	}

	.tall-subject-hider {
	// position: absolute;
	padding-bottom: 0.5em;
	}

	& .status-unhider,
	& .cw-status-hider {
	word-break: break-all;

	svg {
	color: inherit;
	}
	}

	.greentext {
	color: $fallback--cGreen;
	color: var(--postGreentext, $fallback--cGreen);
	}

	.cyantext {
	color: var(--postCyantext, $fallback--cBlue);
	}

	&.-compact {
	align-items: top;
	flex-direction: row;

	--emoji-size: 16px;

	& .body,
	& .attachments {
	max-height: 3.25em;
	}

	.body {
	overflow: hidden;
	white-space: normal;
	min-width: 5em;
	flex: 5 1 auto;
	mask-size: auto 3.5em, auto auto;
	mask-position: 0 0, 0 0;
	mask-repeat: repeat-x, repeat;
	mask-image: linear-gradient(to bottom, white 2em, transparent 3em);

	/* Autoprefixed seem to ignore this one, and also syntax is different */
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	}

	.attachments {
	margin-top: 0;
	flex: 1 1 0;
	min-width: 5em;
	height: 100%;
	margin-left: 0.5em;
	}

	.summary-wrapper {
	.summary::after {
	content: ': ';
	}

	line-height: inherit;
	margin: 0;
	border: none;
	display: inline-block;
	}

	.text-wrapper {
	display: inline-block;
	}
	}
	}
	diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
	index e939b532b1..ab3080c8c1 100644
	--- a/src/components/still-image/still-image.vue
	+++ b/src/components/still-image/still-image.vue
	@@ -1,92 +1,92 @@
	<template>
	<div
	class="still-image"
	:class="{ animated: animated }"
	:style="style"
	>
	<canvas
	v-if="animated"
	ref="canvas"
	/>
	<!-- NOTE: key is required to force to re-render img tag when src is changed -->
	<img
	ref="src"
	:key="src"
	:alt="alt"
	:title="alt"
	:src="src"
	:referrerpolicy="referrerpolicy"
	@load="onLoad"
	@error="onError"
	>
	<slot />
	</div>
	</template>

	<script src="./still-image.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.still-image {
	position: relative;
	line-height: 0;
	overflow: hidden;
	display: inline-flex;
	align-items: center;

	canvas {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	visibility: var(--_still-image-canvas-visibility, visible);
	}

	img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	}

	&.animated {
	&::before {
	zoom: var(--_still_image-label-scale, 1);
	content: 'gif';
	position: absolute;
	- line-height: 10px;
	- font-size: 10px;
	- top: 5px;
	- left: 5px;
	+ line-height: 1;
	+ font-size: 0.7em;
	+ top: 0.5em;
	+ left: 0.5em;
	background: rgba(127, 127, 127, 0.5);
	color: #fff;
	display: block;
	padding: 2px 4px;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	z-index: 2;
	visibility: var(--_still-image-label-visibility, visible);
	}

	&:hover canvas {
	display: none;
	}

	&:hover::before {
	visibility: var(--_still-image-label-visibility, hidden);
	}

	img {
	visibility: var(--_still-image-img-visibility, hidden);
	}

	&:hover img {
	visibility: visible;
	}
	}
	}
	</style>
	diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
	index 575d41e1dc..7a086b260a 100644
	--- a/src/components/tab_switcher/tab_switcher.scss
	+++ b/src/components/tab_switcher/tab_switcher.scss
	@@ -1,229 +1,230 @@
	@import '../../_variables.scss';

	.tab-switcher {
	display: flex;

	.tab-icon {
	margin: 0.2em auto;
	display: block;
	}

	&.top-tabs {
	flex-direction: column;

	> .tabs {
	width: 100%;
	overflow-y: hidden;
	overflow-x: auto;
	padding-top: 5px;
	flex-direction: row;

	&::after, &::before {
	content: '';
	flex: 1 1 auto;
	border-bottom: 1px solid;
	border-bottom-color: $fallback--border;
	border-bottom-color: var(--border, $fallback--border);
	}
	+
	.tab-wrapper {
	- height: 28px;
	+ height: 2em;

	&:not(.active)::after {
	left: 0;
	right: 0;
	bottom: 0;
	border-bottom: 1px solid;
	border-bottom-color: $fallback--border;
	border-bottom-color: var(--border, $fallback--border);
	}
	}
	.tab {
	width: 100%;
	min-width: 1px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	padding-bottom: 99px;
	margin-bottom: 6px - 99px;
	}
	}
	.contents.scrollable-tabs {
	flex-basis: 0;
	}
	}

	&.side-tabs {
	flex-direction: row;

	@media all and (max-width: 800px) {
	overflow-x: auto;
	}

	> .contents {
	flex: 1 1 auto;
	}

	> .tabs {
	flex: 0 0 auto;
	overflow-y: auto;
	overflow-x: hidden;
	flex-direction: column;

	&::after, &::before {
	flex-shrink: 0;
	flex-basis: .5em;
	content: '';
	border-right: 1px solid;
	border-right-color: $fallback--border;
	border-right-color: var(--border, $fallback--border);
	}

	&::after {
	flex-grow: 1;
	}

	&::before {
	flex-grow: 0;
	}

	.tab-wrapper {
	min-width: 10em;
	display: flex;
	flex-direction: column;

	@media all and (max-width: 800px) {
	min-width: 4em;
	}

	&:not(.active)::after {
	top: 0;
	right: 0;
	bottom: 0;
	border-right: 1px solid;
	border-right-color: $fallback--border;
	border-right-color: var(--border, $fallback--border);
	}

	&::before {
	flex: 0 0 6px;
	content: '';
	border-right: 1px solid;
	border-right-color: $fallback--border;
	border-right-color: var(--border, $fallback--border);
	}

	&:last-child .tab {
	margin-bottom: 0;
	}
	}

	.tab {
	flex: 1;
	box-sizing: content-box;
	min-width: 10em;
	min-width: 1px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	padding-left: 1em;
	padding-right: calc(1em + 200px);
	margin-right: -200px;
	margin-left: 1em;

	@media all and (max-width: 800px) {
	padding-left: .25em;
	padding-right: calc(.25em + 200px);
	margin-right: calc(.25em - 200px);
	margin-left: .25em;
	.text {
	display: none
	}
	}
	}
	}
	}

	.contents {
	flex: 1 0 auto;
	min-height: 0px;

	.hidden {
	display: none;
	}
	.full-height:not(.hidden) {
	height: 100%;
	display: flex;
	flex-direction: column;
	> *:not(.mobile-label) {
	flex: 1;
	}
	}

	&.scrollable-tabs {
	overflow-y: auto;
	}
	}

	.tab {
	position: relative;
	white-space: nowrap;
	padding: 6px 1em;

	&:not(.active) {
	z-index: 4;

	&:hover {
	z-index: 6;
	}
	}

	&.active {
	background: transparent;
	z-index: 5;
	color: $fallback--text;
	color: var(--tabActiveText, $fallback--text);
	}

	img {
	max-height: 26px;
	vertical-align: top;
	margin-top: -5px;
	}
	}

	.tabs {
	display: flex;
	position: relative;
	box-sizing: border-box;

	&::after, &::before {
	display: block;
	flex: 1 1 auto;
	}
	}

	.tab-wrapper {
	position: relative;
	display: flex;
	flex: 0 0 auto;

	&:not(.active) {
	&::after {
	content: '';
	position: absolute;
	z-index: 7;
	}
	}
	}

	.mobile-label {
	padding-left: .3em;
	padding-bottom: .25em;
	margin-top: .5em;
	margin-left: .2em;
	margin-bottom: .25em;
	border-bottom: 1px solid var(--border, $fallback--border);

	@media all and (min-width: 800px) {
	display: none;
	}
	}
	}
	diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
	index e92eb031d4..c575e87631 100644
	--- a/src/components/timeline/timeline.js
	+++ b/src/components/timeline/timeline.js
	@@ -1,247 +1,249 @@
	import Status from '../status/status.vue'
	import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
	import Conversation from '../conversation/conversation.vue'
	import TimelineMenu from '../timeline_menu/timeline_menu.vue'
	import TimelineQuickSettings from './timeline_quick_settings.vue'
	import { debounce, throttle, keyBy } from 'lodash'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faCircleNotch, faCog } from '@fortawesome/free-solid-svg-icons'

	library.add(
	faCircleNotch,
	faCog
	)

	const Timeline = {
	props: [
	'timeline',
	'timelineName',
	'title',
	'userId',
	'tag',
	'embedded',
	'count',
	'pinnedStatusIds',
	- 'inProfile'
	+ 'inProfile',
	+ 'footerSlipgate' // reference to an element where we should put our footer
	],
	data () {
	return {
	paused: false,
	unfocused: false,
	bottomedOut: false,
	virtualScrollIndex: 0,
	blockingClicks: false
	}
	},
	components: {
	Status,
	Conversation,
	TimelineMenu,
	TimelineQuickSettings
	},
	computed: {
	filteredVisibleStatuses () {
	return this.timeline.visibleStatuses.filter(status => this.timelineName !== 'user' \|\| (status.id >= this.timeline.minId && status.id <= this.timeline.maxId))
	},
	filteredPinnedStatusIds () {
	return (this.pinnedStatusIds \|\| []).filter(statusId => this.timeline.statusesObject[statusId])
	},
	newStatusCount () {
	return this.timeline.newStatusCount
	},
	showLoadButton () {
	return this.timeline.newStatusCount > 0 \|\| this.timeline.flushMarker !== 0
	},
	loadButtonString () {
	if (this.timeline.flushMarker !== 0) {
	return this.$t('timeline.reload')
	} else {
	return `${this.$t('timeline.show_new')} (${this.newStatusCount})`
	}
	},
	classes () {
	- let rootClasses = !this.embedded ? ['panel', 'panel-default'] : []
	+ let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-nonpanel']
	if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
	return {
	root: rootClasses,
	- header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading'] : []),
	+ header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading', '-sticky'] : []),
	body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
	footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
	}
	},
	// id map of statuses which need to be hidden in the main list due to pinning logic
	pinnedStatusIdsObject () {
	return keyBy(this.pinnedStatusIds)
	},
	statusesToDisplay () {
	const amount = this.timeline.visibleStatuses.length
	const statusesPerSide = Math.ceil(Math.max(3, window.innerHeight / 80))
	const nonPinnedIndex = this.virtualScrollIndex - this.filteredPinnedStatusIds.length
	const min = Math.max(0, nonPinnedIndex - statusesPerSide)
	const max = Math.min(amount, nonPinnedIndex + statusesPerSide)
	return this.timeline.visibleStatuses.slice(min, max).map(_ => _.id)
	},
	virtualScrollingEnabled () {
	return this.$store.getters.mergedConfig.virtualScrolling
	}
	},
	created () {
	const store = this.$store
	const credentials = store.state.users.currentUser.credentials
	const showImmediately = this.timeline.visibleStatuses.length === 0

	window.addEventListener('scroll', this.handleScroll)

	if (store.state.api.fetchers[this.timelineName]) { return false }

	timelineFetcher.fetchAndUpdate({
	store,
	credentials,
	timeline: this.timelineName,
	showImmediately,
	userId: this.userId,
	tag: this.tag
	})
	},
	mounted () {
	if (typeof document.hidden !== 'undefined') {
	document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
	this.unfocused = document.hidden
	}
	window.addEventListener('keydown', this.handleShortKey)
	setTimeout(this.determineVisibleStatuses, 250)
	},
	unmounted () {
	window.removeEventListener('scroll', this.handleScroll)
	window.removeEventListener('keydown', this.handleShortKey)
	if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
	this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
	},
	methods: {
	stopBlockingClicks: debounce(function () {
	this.blockingClicks = false
	}, 1000),
	blockClicksTemporarily () {
	if (!this.blockingClicks) {
	this.blockingClicks = true
	}
	this.stopBlockingClicks()
	},
	handleShortKey (e) {
	// Ignore when input fields are focused
	if (['textarea', 'input'].includes(e.target.tagName.toLowerCase())) return
	if (e.key === '.') this.showNewStatuses()
	},
	showNewStatuses () {
	if (this.timeline.flushMarker !== 0) {
	this.$store.commit('clearTimeline', { timeline: this.timelineName, excludeUserId: true })
	this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
	this.fetchOlderStatuses()
	} else {
	this.blockClicksTemporarily()
	this.$store.commit('showNewStatuses', { timeline: this.timelineName })
	this.paused = false
	}
	+ window.scrollTo({ top: 0 })
	},
	fetchOlderStatuses: throttle(function () {
	const store = this.$store
	const credentials = store.state.users.currentUser.credentials
	store.commit('setLoading', { timeline: this.timelineName, value: true })
	timelineFetcher.fetchAndUpdate({
	store,
	credentials,
	timeline: this.timelineName,
	older: true,
	showImmediately: true,
	userId: this.userId,
	tag: this.tag
	}).then(({ statuses }) => {
	if (statuses && statuses.length === 0) {
	this.bottomedOut = true
	}
	}).finally(() =>
	store.commit('setLoading', { timeline: this.timelineName, value: false })
	)
	}, 1000, this),
	determineVisibleStatuses () {
	if (!this.$refs.timeline) return
	if (!this.virtualScrollingEnabled) return

	const statuses = this.$refs.timeline.children
	const cappedScrollIndex = Math.max(0, Math.min(this.virtualScrollIndex, statuses.length - 1))

	if (statuses.length === 0) return

	const height = Math.max(document.body.offsetHeight, window.pageYOffset)

	const centerOfScreen = window.pageYOffset + (window.innerHeight * 0.5)

	// Start from approximating the index of some visible status by using the
	// the center of the screen on the timeline.
	let approxIndex = Math.floor(statuses.length * (centerOfScreen / height))
	let err = statuses[approxIndex].getBoundingClientRect().y

	// if we have a previous scroll index that can be used, test if it's
	// closer than the previous approximation, use it if so

	const virtualScrollIndexY = statuses[cappedScrollIndex].getBoundingClientRect().y
	if (Math.abs(err) > virtualScrollIndexY) {
	approxIndex = cappedScrollIndex
	err = virtualScrollIndexY
	}

	// if the status is too far from viewport, check the next/previous ones if
	// they happen to be better
	while (err < -20 && approxIndex < statuses.length - 1) {
	err += statuses[approxIndex].offsetHeight
	approxIndex++
	}
	while (err > window.innerHeight + 100 && approxIndex > 0) {
	approxIndex--
	err -= statuses[approxIndex].offsetHeight
	}

	// this status is now the center point for virtual scrolling and visible
	// statuses will be nearby statuses before and after it
	this.virtualScrollIndex = approxIndex
	},
	scrollLoad (e) {
	const bodyBRect = document.body.getBoundingClientRect()
	const height = Math.max(bodyBRect.height, -(bodyBRect.y))
	if (this.timeline.loading === false &&
	this.$el.offsetHeight > 0 &&
	(window.innerHeight + window.pageYOffset) >= (height - 750)) {
	this.fetchOlderStatuses()
	}
	},
	handleScroll: throttle(function (e) {
	this.determineVisibleStatuses()
	this.scrollLoad(e)
	}, 200),
	handleVisibilityChange () {
	this.unfocused = document.hidden
	}
	},
	watch: {
	newStatusCount (count) {
	if (!this.$store.getters.mergedConfig.streaming) {
	return
	}
	if (count > 0) {
	// only 'stream' them when you're scrolled to the top
	const doc = document.documentElement
	const top = (window.pageYOffset \|\| doc.scrollTop) - (doc.clientTop \|\| 0)
	if (top < 15 &&
	!this.paused &&
	!(this.unfocused && this.$store.getters.mergedConfig.pauseOnUnfocused)
	) {
	this.showNewStatuses()
	} else {
	this.paused = true
	}
	}
	}
	}
	}

	export default Timeline
	diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
	index 2c5a67e2b7..c7ea0dff3e 100644
	--- a/src/components/timeline/timeline.scss
	+++ b/src/components/timeline/timeline.scss
	@@ -1,31 +1,31 @@
	@import '../../_variables.scss';

	.Timeline {
	.loadmore-text {
	opacity: 1;
	}

	&.-blocked {
	cursor: progress;
	}

	- .timeline-heading {
	- max-width: 100%;
	- flex-wrap: nowrap;
	- align-items: center;
	- position: relative;
	+ .conversation-heading {
	+ top: calc(var(--__panel-heading-height) * var(--currentPanelStack, 2));
	+ z-index: 1;
	+ }

	- .loadmore-button {
	- flex-shrink: 0;
	+ &.-nonpanel {
	+ .timeline-heading {
	+ text-align: center;
	+ line-height: 2.75em;
	+ padding: 0 0.5em;
	}

	- .loadmore-text {
	- flex-shrink: 0;
	- line-height: 1em;
	+ .timeline-heading {
	+ .button-default, .alert {
	+ line-height: 2em;
	+ width: 100%;
	+ }
	}
	}
	-
	- .timeline-footer {
	- border: none;
	- }
	}
	diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
	index d37a9e2af5..f65881b6d3 100644
	--- a/src/components/timeline/timeline.vue
	+++ b/src/components/timeline/timeline.vue
	@@ -1,86 +1,88 @@
	<template>
	- <div :class="[classes.root, 'Timeline']">
	+ <div :class="['Timeline', classes.root]">
	<div :class="classes.header">
	<TimelineMenu v-if="!embedded" />
	<button
	v-if="showLoadButton"
	class="button-default loadmore-button"
	@click.prevent="showNewStatuses"
	>
	{{ loadButtonString }}
	</button>
	<div
	- v-else
	+ v-else-if="!embedded"
	class="loadmore-text faint"
	@click.prevent
	>
	{{ $t('timeline.up_to_date') }}
	</div>
	<TimelineQuickSettings v-if="!embedded" />
	</div>
	<div :class="classes.body">
	<div
	ref="timeline"
	class="timeline"
	>
	<conversation
	v-for="statusId in filteredPinnedStatusIds"
	:key="statusId + '-pinned'"
	class="status-fadein"
	:status-id="statusId"
	:collapsable="true"
	:pinned-status-ids-object="pinnedStatusIdsObject"
	:in-profile="inProfile"
	:profile-user-id="userId"
	/>
	<conversation
	v-for="status in filteredVisibleStatuses"
	:key="status.id"
	class="status-fadein"
	:status-id="status.id"
	:collapsable="true"
	:in-profile="inProfile"
	:profile-user-id="userId"
	:virtual-hidden="virtualScrollingEnabled && !statusesToDisplay.includes(status.id)"
	/>
	</div>
	</div>
	<div :class="classes.footer">
	- <div
	- v-if="count===0"
	- class="new-status-notification text-center faint"
	- >
	- {{ $t('timeline.no_statuses') }}
	- </div>
	- <div
	- v-else-if="bottomedOut"
	- class="new-status-notification text-center faint"
	- >
	- {{ $t('timeline.no_more_statuses') }}
	- </div>
	- <button
	- v-else-if="!timeline.loading"
	- class="button-unstyled -link -fullwidth"
	- @click.prevent="fetchOlderStatuses()"
	- >
	- <div class="new-status-notification text-center">
	- {{ $t('timeline.load_older') }}
	+ <teleport :to="footerSlipgate" :disabled="!embedded \|\| !footerSlipgate">
	+ <div
	+ v-if="count===0"
	+ class="new-status-notification text-center faint"
	+ >
	+ {{ $t('timeline.no_statuses') }}
	</div>
	- </button>
	- <div
	- v-else
	- class="new-status-notification text-center"
	- >
	- <FAIcon
	- icon="circle-notch"
	- spin
	- size="lg"
	- />
	- </div>
	+ <div
	+ v-else-if="bottomedOut"
	+ class="new-status-notification text-center faint"
	+ >
	+ {{ $t('timeline.no_more_statuses') }}
	+ </div>
	+ <button
	+ v-else-if="!timeline.loading"
	+ class="button-unstyled -link"
	+ @click.prevent="fetchOlderStatuses()"
	+ >
	+ <div class="new-status-notification text-center">
	+ {{ $t('timeline.load_older') }}
	+ </div>
	+ </button>
	+ <div
	+ v-else
	+ class="new-status-notification text-center"
	+ >
	+ <FAIcon
	+ icon="circle-notch"
	+ spin
	+ size="lg"
	+ />
	+ </div>
	+ </teleport>
	</div>
	</div>
	</template>

	<script src="./timeline.js"></script>

	<style src="./timeline.scss" lang="scss"> </style>
	diff --git a/src/components/timeline/timeline_quick_settings.vue b/src/components/timeline/timeline_quick_settings.vue
	index 4d67e06b6d..98fab92684 100644
	--- a/src/components/timeline/timeline_quick_settings.vue
	+++ b/src/components/timeline/timeline_quick_settings.vue
	@@ -1,111 +1,109 @@
	<template>
	<Popover
	trigger="click"
	class="TimelineQuickSettings"
	:bound-to="{ x: 'container' }"
	>
	<template v-slot:content>
	<div class="dropdown-menu">
	<div v-if="loggedIn">
	<button
	class="button-default dropdown-item"
	@click="replyVisibilityAll = true"
	>
	<span
	- class="menu-checkbox"
	- :class="{ 'menu-checkbox-radio': replyVisibilityAll }"
	+ class="menu-checkbox -radio"
	+ :class="{ 'menu-checkbox-checked': replyVisibilityAll }"
	/>{{ $t('settings.reply_visibility_all') }}
	</button>
	<button
	class="button-default dropdown-item"
	@click="replyVisibilityFollowing = true"
	>
	<span
	- class="menu-checkbox"
	- :class="{ 'menu-checkbox-radio': replyVisibilityFollowing }"
	+ class="menu-checkbox -radio"
	+ :class="{ 'menu-checkbox-checked': replyVisibilityFollowing }"
	/>{{ $t('settings.reply_visibility_following_short') }}
	</button>
	<button
	class="button-default dropdown-item"
	@click="replyVisibilitySelf = true"
	>
	<span
	- class="menu-checkbox"
	- :class="{ 'menu-checkbox-radio': replyVisibilitySelf }"
	+ class="menu-checkbox -radio"
	+ :class="{ 'menu-checkbox-checked': replyVisibilitySelf }"
	/>{{ $t('settings.reply_visibility_self_short') }}
	</button>
	<div
	role="separator"
	class="dropdown-divider"
	/>
	</div>
	<button
	class="button-default dropdown-item"
	@click="muteBotStatuses = !muteBotStatuses"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': muteBotStatuses }"
	/>{{ $t('settings.mute_bot_posts') }}
	</button>
	<button
	class="button-default dropdown-item"
	@click="hideMedia = !hideMedia"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': hideMedia }"
	/>{{ $t('settings.hide_media_previews') }}
	</button>
	<button
	class="button-default dropdown-item"
	@click="hideMutedPosts = !hideMutedPosts"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': hideMutedPosts }"
	/>{{ $t('settings.hide_all_muted_posts') }}
	</button>
	<button
	class="button-default dropdown-item dropdown-item-icon"
	@click="openTab('filtering')"
	>
	<FAIcon icon="font" />{{ $t('settings.word_filter') }}
	</button>
	<button
	class="button-default dropdown-item dropdown-item-icon"
	@click="openTab('general')"
	>
	<FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
	</button>
	</div>
	</template>
	<template v-slot:trigger>
	<button class="button-unstyled">
	<FAIcon icon="filter" />
	</button>
	</template>
	</Popover>
	</template>

	<script src="./timeline_quick_settings.js"></script>

	<style lang="scss">

	.TimelineQuickSettings {
	- align-self: stretch;

	> button {
	- font-size: 1.2em;
	- padding-left: 0.7em;
	- padding-right: 0.2em;
	line-height: 100%;
	height: 100%;
	- }
	+ width: var(--__panel-heading-height-inner);
	+ text-align: center;

	- .dropdown-item {
	- margin: 0;
	+ svg {
	+ font-size: 1.2em;
	+ }
	}
	}

	</style>
	diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
	index 8f14093f05..6111948200 100644
	--- a/src/components/timeline_menu/timeline_menu.vue
	+++ b/src/components/timeline_menu/timeline_menu.vue
	@@ -1,169 +1,173 @@
	<template>
	<Popover
	trigger="click"
	class="TimelineMenu"
	:class="{ 'open': isOpen }"
	:margin="{ left: -15, right: -200 }"
	:bound-to="{ x: 'container' }"
	popover-class="timeline-menu-popover-wrap"
	@show="openMenu"
	@close="() => isOpen = false"
	>
	<template v-slot:content>
	<div class="timeline-menu-popover popover-default">
	<TimelineMenuContent />
	</div>
	</template>
	<template v-slot:trigger>
	<button class="button-unstyled title timeline-menu-title">
	<span class="timeline-title">{{ timelineName() }}</span>
	<span>
	<FAIcon
	size="sm"
	icon="chevron-down"
	/>
	</span>
	<span
	class="click-blocker"
	@click="blockOpen"
	/>
	</button>
	</template>
	</Popover>
	</template>

	<script src="./timeline_menu.js" ></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.TimelineMenu {
	flex-shrink: 1;
	margin-right: auto;
	min-width: 0;
	width: 24rem;

	+ .popover-trigger-button {
	+ vertical-align: bottom;
	+ }
	+
	.timeline-menu-popover-wrap {
	overflow: hidden;
	// Match panel heading padding to line up menu with bottom of heading
	margin-top: 0.6rem;
	padding: 0 15px 15px 15px;
	}

	.timeline-menu-popover {
	width: 24rem;
	max-width: 100vw;
	margin: 0;
	font-size: 1rem;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	transform: translateY(-100%);
	transition: transform 100ms;
	}

	.panel::after {
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	}

	&.open .timeline-menu-popover {
	transform: translateY(0);
	}

	.timeline-menu-title {
	margin: 0;
	cursor: pointer;
	user-select: none;
	width: 100%;
	display: flex;

	.timeline-menu-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	svg {
	margin-left: 0.6em;
	transition: transform 100ms;
	}

	.click-blocker {
	cursor: default;
	flex-grow: 1;
	}
	}

	&.open .timeline-menu-title svg {
	color: $fallback--text;
	color: var(--panelText, $fallback--text);
	transform: rotate(180deg);
	}

	.panel {
	box-shadow: var(--popoverShadow);
	}

	ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

	li {
	border-bottom: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	padding: 0;

	&:last-child a {
	border-bottom-right-radius: $fallback--panelRadius;
	border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
	border-bottom-left-radius: $fallback--panelRadius;
	border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
	}

	&:last-child {
	border: none;
	}
	}

	a {
	display: block;
	padding: 0.6em 0.65em;

	&:hover {
	background-color: $fallback--lightBg;
	background-color: var(--selectedMenu, $fallback--lightBg);
	color: $fallback--link;
	color: var(--selectedMenuText, $fallback--link);
	--faint: var(--selectedMenuFaintText, $fallback--faint);
	--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
	--lightText: var(--selectedMenuLightText, $fallback--lightText);
	--icon: var(--selectedMenuIcon, $fallback--icon);
	}

	&.router-link-active {
	font-weight: bolder;
	background-color: $fallback--lightBg;
	background-color: var(--selectedMenu, $fallback--lightBg);
	color: $fallback--text;
	color: var(--selectedMenuText, $fallback--text);
	--faint: var(--selectedMenuFaintText, $fallback--faint);
	--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
	--lightText: var(--selectedMenuLightText, $fallback--lightText);
	--icon: var(--selectedMenuIcon, $fallback--icon);

	&:hover {
	text-decoration: underline;
	}
	}

	svg {
	margin-right: 0.4em;
	margin-left: -0.2em;
	}
	}
	}

	</style>
	diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
	new file mode 100644
	index 0000000000..2e1531200a
	--- /dev/null
	+++ b/src/components/user_card/user_card.scss
	@@ -0,0 +1,323 @@
	+@import '../../_variables.scss';
	+
	+.user-card {
	+ position: relative;
	+ z-index: 1;
	+
	+ &:hover {
	+ --_still-image-img-visibility: visible;
	+ --_still-image-canvas-visibility: hidden;
	+ --_still-image-label-visibility: hidden;
	+ }
	+
	+ .panel-heading {
	+ padding: .5em 0;
	+ text-align: center;
	+ box-shadow: none;
	+ background: transparent;
	+ flex-direction: column;
	+ align-items: stretch;
	+ // create new stacking context
	+ position: relative;
	+ }
	+
	+ .panel-body {
	+ word-wrap: break-word;
	+ border-bottom-right-radius: inherit;
	+ border-bottom-left-radius: inherit;
	+ // create new stacking context
	+ position: relative;
	+ }
	+
	+ .background-image {
	+ position: absolute;
	+ top: 0;
	+ left: 0;
	+ right: 0;
	+ bottom: 0;
	+ mask: linear-gradient(to top, white, transparent) bottom no-repeat,
	+ linear-gradient(to top, white, white);
	+ // Autoprefixer seem to ignore this one, and also syntax is different
	+ -webkit-mask-composite: xor;
	+ mask-composite: exclude;
	+ background-size: cover;
	+ mask-size: 100% 60%;
	+ border-top-left-radius: calc(var(--panelRadius) - 1px);
	+ border-top-right-radius: calc(var(--panelRadius) - 1px);
	+ background-color: var(--profileBg);
	+ z-index: -2;
	+
	+ &.hide-bio {
	+ mask-size: 100% 40px;
	+ }
	+ }
	+
	+ &-bio {
	+ text-align: center;
	+ display: block;
	+ line-height: 1.3;
	+ padding: 1em;
	+ margin: 0;
	+
	+ a {
	+ color: $fallback--link;
	+ color: var(--postLink, $fallback--link);
	+ }
	+
	+ img {
	+ object-fit: contain;
	+ vertical-align: middle;
	+ max-width: 100%;
	+ max-height: 400px;
	+ }
	+ }
	+
	+ // Modifiers
	+
	+ &-rounded-t {
	+ border-top-left-radius: $fallback--panelRadius;
	+ border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
	+ border-top-right-radius: $fallback--panelRadius;
	+ border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
	+ }
	+
	+ &-rounded {
	+ border-radius: $fallback--panelRadius;
	+ border-radius: var(--panelRadius, $fallback--panelRadius);
	+ }
	+
	+ &-bordered {
	+ border-width: 1px;
	+ border-style: solid;
	+ border-color: $fallback--border;
	+ border-color: var(--border, $fallback--border);
	+ }
	+}
	+
	+.user-info {
	+ color: $fallback--lightText;
	+ color: var(--lightText, $fallback--lightText);
	+ padding: 0 26px;
	+
	+ .container {
	+ min-width: 0;
	+ padding: 16px 0 6px;
	+ display: flex;
	+ align-items: flex-start;
	+ max-height: 56px;
	+
	+ > * {
	+ min-width: 0;
	+ }
	+
	+ .Avatar {
	+ --_avatarShadowBox: var(--avatarShadow);
	+ --_avatarShadowFilter: var(--avatarShadowFilter);
	+ --_avatarShadowInset: var(--avatarShadowInset);
	+
	+ flex: 1 0 100%;
	+ width: 56px;
	+ height: 56px;
	+ object-fit: cover;
	+ }
	+ }
	+
	+ &-avatar-link {
	+ position: relative;
	+ cursor: pointer;
	+
	+ &-overlay {
	+ position: absolute;
	+ left: 0;
	+ top: 0;
	+ right: 0;
	+ bottom: 0;
	+ background-color: rgba(0, 0, 0, 0.3);
	+ display: flex;
	+ justify-content: center;
	+ align-items: center;
	+ border-radius: $fallback--avatarRadius;
	+ border-radius: var(--avatarRadius, $fallback--avatarRadius);
	+ opacity: 0;
	+ transition: opacity .2s ease;
	+
	+ svg {
	+ color: #FFF;
	+ }
	+ }
	+
	+ &:hover &-overlay {
	+ opacity: 1;
	+ }
	+ }
	+
	+ .external-link-button, .edit-profile-button {
	+ cursor: pointer;
	+ width: 2.5em;
	+ text-align: center;
	+ margin: -0.5em 0;
	+ padding: 0.5em 0;
	+
	+ &:not(:hover) .icon {
	+ color: $fallback--lightText;
	+ color: var(--lightText, $fallback--lightText);
	+ }
	+ }
	+
	+ .user-summary {
	+ display: block;
	+ margin-left: 0.6em;
	+ text-align: left;
	+ text-overflow: ellipsis;
	+ white-space: nowrap;
	+ flex: 1 1 0;
	+ // This is so that text doesn't get overlapped by avatar's shadow if it has
	+ // big one
	+ z-index: 1;
	+ line-height: 2em;
	+
	+ --emoji-size: 1.7em;
	+
	+ .top-line,
	+ .bottom-line {
	+ display: flex;
	+ }
	+ }
	+
	+ .user-name {
	+ text-overflow: ellipsis;
	+ overflow: hidden;
	+ flex: 1 1 auto;
	+ margin-right: 1em;
	+ font-size: 1.1em;
	+ }
	+
	+ .bottom-line {
	+ font-weight: light;
	+ font-size: 1.1em;
	+ align-items: baseline;
	+
	+ .lock-icon {
	+ margin-left: 0.5em;
	+ }
	+
	+ .user-screen-name {
	+ min-width: 1px;
	+ flex: 0 1 auto;
	+ text-overflow: ellipsis;
	+ overflow: hidden;
	+ color: $fallback--lightText;
	+ color: var(--lightText, $fallback--lightText);
	+ }
	+
	+ .dailyAvg {
	+ min-width: 1px;
	+ flex: 0 0 auto;
	+ margin-left: 1em;
	+ font-size: 0.7em;
	+ color: $fallback--text;
	+ color: var(--text, $fallback--text);
	+ }
	+
	+ .user-role {
	+ flex: none;
	+ color: $fallback--text;
	+ color: var(--alertNeutralText, $fallback--text);
	+ background-color: $fallback--fg;
	+ background-color: var(--alertNeutral, $fallback--fg);
	+ }
	+ }
	+
	+ .user-meta {
	+ margin-bottom: .15em;
	+ display: flex;
	+ align-items: baseline;
	+ line-height: 22px;
	+ flex-wrap: wrap;
	+
	+ .following {
	+ flex: 1 0 auto;
	+ margin: 0;
	+ margin-bottom: .25em;
	+ text-align: left;
	+ }
	+
	+ .highlighter {
	+ flex: 0 1 auto;
	+ display: flex;
	+ flex-wrap: wrap;
	+ margin-right: -.5em;
	+ align-self: start;
	+
	+ .userHighlightCl {
	+ padding: 2px 10px;
	+ flex: 1 0 auto;
	+ }
	+
	+ .userHighlightSel {
	+ padding-top: 0;
	+ padding-bottom: 0;
	+ flex: 1 0 auto;
	+ }
	+
	+ .userHighlightText {
	+ width: 70px;
	+ flex: 1 0 auto;
	+ }
	+
	+ .userHighlightCl,
	+ .userHighlightText,
	+ .userHighlightSel {
	+ vertical-align: top;
	+ margin-right: .5em;
	+ margin-bottom: .25em;
	+ }
	+ }
	+ }
	+ .user-interactions {
	+ position: relative;
	+ display: flex;
	+ flex-flow: row wrap;
	+ margin-right: -.75em;
	+
	+ > * {
	+ margin: 0 .75em .6em 0;
	+ white-space: nowrap;
	+ min-width: 95px;
	+ }
	+
	+ button {
	+ margin: 0;
	+ }
	+ }
	+}
	+
	+.sidebar .edit-profile-button {
	+ display: none;
	+}
	+
	+.user-counts {
	+ display: flex;
	+ line-height:16px;
	+ padding: .5em 1.5em 0em 1.5em;
	+ text-align: center;
	+ justify-content: space-between;
	+ color: $fallback--lightText;
	+ color: var(--lightText, $fallback--lightText);
	+ flex-wrap: wrap;
	+}
	+
	+.user-count {
	+ flex: 1 0 auto;
	+ padding: .5em 0 .5em 0;
	+ margin: 0 .5em;
	+
	+ h5 {
	+ font-size:1em;
	+ font-weight: bolder;
	+ margin: 0 0 0.25em;
	+ }
	+ a {
	+ text-decoration: none;
	+ }
	+}
	diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
	index 14b4643a54..67837845ed 100644
	--- a/src/components/user_card/user_card.vue
	+++ b/src/components/user_card/user_card.vue
	@@ -1,603 +1,287 @@
	<template>
	<div
	class="user-card"
	:class="classes"
	>
	<div
	:class="{ 'hide-bio': hideBio }"
	:style="style"
	class="background-image"
	/>
	- <div class="panel-heading">
	+ <div class="panel-heading -flexible-height">
	<div class="user-info">
	<div class="container">
	<a
	v-if="allowZoomingAvatar"
	class="user-info-avatar-link"
	@click="zoomAvatar"
	>
	<UserAvatar
	:better-shadow="betterShadow"
	:user="user"
	/>
	<div class="user-info-avatar-link-overlay">
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="search-plus"
	/>
	</div>
	</a>
	<router-link
	v-else
	:to="userProfileLink(user)"
	>
	<UserAvatar
	:better-shadow="betterShadow"
	:user="user"
	/>
	</router-link>
	<div class="user-summary">
	<div class="top-line">
	<RichContent
	:title="user.name"
	class="user-name"
	:html="user.name"
	:emoji="user.emoji"
	/>
	<button
	v-if="!isOtherUser && user.is_local"
	class="button-unstyled edit-profile-button"
	@click.stop="openProfileTab"
	>
	<FAIcon
	fixed-width
	class="icon"
	icon="edit"
	:title="$t('user_card.edit_profile')"
	/>
	</button>
	<a
	v-if="isOtherUser && !user.is_local"
	:href="user.statusnet_profile_url"
	target="_blank"
	class="button-unstyled external-link-button"
	>
	<FAIcon
	class="icon"
	icon="external-link-alt"
	/>
	</a>
	<AccountActions
	v-if="isOtherUser && loggedIn"
	:user="user"
	:relationship="relationship"
	/>
	</div>
	<div class="bottom-line">
	<router-link
	class="user-screen-name"
	:title="user.screen_name_ui"
	:to="userProfileLink(user)"
	>
	@{{ user.screen_name_ui }}
	</router-link>
	<template v-if="!hideBio">
	<span
	v-if="user.deactivated"
	class="alert user-role"
	>
	{{ $t('user_card.deactivated') }}
	</span>
	<span
	v-if="!!visibleRole"
	class="alert user-role"
	>
	{{ $t(`general.role.${visibleRole}`) }}
	</span>
	<span
	v-if="user.bot"
	class="alert user-role"
	>
	{{ $t('user_card.bot') }}
	</span>
	</template>
	<span v-if="user.locked">
	<FAIcon
	class="lock-icon"
	icon="lock"
	size="sm"
	/>
	</span>
	<span
	v-if="!mergedConfig.hideUserStats && !hideBio"
	class="dailyAvg"
	>{{ dailyAvg }} {{ $t('user_card.per_day') }}</span>
	</div>
	</div>
	</div>
	<div class="user-meta">
	<div
	v-if="relationship.followed_by && loggedIn && isOtherUser"
	class="following"
	>
	{{ $t('user_card.follows_you') }}
	</div>
	<div
	v-if="isOtherUser && (loggedIn \|\| !switcher)"
	class="highlighter"
	>
	<!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
	<input
	v-if="userHighlightType !== 'disabled'"
	:id="'userHighlightColorTx'+user.id"
	v-model="userHighlightColor"
	class="userHighlightText"
	type="text"
	>
	<input
	v-if="userHighlightType !== 'disabled'"
	:id="'userHighlightColor'+user.id"
	v-model="userHighlightColor"
	class="userHighlightCl"
	type="color"
	>
	{{ ' ' }}
	<Select
	:id="'userHighlightSel'+user.id"
	v-model="userHighlightType"
	class="userHighlightSel"
	>
	<option value="disabled">
	{{ $t('user_card.highlight.disabled') }}
	</option>
	<option value="solid">
	{{ $t('user_card.highlight.solid') }}
	</option>
	<option value="striped">
	{{ $t('user_card.highlight.striped') }}
	</option>
	<option value="side">
	{{ $t('user_card.highlight.side') }}
	</option>
	</Select>
	</div>
	</div>
	<div
	v-if="loggedIn && isOtherUser"
	class="user-interactions"
	>
	<div class="btn-group">
	<FollowButton
	:relationship="relationship"
	:user="user"
	/>
	<template v-if="relationship.following">
	<ProgressButton
	v-if="!relationship.subscribing"
	class="btn button-default"
	:click="subscribeUser"
	:title="$t('user_card.subscribe')"
	>
	<FAIcon icon="bell" />
	</ProgressButton>
	<ProgressButton
	v-else
	class="btn button-default toggled"
	:click="unsubscribeUser"
	:title="$t('user_card.unsubscribe')"
	>
	<FALayers>
	<FAIcon
	icon="rss"
	transform="left-5 shrink-6 up-3 rotate-20"
	flip="horizontal"
	/>
	<FAIcon
	icon="rss"
	transform="right-5 shrink-6 up-3 rotate-20"
	/>
	<FAIcon icon="bell" />
	</FALayers>
	</ProgressButton>
	</template>
	</div>
	<div>
	<button
	v-if="relationship.muting"
	class="btn button-default btn-block toggled"
	:disabled="user.deactivated"
	@click="unmuteUser"
	>
	{{ $t('user_card.muted') }}
	</button>
	<button
	v-else
	class="btn button-default btn-block"
	:disabled="user.deactivated"
	@click="muteUser"
	>
	{{ $t('user_card.mute') }}
	</button>
	</div>
	<div>
	<button
	class="btn button-default btn-block"
	:disabled="user.deactivated"
	@click="mentionUser"
	>
	{{ $t('user_card.mention') }}
	</button>
	</div>
	<ModerationTools
	v-if="loggedIn.role === "admin""
	:user="user"
	/>
	</div>
	<div
	v-if="!loggedIn && user.is_local"
	class="user-interactions"
	>
	<RemoteFollow :user="user" />
	</div>
	</div>
	</div>
	<div
	v-if="!hideBio"
	class="panel-body"
	>
	<div
	v-if="!mergedConfig.hideUserStats && switcher"
	class="user-counts"
	>
	<div
	class="user-count"
	@click.prevent="setProfileView('statuses')"
	>
	<h5>{{ $t('user_card.statuses') }}</h5>
	<span>{{ user.statuses_count }} <br></span>
	</div>
	<div
	class="user-count"
	@click.prevent="setProfileView('friends')"
	>
	<h5>{{ $t('user_card.followees') }}</h5>
	<span>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</span>
	</div>
	<div
	class="user-count"
	@click.prevent="setProfileView('followers')"
	>
	<h5>{{ $t('user_card.followers') }}</h5>
	<span>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</span>
	</div>
	</div>
	<RichContent
	v-if="!hideBio"
	class="user-card-bio"
	:html="user.description_html"
	:emoji="user.emoji"
	:handle-links="true"
	/>
	</div>
	</div>
	</template>

	<script src="./user_card.js"></script>

	-<style lang="scss">
	-@import '../../_variables.scss';
	-
	-.user-card {
	- position: relative;
	-
	- &:hover {
	- --_still-image-img-visibility: visible;
	- --_still-image-canvas-visibility: hidden;
	- --_still-image-label-visibility: hidden;
	- }
	-
	- .panel-heading {
	- padding: .5em 0;
	- text-align: center;
	- box-shadow: none;
	- background: transparent;
	- flex-direction: column;
	- align-items: stretch;
	- // create new stacking context
	- position: relative;
	- }
	-
	- .panel-body {
	- word-wrap: break-word;
	- border-bottom-right-radius: inherit;
	- border-bottom-left-radius: inherit;
	- // create new stacking context
	- position: relative;
	- }
	-
	- .background-image {
	- position: absolute;
	- top: 0;
	- left: 0;
	- right: 0;
	- bottom: 0;
	- mask: linear-gradient(to top, white, transparent) bottom no-repeat,
	- linear-gradient(to top, white, white);
	- // Autoprefixed seem to ignore this one, and also syntax is different
	- -webkit-mask-composite: xor;
	- mask-composite: exclude;
	- background-size: cover;
	- mask-size: 100% 60%;
	- border-top-left-radius: calc(var(--panelRadius) - 1px);
	- border-top-right-radius: calc(var(--panelRadius) - 1px);
	- background-color: var(--profileBg);
	-
	- &.hide-bio {
	- mask-size: 100% 40px;
	- }
	- }
	-
	- &-bio {
	- text-align: center;
	- display: block;
	- line-height: 18px;
	- padding: 1em;
	- margin: 0;
	-
	- a {
	- color: $fallback--link;
	- color: var(--postLink, $fallback--link);
	- }
	-
	- img {
	- object-fit: contain;
	- vertical-align: middle;
	- max-width: 100%;
	- max-height: 400px;
	- }
	- }
	-
	- // Modifiers
	-
	- &-rounded-t {
	- border-top-left-radius: $fallback--panelRadius;
	- border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
	- border-top-right-radius: $fallback--panelRadius;
	- border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
	- }
	-
	- &-rounded {
	- border-radius: $fallback--panelRadius;
	- border-radius: var(--panelRadius, $fallback--panelRadius);
	- }
	-
	- &-bordered {
	- border-width: 1px;
	- border-style: solid;
	- border-color: $fallback--border;
	- border-color: var(--border, $fallback--border);
	- }
	-}
	-
	-.user-info {
	- color: $fallback--lightText;
	- color: var(--lightText, $fallback--lightText);
	- padding: 0 26px;
	-
	- .container {
	- padding: 16px 0 6px;
	- display: flex;
	- align-items: flex-start;
	- max-height: 56px;
	-
	- .Avatar {
	- --_avatarShadowBox: var(--avatarShadow);
	- --_avatarShadowFilter: var(--avatarShadowFilter);
	- --_avatarShadowInset: var(--avatarShadowInset);
	-
	- flex: 1 0 100%;
	- width: 56px;
	- height: 56px;
	- object-fit: cover;
	- }
	- }
	-
	- &-avatar-link {
	- position: relative;
	- cursor: pointer;
	-
	- &-overlay {
	- position: absolute;
	- left: 0;
	- top: 0;
	- right: 0;
	- bottom: 0;
	- background-color: rgba(0, 0, 0, 0.3);
	- display: flex;
	- justify-content: center;
	- align-items: center;
	- border-radius: $fallback--avatarRadius;
	- border-radius: var(--avatarRadius, $fallback--avatarRadius);
	- opacity: 0;
	- transition: opacity .2s ease;
	-
	- svg {
	- color: #FFF;
	- }
	- }
	-
	- &:hover &-overlay {
	- opacity: 1;
	- }
	- }
	-
	- .external-link-button, .edit-profile-button {
	- cursor: pointer;
	- width: 2.5em;
	- text-align: center;
	- margin: -0.5em 0;
	- padding: 0.5em 0;
	-
	- &:not(:hover) .icon {
	- color: $fallback--lightText;
	- color: var(--lightText, $fallback--lightText);
	- }
	- }
	-
	- .user-summary {
	- display: block;
	- margin-left: 0.6em;
	- text-align: left;
	- text-overflow: ellipsis;
	- white-space: nowrap;
	- flex: 1 1 0;
	- // This is so that text doesn't get overlapped by avatar's shadow if it has
	- // big one
	- z-index: 1;
	-
	- .top-line {
	- display: flex;
	- }
	- }
	-
	- .user-name {
	- text-overflow: ellipsis;
	- overflow: hidden;
	- flex: 1 1 auto;
	- margin-right: 1em;
	- font-size: 15px;
	-
	- --emoji-size: 14px;
	- }
	-
	- .bottom-line {
	- display: flex;
	- font-weight: light;
	- font-size: 15px;
	-
	- .lock-icon {
	- margin-left: 0.5em;
	- }
	-
	- .user-screen-name {
	- min-width: 1px;
	- flex: 0 1 auto;
	- text-overflow: ellipsis;
	- overflow: hidden;
	- color: $fallback--lightText;
	- color: var(--lightText, $fallback--lightText);
	- }
	-
	- .dailyAvg {
	- min-width: 1px;
	- flex: 0 0 auto;
	- margin-left: 1em;
	- font-size: 0.7em;
	- color: $fallback--text;
	- color: var(--text, $fallback--text);
	- }
	-
	- .user-role {
	- flex: none;
	- color: $fallback--text;
	- color: var(--alertNeutralText, $fallback--text);
	- background-color: $fallback--fg;
	- background-color: var(--alertNeutral, $fallback--fg);
	- }
	- }
	-
	- .user-meta {
	- margin-bottom: .15em;
	- display: flex;
	- align-items: baseline;
	- font-size: 14px;
	- line-height: 22px;
	- flex-wrap: wrap;
	-
	- .following {
	- flex: 1 0 auto;
	- margin: 0;
	- margin-bottom: .25em;
	- text-align: left;
	- }
	-
	- .highlighter {
	- flex: 0 1 auto;
	- display: flex;
	- flex-wrap: wrap;
	- margin-right: -.5em;
	- align-self: start;
	-
	- .userHighlightCl {
	- padding: 2px 10px;
	- flex: 1 0 auto;
	- }
	-
	- .userHighlightSel {
	- padding-top: 0;
	- padding-bottom: 0;
	- flex: 1 0 auto;
	- }
	-
	- .userHighlightText {
	- width: 70px;
	- flex: 1 0 auto;
	- }
	-
	- .userHighlightCl,
	- .userHighlightText,
	- .userHighlightSel {
	- vertical-align: top;
	- margin-right: .5em;
	- margin-bottom: .25em;
	- }
	- }
	- }
	- .user-interactions {
	- position: relative;
	- display: flex;
	- flex-flow: row wrap;
	- margin-right: -.75em;
	-
	- > * {
	- margin: 0 .75em .6em 0;
	- white-space: nowrap;
	- min-width: 95px;
	- }
	-
	- button {
	- margin: 0;
	- }
	- }
	-}
	-
	-.sidebar .edit-profile-button {
	- display: none;
	-}
	-
	-.user-counts {
	- display: flex;
	- line-height:16px;
	- padding: .5em 1.5em 0em 1.5em;
	- text-align: center;
	- justify-content: space-between;
	- color: $fallback--lightText;
	- color: var(--lightText, $fallback--lightText);
	- flex-wrap: wrap;
	-}
	-
	-.user-count {
	- flex: 1 0 auto;
	- padding: .5em 0 .5em 0;
	- margin: 0 .5em;
	-
	- h5 {
	- font-size:1em;
	- font-weight: bolder;
	- margin: 0 0 0.25em;
	- }
	- a {
	- text-decoration: none;
	- }
	-}
	-</style>
	+<style lang="scss" src="./user_card.scss" />
	diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
	index 8706d0ff6b..bdc3aa923a 100644
	--- a/src/components/user_list_popover/user_list_popover.vue
	+++ b/src/components/user_list_popover/user_list_popover.vue
	@@ -1,81 +1,81 @@
	<template>
	<Popover
	trigger="hover"
	placement="top"
	:offset="{ y: 5 }"
	>
	<template v-slot:trigger>
	<slot />
	</template>
	<template v-slot:content>
	<div class="user-list-popover">
	<template v-if="users.length">
	<div
	v-for="(user) in usersCapped"
	:key="user.id"
	class="user-list-row"
	>
	<UserAvatar
	:user="user"
	class="avatar-small"
	:compact="true"
	/>
	<div class="user-list-names">
	<!-- eslint-disable vue/no-v-html -->
	<RichContent
	class="username"
	:title="'@'+user.screen_name_ui"
	:html="user.name_html"
	:emoji="user.emoji"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<span class="user-list-screen-name">{{ user.screen_name_ui }}</span>
	</div>
	</div>
	</template>
	<template v-else>
	<FAIcon
	icon="circle-notch"
	spin
	size="3x"
	/>
	</template>
	</div>
	</template>
	</Popover>
	</template>

	<script src="./user_list_popover.js" ></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.user-list-popover {
	padding: 0.5em;

	--emoji-size: 16px;

	.user-list-row {
	padding: 0.25em;
	display: flex;
	flex-direction: row;

	.user-list-names {
	display: flex;
	flex-direction: column;
	margin-left: 0.5em;
	min-width: 5em;

	img {
	width: 1em;
	height: 1em;
	}
	}

	.user-list-screen-name {
	- font-size: 9px;
	+ font-size: 0.65em;
	}
	}
	}

	</style>
	diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
	index 50949b9883..243de3870f 100644
	--- a/src/components/user_panel/user_panel.vue
	+++ b/src/components/user_panel/user_panel.vue
	@@ -1,28 +1,29 @@
	<template>
	<div class="user-panel">
	<div
	v-if="signedIn"
	key="user-panel-signed"
	class="panel panel-default signed-in"
	>
	<UserCard
	:user-id="user.id"
	:hide-bio="true"
	rounded="top"
	/>
	<PostStatusForm />
	</div>
	<auth-form
	v-else
	key="user-panel"
	/>
	</div>
	</template>

	<script src="./user_panel.js"></script>

	<style lang="scss">
	.user-panel .signed-in {
	overflow: visible;
	+ z-index: 10;
	}
	</style>
	diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
	index eeb6ea403b..f779b82305 100644
	--- a/src/components/user_profile/user_profile.js
	+++ b/src/components/user_profile/user_profile.js
	@@ -1,173 +1,177 @@
	import get from 'lodash/get'
	import UserCard from '../user_card/user_card.vue'
	import FollowCard from '../follow_card/follow_card.vue'
	import Timeline from '../timeline/timeline.vue'
	import Conversation from '../conversation/conversation.vue'
	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import List from '../list/list.vue'
	import withLoadMore from '../../hocs/with_load_more/with_load_more'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faCircleNotch
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faCircleNotch
	)

	const FollowerList = withLoadMore({
	fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId),
	select: (props, $store) => get($store.getters.findUser(props.userId), 'followerIds', []).map(id => $store.getters.findUser(id)),
	destroy: (props, $store) => $store.dispatch('clearFollowers', props.userId),
	childPropName: 'items',
	additionalPropNames: ['userId']
	})(List)

	const FriendList = withLoadMore({
	fetch: (props, $store) => $store.dispatch('fetchFriends', props.userId),
	select: (props, $store) => get($store.getters.findUser(props.userId), 'friendIds', []).map(id => $store.getters.findUser(id)),
	destroy: (props, $store) => $store.dispatch('clearFriends', props.userId),
	childPropName: 'items',
	additionalPropNames: ['userId']
	})(List)

	const defaultTabKey = 'statuses'

	const UserProfile = {
	data () {
	return {
	error: false,
	userId: null,
	- tab: defaultTabKey
	+ tab: defaultTabKey,
	+ footerRef: null
	}
	},
	created () {
	const routeParams = this.$route.params
	this.load(routeParams.name \|\| routeParams.id)
	this.tab = get(this.$route, 'query.tab', defaultTabKey)
	},
	unmounted () {
	this.stopFetching()
	},
	computed: {
	timeline () {
	return this.$store.state.statuses.timelines.user
	},
	favorites () {
	return this.$store.state.statuses.timelines.favorites
	},
	media () {
	return this.$store.state.statuses.timelines.media
	},
	isUs () {
	return this.userId && this.$store.state.users.currentUser.id &&
	this.userId === this.$store.state.users.currentUser.id
	},
	user () {
	return this.$store.getters.findUser(this.userId)
	},
	isExternal () {
	return this.$route.name === 'external-user-profile'
	},
	followsTabVisible () {
	return this.isUs \|\| !this.user.hide_follows
	},
	followersTabVisible () {
	return this.isUs \|\| !this.user.hide_followers
	}
	},
	methods: {
	+ setFooterRef (el) {
	+ this.footerRef = el
	+ },
	load (userNameOrId) {
	const startFetchingTimeline = (timeline, userId) => {
	// Clear timeline only if load another user's profile
	if (userId !== this.$store.state.statuses.timelines[timeline].userId) {
	this.$store.commit('clearTimeline', { timeline })
	}
	this.$store.dispatch('startFetchingTimeline', { timeline, userId })
	}

	const loadById = (userId) => {
	this.userId = userId
	startFetchingTimeline('user', userId)
	startFetchingTimeline('media', userId)
	if (this.isUs) {
	startFetchingTimeline('favorites', userId)
	}
	// Fetch all pinned statuses immediately
	this.$store.dispatch('fetchPinnedStatuses', userId)
	}

	// Reset view
	this.userId = null
	this.error = false

	// Check if user data is already loaded in store
	const user = this.$store.getters.findUser(userNameOrId)
	if (user) {
	loadById(user.id)
	} else {
	this.$store.dispatch('fetchUser', userNameOrId)
	.then(({ id }) => loadById(id))
	.catch((reason) => {
	const errorMessage = get(reason, 'error.error')
	if (errorMessage === 'No user with such user_id') { // Known error
	this.error = this.$t('user_profile.profile_does_not_exist')
	} else if (errorMessage) {
	this.error = errorMessage
	} else {
	this.error = this.$t('user_profile.profile_loading_error')
	}
	})
	}
	},
	stopFetching () {
	this.$store.dispatch('stopFetchingTimeline', 'user')
	this.$store.dispatch('stopFetchingTimeline', 'favorites')
	this.$store.dispatch('stopFetchingTimeline', 'media')
	},
	switchUser (userNameOrId) {
	this.stopFetching()
	this.load(userNameOrId)
	},
	onTabSwitch (tab) {
	this.tab = tab
	this.$router.replace({ query: { tab } })
	},
	linkClicked ({ target }) {
	if (target.tagName === 'SPAN') {
	target = target.parentNode
	}
	if (target.tagName === 'A') {
	window.open(target.href, '_blank')
	}
	}
	},
	watch: {
	'$route.params.id': function (newVal) {
	if (newVal) {
	this.switchUser(newVal)
	}
	},
	'$route.params.name': function (newVal) {
	if (newVal) {
	this.switchUser(newVal)
	}
	},
	'$route.query': function (newVal) {
	this.tab = newVal.tab \|\| defaultTabKey
	}
	},
	components: {
	UserCard,
	Timeline,
	FollowerList,
	FriendList,
	FollowCard,
	TabSwitcher,
	Conversation,
	RichContent
	}
	}

	export default UserProfile
	diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
	index 726216ff03..6279259959 100644
	--- a/src/components/user_profile/user_profile.vue
	+++ b/src/components/user_profile/user_profile.vue
	@@ -1,222 +1,211 @@
	<template>
	<div>
	<div
	v-if="user"
	class="user-profile panel panel-default"
	>
	<UserCard
	:user-id="userId"
	:switcher="true"
	:selected="timeline.viewing"
	:allow-zooming-avatar="true"
	rounded="top"
	/>
	<div
	v-if="user.fields_html && user.fields_html.length > 0"
	class="user-profile-fields"
	>
	<dl
	v-for="(field, index) in user.fields_html"
	:key="index"
	class="user-profile-field"
	>
	<dt
	:title="user.fields_text[index].name"
	class="user-profile-field-name"
	>
	<RichContent
	:html="field.name"
	:emoji="user.emoji"
	/>
	</dt>
	<dd
	:title="user.fields_text[index].value"
	class="user-profile-field-value"
	>
	<RichContent
	:html="field.value"
	:emoji="user.emoji"
	/>
	</dd>
	</dl>
	</div>
	<tab-switcher
	:active-tab="tab"
	:render-only-focused="true"
	:on-switch="onTabSwitch"
	>
	<Timeline
	key="statuses"
	:label="$t('user_card.statuses')"
	:count="user.statuses_count"
	:embedded="true"
	:title="$t('user_profile.timeline_title')"
	:timeline="timeline"
	timeline-name="user"
	:user-id="userId"
	:pinned-status-ids="user.pinnedStatusIds"
	:in-profile="true"
	+ :footerSlipgate="footerRef"
	/>
	<div
	v-if="followsTabVisible"
	key="followees"
	:label="$t('user_card.followees')"
	:disabled="!user.friends_count"
	>
	<FriendList :user-id="userId">
	<template v-slot:item="{item}">
	<FollowCard :user="item" />
	</template>
	</FriendList>
	</div>
	<div
	v-if="followersTabVisible"
	key="followers"
	:label="$t('user_card.followers')"
	:disabled="!user.followers_count"
	>
	<FollowerList :user-id="userId">
	<template v-slot:item="{item}">
	<FollowCard
	:user="item"
	:no-follows-you="isUs"
	/>
	</template>
	</FollowerList>
	</div>
	<Timeline
	key="media"
	:label="$t('user_card.media')"
	:disabled="!media.visibleStatuses.length"
	:embedded="true"
	:title="$t('user_card.media')"
	timeline-name="media"
	:timeline="media"
	:user-id="userId"
	:in-profile="true"
	+ :footerSlipgate="footerRef"
	/>
	<Timeline
	v-if="isUs"
	key="favorites"
	:label="$t('user_card.favorites')"
	:disabled="!favorites.visibleStatuses.length"
	:embedded="true"
	:title="$t('user_card.favorites')"
	timeline-name="favorites"
	:timeline="favorites"
	:in-profile="true"
	+ :footerSlipgate="footerRef"
	/>
	</tab-switcher>
	+ <div class="panel-footer" :ref="setFooterRef"></div>
	</div>
	<div
	v-else
	class="panel user-profile-placeholder"
	>
	<div class="panel-heading">
	<div class="title">
	{{ $t('settings.profile_tab') }}
	</div>
	</div>
	<div class="panel-body">
	<span v-if="error">{{ error }}</span>
	<FAIcon
	v-else
	spin
	icon="circle-notch"
	/>
	</div>
	</div>
	</div>
	</template>

	<script src="./user_profile.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.user-profile {
	flex: 2;
	flex-basis: 500px;

	+ // No sticky header on user profile
	+ --currentPanelStack: 1;
	+
	.user-profile-fields {
	margin: 0 0.5em;

	img {
	object-fit: contain;
	vertical-align: middle;
	max-width: 100%;
	max-height: 400px;

	&.emoji {
	width: 18px;
	height: 18px;
	}
	}

	.user-profile-field {
	display: flex;
	margin: 0.25em;
	border: 1px solid var(--border, $fallback--border);
	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);

	.user-profile-field-name {
	flex: 0 1 30%;
	font-weight: 500;
	text-align: right;
	color: var(--lightText);
	min-width: 120px;
	border-right: 1px solid var(--border, $fallback--border);
	}

	.user-profile-field-value {
	flex: 1 1 70%;
	color: var(--text);
	margin: 0 0 0 0.25em;
	}

	.user-profile-field-name, .user-profile-field-value {
	- line-height: 18px;
	+ line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 0.5em 1.5em;
	box-sizing: border-box;
	}
	}
	}

	.userlist-placeholder {
	display: flex;
	justify-content: center;
	align-items: middle;
	padding: 2em;
	}
	-
	- .timeline-heading {
	- display: flex;
	- justify-content: center;
	-
	- .loadmore-button, .alert {
	- flex: 1;
	- }
	-
	- .loadmore-button {
	- height: 28px;
	- margin: 10px .6em;
	- }
	-
	- .title, .loadmore-text {
	- display: none
	- }
	- }
	}
	.user-profile-placeholder {
	.panel-body {
	display: flex;
	justify-content: center;
	align-items: middle;
	padding: 7em;
	}
	}
	</style>
	diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
	index cc45636576..030ce2c42f 100644
	--- a/src/components/user_reporting_modal/user_reporting_modal.vue
	+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
	@@ -1,181 +1,170 @@
	<template>
	<Modal
	v-if="isOpen"
	@backdropClicked="closeModal"
	>
	<div class="user-reporting-panel panel">
	<div class="panel-heading">
	<div class="title">
	{{ $t('user_reporting.title', [user.screen_name_ui]) }}
	</div>
	</div>
	<div class="panel-body">
	<div class="user-reporting-panel-left">
	<div>
	<p>{{ $t('user_reporting.add_comment_description') }}</p>
	<textarea
	v-model="comment"
	class="form-control"
	:placeholder="$t('user_reporting.additional_comments')"
	rows="1"
	@input="resize"
	/>
	</div>
	<div v-if="!user.is_local">
	<p>{{ $t('user_reporting.forward_description') }}</p>
	<Checkbox v-model="forward">
	{{ $t('user_reporting.forward_to', [remoteInstance]) }}
	</Checkbox>
	</div>
	<div>
	<button
	class="btn button-default"
	:disabled="processing"
	@click="reportUser"
	>
	{{ $t('user_reporting.submit') }}
	</button>
	<div
	v-if="error"
	class="alert error"
	>
	{{ $t('user_reporting.generic_error') }}
	</div>
	</div>
	</div>
	<div class="user-reporting-panel-right">
	<List :items="statuses">
	<template v-slot:item="{item}">
	<div class="status-fadein user-reporting-panel-sitem">
	<Status
	:in-conversation="false"
	:focused="false"
	:statusoid="item"
	/>
	<Checkbox
	:model-value="isChecked(item.id)"
	@update:model-value="checked => toggleStatus(checked, item.id)"
	/>
	</div>
	</template>
	</List>
	</div>
	</div>
	</div>
	</Modal>
	</template>

	<script src="./user_reporting_modal.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.user-reporting-panel {
	width: 90vw;
	max-width: 700px;
	min-height: 20vh;
	max-height: 80vh;

	- .panel-heading {
	- .title {
	- text-align: center;
	- // TODO: Consider making these as default of panel
	- flex: 1;
	- overflow: hidden;
	- text-overflow: ellipsis;
	- white-space: nowrap;
	- }
	- }
	-
	.panel-body {
	display: flex;
	flex-direction: column-reverse;
	border-top: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	overflow: hidden;
	}

	&-left {
	padding: 1.1em 0.7em 0.7em;
	- line-height: 1.4em;
	+ line-height: var(--post-line-height);
	box-sizing: border-box;

	> div {
	margin-bottom: 1em;

	&:last-child {
	margin-bottom: 0;
	}
	}

	p {
	margin-top: 0;
	}

	textarea.form-control {
	line-height: 16px;
	resize: none;
	overflow: hidden;
	transition: min-height 200ms 100ms;
	min-height: 44px;
	width: 100%;
	}

	.btn {
	min-width: 10em;
	padding: 0 2em;
	}

	.alert {
	margin: 1em 0 0 0;
	line-height: 1.3em;
	}
	}

	&-right {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	}

	&-sitem {
	display: flex;
	justify-content: space-between;

	/* TODO cleanup this */
	> .Status {
	flex: 1;
	}

	> .checkbox {
	margin: 0.75em;
	}
	}

	@media all and (min-width: 801px) {
	.panel-body {
	flex-direction: row;
	}

	&-left {
	width: 50%;
	max-width: 320px;
	border-right: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	padding: 1.1em;

	> div {
	margin-bottom: 2em;
	}
	}

	&-right {
	width: 50%;
	flex: 1 1 auto;
	margin-bottom: 12px;
	}
	}
	}
	</style>
	diff --git a/src/hocs/with_load_more/with_load_more.scss b/src/hocs/with_load_more/with_load_more.scss
	index 1a26eb8d65..de86ed4a5f 100644
	--- a/src/hocs/with_load_more/with_load_more.scss
	+++ b/src/hocs/with_load_more/with_load_more.scss
	@@ -1,20 +1,20 @@

	@import '../../_variables.scss';

	.with-load-more {
	&-footer {
	padding: 10px;
	text-align: center;
	border-top: 1px solid;
	border-top-color: $fallback--border;
	border-top-color: var(--border, $fallback--border);

	.error {
	- font-size: 14px;
	+ font-size: 1rem;
	}

	a {
	cursor: pointer;
	}
	}
	}
	diff --git a/src/hocs/with_subscription/with_subscription.scss b/src/hocs/with_subscription/with_subscription.scss
	index 52c7d94c0e..7fd838021d 100644
	--- a/src/hocs/with_subscription/with_subscription.scss
	+++ b/src/hocs/with_subscription/with_subscription.scss
	@@ -1,10 +1,10 @@
	.with-subscription {
	&-loading {
	padding: 10px;
	text-align: center;

	.error {
	- font-size: 14px;
	+ font-size: 1rem;
	}
	}
	}
	\ No newline at end of file
	diff --git a/src/i18n/en.json b/src/i18n/en.json
	index a317449242..0cfda8040a 100644
	--- a/src/i18n/en.json
	+++ b/src/i18n/en.json
	@@ -1,940 +1,946 @@
	{
	"about": {
	"mrf": {
	"federation": "Federation",
	"keyword": {
	"keyword_policies": "Keyword policies",
	"ftl_removal": "Removal from \"The Whole Known Network\" Timeline",
	"reject": "Reject",
	"replace": "Replace",
	"is_replaced_by": "→"
	},
	"mrf_policies": "Enabled MRF policies",
	"mrf_policies_desc": "MRF policies manipulate the federation behaviour of the instance. The following policies are enabled:",
	"simple": {
	"simple_policies": "Instance-specific policies",
	"instance": "Instance",
	"reason": "Reason",
	"not_applicable": "N/A",
	"accept": "Accept",
	"accept_desc": "This instance only accepts messages from the following instances:",
	"reject": "Reject",
	"reject_desc": "This instance will not accept messages from the following instances:",
	"quarantine": "Quarantine",
	"quarantine_desc": "This instance will send only public posts to the following instances:",
	"ftl_removal": "Removal from \"Known Network\" Timeline",
	"ftl_removal_desc": "This instance removes these instances from \"Known Network\" timeline:",
	"media_removal": "Media Removal",
	"media_removal_desc": "This instance removes media from posts on the following instances:",
	"media_nsfw": "Media force-set as sensitive",
	"media_nsfw_desc": "This instance forces media to be set sensitive in posts on the following instances:"
	}
	},
	"staff": "Staff"
	},
	"shoutbox": {
	"title": "Shoutbox"
	},
	"domain_mute_card": {
	"mute": "Mute",
	"mute_progress": "Muting…",
	"unmute": "Unmute",
	"unmute_progress": "Unmuting…"
	},
	"exporter": {
	"export": "Export",
	"processing": "Processing, you'll soon be asked to download your file"
	},
	"features_panel": {
	"shout": "Shoutbox",
	"pleroma_chat_messages": "Pleroma Chat",
	"gopher": "Gopher",
	"media_proxy": "Media proxy",
	"scope_options": "Scope options",
	"text_limit": "Text limit",
	"title": "Features",
	"who_to_follow": "Who to follow",
	"upload_limit": "Upload limit"
	},
	"finder": {
	"error_fetching_user": "Error fetching user",
	"find_user": "Find user"
	},
	"general": {
	"apply": "Apply",
	"submit": "Submit",
	"more": "More",
	"loading": "Loading…",
	"generic_error": "An error occured",
	"error_retry": "Please try again",
	"retry": "Try again",
	"optional": "optional",
	"show_more": "Show more",
	"show_less": "Show less",
	"dismiss": "Dismiss",
	"cancel": "Cancel",
	"disable": "Disable",
	"enable": "Enable",
	"confirm": "Confirm",
	"verify": "Verify",
	"close": "Close",
	"peek": "Peek",
	"role": {
	"admin": "Admin",
	"moderator": "Moderator"
	},
	"flash_content": "Click to show Flash content using Ruffle (Experimental, may not work).",
	"flash_security": "Note that this can be potentially dangerous since Flash content is still arbitrary code.",
	"flash_fail": "Failed to load flash content, see console for details.",
	"scope_in_timeline": {
	"direct": "Direct",
	"private": "Followers-only",
	"public": "Public",
	"unlisted": "Unlisted"
	}
	},
	"image_cropper": {
	"crop_picture": "Crop picture",
	"save": "Save",
	"save_without_cropping": "Save without cropping",
	"cancel": "Cancel"
	},
	"importer": {
	"submit": "Submit",
	"success": "Imported successfully.",
	"error": "An error occured while importing this file."
	},
	"login": {
	"login": "Log in",
	"description": "Log in with OAuth",
	"logout": "Log out",
	"password": "Password",
	"placeholder": "e.g. lain",
	"register": "Register",
	"username": "Username",
	"hint": "Log in to join the discussion",
	"authentication_code": "Authentication code",
	"enter_recovery_code": "Enter a recovery code",
	"enter_two_factor_code": "Enter a two-factor code",
	"recovery_code": "Recovery code",
	"heading": {
	"totp": "Two-factor authentication",
	"recovery": "Two-factor recovery"
	}
	},
	"media_modal": {
	"previous": "Previous",
	"next": "Next",
	"counter": "{current} / {total}",
	"hide": "Close media viewer"
	},
	"nav": {
	"about": "About",
	"administration": "Administration",
	"back": "Back",
	"friend_requests": "Follow requests",
	"mentions": "Mentions",
	"interactions": "Interactions",
	"dms": "Direct messages",
	"public_tl": "Public timeline",
	"timeline": "Timeline",
	"home_timeline": "Home timeline",
	"twkn": "Known Network",
	"bookmarks": "Bookmarks",
	"user_search": "User Search",
	"search": "Search",
	"who_to_follow": "Who to follow",
	"preferences": "Preferences",
	"timelines": "Timelines",
	"chats": "Chats"
	},
	"notifications": {
	"broken_favorite": "Unknown status, searching for it…",
	"error": "Error fetching notifications: {0}",
	"favorited_you": "favorited your status",
	"followed_you": "followed you",
	"follow_request": "wants to follow you",
	"load_older": "Load older notifications",
	"notifications": "Notifications",
	"read": "Read!",
	"repeated_you": "repeated your status",
	"no_more_notifications": "No more notifications",
	"migrated_to": "migrated to",
	"reacted_with": "reacted with {0}",
	"poll_ended": "poll has ended"
	},
	"polls": {
	"add_poll": "Add poll",
	"add_option": "Add option",
	"option": "Option",
	"votes": "votes",
	"people_voted_count": "{count} person voted \| {count} people voted",
	"votes_count": "{count} vote \| {count} votes",
	"vote": "Vote",
	"type": "Poll type",
	"single_choice": "Single choice",
	"multiple_choices": "Multiple choices",
	"expiry": "Poll age",
	"expires_in": "Poll ends in {0}",
	"expired": "Poll ended {0} ago",
	"not_enough_options": "Too few unique options in poll"
	},
	"emoji": {
	"stickers": "Stickers",
	"emoji": "Emoji",
	"keep_open": "Keep picker open",
	"search_emoji": "Search for an emoji",
	"add_emoji": "Insert emoji",
	"custom": "Custom emoji",
	"unicode": "Unicode emoji",
	"load_all_hint": "Loaded first {saneAmount} emoji, loading all emoji may cause performance issues.",
	"load_all": "Loading all {emojiAmount} emoji"
	},
	"errors": {
	"storage_unavailable": "Pleroma could not access browser storage. Your login or your local settings won't be saved and you might encounter unexpected issues. Try enabling cookies."
	},
	"interactions": {
	"favs_repeats": "Repeats and favorites",
	"follows": "New follows",
	"moves": "User migrates",
	"load_older": "Load older interactions"
	},
	"post_status": {
	"new_status": "Post new status",
	"account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.",
	"account_not_locked_warning_link": "locked",
	"attachments_sensitive": "Mark attachments as sensitive",
	"media_description": "Media description",
	"content_type": {
	"text/plain": "Plain text",
	"text/html": "HTML",
	"text/markdown": "Markdown",
	"text/bbcode": "BBCode"
	},
	"content_warning": "Subject (optional)",
	"default": "Just landed in L.A.",
	"direct_warning_to_all": "This post will be visible to all the mentioned users.",
	"direct_warning_to_first_only": "This post will only be visible to the mentioned users at the beginning of the message.",
	"posting": "Posting",
	"post": "Post",
	"preview": "Preview",
	"preview_empty": "Empty",
	"empty_status_error": "Can't post an empty status with no files",
	"media_description_error": "Failed to update media, try again",
	"scope_notice": {
	"public": "This post will be visible to everyone",
	"private": "This post will be visible to your followers only",
	"unlisted": "This post will not be visible in Public Timeline and The Whole Known Network"
	},
	"scope": {
	"direct": "Direct - post to mentioned users only",
	"private": "Followers-only - post to followers only",
	"public": "Public - post to public timelines",
	"unlisted": "Unlisted - do not post to public timelines"
	}
	},
	"registration": {
	"bio": "Bio",
	"email": "Email",
	"fullname": "Display name",
	"password_confirm": "Password confirmation",
	"registration": "Registration",
	"token": "Invite token",
	"captcha": "CAPTCHA",
	"new_captcha": "Click the image to get a new captcha",
	"username_placeholder": "e.g. lain",
	"fullname_placeholder": "e.g. Lain Iwakura",
	"bio_placeholder": "e.g.\nHi, I'm Lain.\nI’m an anime girl living in suburban Japan. You may know me from the Wired.",
	"reason": "Reason to register",
	"reason_placeholder": "This instance approves registrations manually.\nLet the administration know why you want to register.",
	"register": "Register",
	"validations": {
	"username_required": "cannot be left blank",
	"fullname_required": "cannot be left blank",
	"email_required": "cannot be left blank",
	"password_required": "cannot be left blank",
	"password_confirmation_required": "cannot be left blank",
	"password_confirmation_match": "should be the same as password"
	},
	"email_language": "In which language do you want to receive emails from the server?"
	},
	"remote_user_resolver": {
	"remote_user_resolver": "Remote user resolver",
	"searching_for": "Searching for",
	"error": "Not found."
	},
	"selectable_list": {
	"select_all": "Select all"
	},
	"settings": {
	"app_name": "App name",
	"expert_mode": "Show advanced",
	"save": "Save changes",
	"security": "Security",
	"setting_changed": "Setting is different from default",
	"setting_server_side": "This setting is tied to your profile and affects all sessions and clients",
	"enter_current_password_to_confirm": "Enter your current password to confirm your identity",
	"post_look_feel": "Posts Look & Feel",
	"mention_links": "Mention links",
	"mfa": {
	"otp": "OTP",
	"setup_otp": "Setup OTP",
	"wait_pre_setup_otp": "presetting OTP",
	"confirm_and_enable": "Confirm & enable OTP",
	"title": "Two-factor Authentication",
	"generate_new_recovery_codes": "Generate new recovery codes",
	"warning_of_generate_new_codes": "When you generate new recovery codes, your old codes won’t work anymore.",
	"recovery_codes": "Recovery codes.",
	"waiting_a_recovery_codes": "Receiving backup codes…",
	"recovery_codes_warning": "Write the codes down or save them somewhere secure - otherwise you won't see them again. If you lose access to your 2FA app and recovery codes you'll be locked out of your account.",
	"authentication_methods": "Authentication methods",
	"scan": {
	"title": "Scan",
	"desc": "Using your two-factor app, scan this QR code or enter text key:",
	"secret_code": "Key"
	},
	"verify": {
	"desc": "To enable two-factor authentication, enter the code from your two-factor app:"
	}
	},
	"allow_following_move": "Allow auto-follow when following account moves",
	"attachmentRadius": "Attachments",
	"attachments": "Attachments",
	"avatar": "Avatar",
	"avatarAltRadius": "Avatars (notifications)",
	"avatarRadius": "Avatars",
	"background": "Background",
	"bio": "Bio",
	"email_language": "Language for receiving emails from the server",
	"block_export": "Block export",
	"block_export_button": "Export your blocks to a csv file",
	"block_import": "Block import",
	"block_import_error": "Error importing blocks",
	"blocks_imported": "Blocks imported! Processing them will take a while.",
	"mute_export": "Mute export",
	"mute_export_button": "Export your mutes to a csv file",
	"mute_import": "Mute import",
	"mute_import_error": "Error importing mutes",
	"mutes_imported": "Mutes imported! Processing them will take a while.",
	"import_mutes_from_a_csv_file": "Import mutes from a csv file",
	"blocks_tab": "Blocks",
	"bot": "This is a bot account",
	"btnRadius": "Buttons",
	"cBlue": "Blue (Reply, follow)",
	"cGreen": "Green (Retweet)",
	"cOrange": "Orange (Favorite)",
	"cRed": "Red (Cancel)",
	"change_email": "Change email",
	"change_email_error": "There was an issue changing your email.",
	"changed_email": "Email changed successfully!",
	"change_password": "Change password",
	"change_password_error": "There was an issue changing your password.",
	"changed_password": "Password changed successfully!",
	"chatMessageRadius": "Chat message",
	"collapse_subject": "Collapse posts with subjects",
	"composing": "Composing",
	"confirm_new_password": "Confirm new password",
	"current_password": "Current password",
	"mutes_and_blocks": "Mutes and Blocks",
	"data_import_export_tab": "Data import / export",
	"default_vis": "Default visibility scope",
	"delete_account": "Delete account",
	"delete_account_description": "Permanently delete your data and deactivate your account.",
	"delete_account_error": "There was an issue deleting your account. If this persists please contact your instance administrator.",
	"delete_account_instructions": "Type your password in the input below to confirm account deletion.",
	"discoverable": "Allow discovery of this account in search results and other services",
	"domain_mutes": "Domains",
	"avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
	"pad_emoji": "Pad emoji with spaces when adding from picker",
	"emoji_reactions_on_timeline": "Show emoji reactions on timeline",
	"export_theme": "Save preset",
	"filtering": "Filtering",
	"wordfilter": "Wordfilter",
	"filtering_explanation": "All statuses containing these words will be muted, one per line",
	"word_filter": "Word filter",
	"follow_export": "Follow export",
	"follow_export_button": "Export your follows to a csv file",
	"follow_import": "Follow import",
	"follow_import_error": "Error importing followers",
	"follows_imported": "Follows imported! Processing them will take a while.",
	"accent": "Accent",
	"foreground": "Foreground",
	"general": "General",
	"hide_attachments_in_convo": "Hide attachments in conversations",
	"hide_attachments_in_tl": "Hide attachments in timeline",
	"hide_media_previews": "Hide media previews",
	"hide_muted_posts": "Hide posts of muted users",
	"mute_bot_posts": "Mute bot posts",
	"hide_bot_indication": "Hide bot indication in posts",
	"hide_all_muted_posts": "Hide muted posts",
	"max_thumbnails": "Maximum amount of thumbnails per post (empty = no limit)",
	"hide_isp": "Hide instance-specific panel",
	"hide_shoutbox": "Hide instance shoutbox",
	- "right_sidebar": "Show sidebar on the right side",
	+ "right_sidebar": "Reverse order of columns",
	"always_show_post_button": "Always show floating New Post button",
	"hide_wallpaper": "Hide instance wallpaper",
	"preload_images": "Preload images",
	"use_one_click_nsfw": "Open NSFW attachments with just one click",
	"hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
	"hide_user_stats": "Hide user statistics (e.g. the number of followers)",
	"hide_filtered_statuses": "Hide all filtered posts",
	"hide_wordfiltered_statuses": "Hide word-filtered statuses",
	"hide_muted_threads": "Hide muted threads",
	"import_blocks_from_a_csv_file": "Import blocks from a csv file",
	"import_followers_from_a_csv_file": "Import follows from a csv file",
	"import_theme": "Load preset",
	"inputRadius": "Input fields",
	"checkboxRadius": "Checkboxes",
	"instance_default": "(default: {value})",
	"instance_default_simple": "(default)",
	"interface": "Interface",
	"interfaceLanguage": "Interface language",
	"invalid_theme_imported": "The selected file is not a supported Pleroma theme. No changes to your theme were made.",
	"limited_availability": "Unavailable in your browser",
	"links": "Links",
	"lock_account_description": "Restrict your account to approved followers only",
	"loop_video": "Loop videos",
	"loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")",
	"mutes_tab": "Mutes",
	"play_videos_in_modal": "Play videos in a popup frame",
	"file_export_import": {
	"backup_restore": "Settings backup",
	"backup_settings": "Backup settings to file",
	"backup_settings_theme": "Backup settings and theme to file",
	"restore_settings": "Restore settings from file",
	"errors": {
	"invalid_file": "The selected file is not a supported Pleroma settings backup. No changes were made.",
	"file_too_new": "Incompatile major version: {fileMajor}, this PleromaFE (settings ver {feMajor}) is too old to handle it",
	"file_too_old": "Incompatile major version: {fileMajor}, file version is too old and not supported (min. set. ver. {feMajor})",
	"file_slightly_new": "File minor version is different, some settings might not load"
	}
	},
	"profile_fields": {
	"label": "Profile metadata",
	"add_field": "Add field",
	"name": "Label",
	"value": "Content"
	},
	"account_privacy": "Privacy",
	"use_contain_fit": "Don't crop the attachment in thumbnails",
	"name": "Name",
	"name_bio": "Name & bio",
	"new_email": "New email",
	"new_password": "New password",
	"posts": "Posts",
	"user_profiles": "User Profiles",
	"notification_visibility": "Types of notifications to show",
	"notification_visibility_follows": "Follows",
	"notification_visibility_likes": "Favorites",
	"notification_visibility_mentions": "Mentions",
	"notification_visibility_repeats": "Repeats",
	"notification_visibility_moves": "User Migrates",
	"notification_visibility_emoji_reactions": "Reactions",
	"notification_visibility_polls": "Ends of polls you voted in",
	"no_rich_text_description": "Strip rich text formatting from all posts",
	"no_blocks": "No blocks",
	"no_mutes": "No mutes",
	"hide_favorites_description": "Don't show list of my favorites (people still get notified)",
	"hide_follows_description": "Don't show who I'm following",
	"hide_followers_description": "Don't show who's following me",
	"hide_follows_count_description": "Don't show follow count",
	"hide_followers_count_description": "Don't show follower count",
	"show_admin_badge": "Show \"Admin\" badge in my profile",
	"show_moderator_badge": "Show \"Moderator\" badge in my profile",
	"nsfw_clickthrough": "Hide sensitive/NSFW media",
	"oauth_tokens": "OAuth tokens",
	"token": "Token",
	"refresh_token": "Refresh token",
	"valid_until": "Valid until",
	"revoke_token": "Revoke",
	"panelRadius": "Panels",
	"pause_on_unfocused": "Pause when tab is not focused",
	"presets": "Presets",
	"profile_background": "Profile background",
	"profile_banner": "Profile banner",
	"profile_tab": "Profile",
	"radii_help": "Set up interface edge rounding (in pixels)",
	"replies_in_timeline": "Replies in timeline",
	"reply_visibility_all": "Show all replies",
	"reply_visibility_following": "Only show replies directed at me or users I'm following",
	"reply_visibility_self": "Only show replies directed at me",
	"reply_visibility_following_short": "Show replies to my follows",
	"reply_visibility_self_short": "Show replies to self only",
	"autohide_floating_post_button": "Automatically hide New Post button (mobile)",
	"saving_err": "Error saving settings",
	"saving_ok": "Settings saved",
	"search_user_to_block": "Search whom you want to block",
	"search_user_to_mute": "Search whom you want to mute",
	"security_tab": "Security",
	"scope_copy": "Copy scope when replying (DMs are always copied)",
	"minimal_scopes_mode": "Minimize post scope selection options",
	"set_new_avatar": "Set new avatar",
	"set_new_profile_background": "Set new profile background",
	"set_new_profile_banner": "Set new profile banner",
	"reset_avatar": "Reset avatar",
	"reset_profile_background": "Reset profile background",
	"reset_profile_banner": "Reset profile banner",
	"reset_avatar_confirm": "Do you really want to reset the avatar?",
	"reset_banner_confirm": "Do you really want to reset the banner?",
	"reset_background_confirm": "Do you really want to reset the background?",
	"settings": "Settings",
	"subject_input_always_show": "Always show subject field",
	"subject_line_behavior": "Copy subject when replying",
	"subject_line_email": "Like email: \"re: subject\"",
	"subject_line_mastodon": "Like mastodon: copy as is",
	"subject_line_noop": "Do not copy",
	"conversation_display": "Conversation display style",
	"conversation_display_tree": "Tree-style",
	+ "disable_sticky_headers": "Don't stick column headers to top of the screen",
	+ "show_scrollbars": "Show side column's scrollbars",
	+ "third_column_mode": "When there's enough space, show third column containing",
	+ "third_column_mode_none": "Don't show third column at all",
	+ "third_column_mode_notifications": "Notifications column",
	+ "third_column_mode_postform": "Main post form and navigation",
	"tree_advanced": "Allow more flexible navigation in tree view",
	"tree_fade_ancestors": "Display ancestors of the current status in faint text",
	"conversation_display_linear": "Linear-style",
	"conversation_other_replies_button": "Show the \"other replies\" button",
	"conversation_other_replies_button_below": "Below statuses",
	"conversation_other_replies_button_inside": "Inside statuses",
	"max_depth_in_thread": "Maximum number of levels in thread to display by default",
	"post_status_content_type": "Post status content type",
	"sensitive_by_default": "Mark posts as sensitive by default",
	"stop_gifs": "Pause animated images until you hover on them",
	"streaming": "Automatically show new posts when scrolled to the top",
	"user_mutes": "Users",
	"useStreamingApi": "Receive posts and notifications real-time",
	"text": "Text",
	"theme": "Theme",
	"theme_help": "Use hex color codes (#rrggbb) to customize your color theme.",
	"theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
	"theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",
	"tooltipRadius": "Tooltips/alerts",
	"type_domains_to_mute": "Search domains to mute",
	"upload_a_photo": "Upload a photo",
	"user_settings": "User Settings",
	"values": {
	"false": "no",
	"true": "yes"
	},
	"virtual_scrolling": "Optimize timeline rendering",
	"use_at_icon": "Display {'@'} symbol as an icon instead of text",
	"mention_link_display": "Display mention links",
	"mention_link_display_short": "always as short names (e.g. {'@'}foo)",
	"mention_link_display_full_for_remote": "as full names only for remote users (e.g. {'@'}foo{'@'}example.org)",
	"mention_link_display_full": "always as full names (e.g. {'@'}foo{'@'}example.org)",
	"mention_link_show_tooltip": "Show full user names as tooltip for remote users",
	"mention_link_show_avatar": "Show user avatar beside the link",
	"mention_link_fade_domain": "Fade domains (e.g. {'@'}example.org in {'@'}foo{'@'}example.org)",
	"mention_link_bolden_you": "Highlight mention of you when you are mentioned",
	"fun": "Fun",
	"greentext": "Meme arrows",
	"show_yous": "Show (You)s",
	"notifications": "Notifications",
	"notification_setting_filters": "Filters",
	"notification_setting_block_from_strangers": "Block notifications from users who you do not follow",
	"notification_setting_privacy": "Privacy",
	"notification_setting_hide_notification_contents": "Hide the sender and contents of push notifications",
	"notification_mutes": "To stop receiving notifications from a specific user, use a mute.",
	"notification_blocks": "Blocking a user stops all notifications as well as unsubscribes them.",
	"enable_web_push_notifications": "Enable web push notifications",
	"more_settings": "More settings",
	"style": {
	"switcher": {
	"keep_color": "Keep colors",
	"keep_shadows": "Keep shadows",
	"keep_opacity": "Keep opacity",
	"keep_roundness": "Keep roundness",
	"keep_fonts": "Keep fonts",
	"save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme. When all checkboxes unset, exporting theme will save everything.",
	"reset": "Reset",
	"clear_all": "Clear all",
	"clear_opacity": "Clear opacity",
	"load_theme": "Load theme",
	"keep_as_is": "Keep as is",
	"use_snapshot": "Old version",
	"use_source": "New version",
	"help": {
	"upgraded_from_v2": "PleromaFE has been upgraded, theme could look a little bit different than you remember.",
	"v2_imported": "File you imported was made for older FE. We try to maximize compatibility but there still could be inconsistencies.",
	"future_version_imported": "File you imported was made in newer version of FE.",
	"older_version_imported": "File you imported was made in older version of FE.",
	"snapshot_present": "Theme snapshot is loaded, so all values are overriden. You can load theme's actual data instead.",
	"snapshot_missing": "No theme snapshot was in the file so it could look different than originally envisioned.",
	"fe_upgraded": "PleromaFE's theme engine upgraded after version update.",
	"fe_downgraded": "PleromaFE's version rolled back.",
	"migration_snapshot_ok": "Just to be safe, theme snapshot loaded. You can try loading theme data.",
	"migration_napshot_gone": "For whatever reason snapshot was missing, some stuff could look different than you remember.",
	"snapshot_source_mismatch": "Versions conflict: most likely FE was rolled back and updated again, if you changed theme using older version of FE you most likely want to use old version, otherwise use new version."
	}
	},
	"common": {
	"color": "Color",
	"opacity": "Opacity",
	"contrast": {
	"hint": "Contrast ratio is {ratio}, it {level} {context}",
	"level": {
	"aa": "meets Level AA guideline (minimal)",
	"aaa": "meets Level AAA guideline (recommended)",
	"bad": "doesn't meet any accessibility guidelines"
	},
	"context": {
	"18pt": "for large (18pt+) text",
	"text": "for text"
	}
	}
	},
	"common_colors": {
	"_tab_label": "Common",
	"main": "Common colors",
	"foreground_hint": "See \"Advanced\" tab for more detailed control",
	"rgbo": "Icons, accents, badges"
	},
	"advanced_colors": {
	"_tab_label": "Advanced",
	"alert": "Alert background",
	"alert_error": "Error",
	"alert_warning": "Warning",
	"alert_neutral": "Neutral",
	"post": "Posts/User bios",
	"badge": "Badge background",
	"popover": "Tooltips, menus, popovers",
	"badge_notification": "Notification",
	"panel_header": "Panel header",
	"top_bar": "Top bar",
	"borders": "Borders",
	"buttons": "Buttons",
	"inputs": "Input fields",
	"faint_text": "Faded text",
	"underlay": "Underlay",
	"wallpaper": "Wallpaper",
	"poll": "Poll graph",
	"icons": "Icons",
	"highlight": "Highlighted elements",
	"pressed": "Pressed",
	"selectedPost": "Selected post",
	"selectedMenu": "Selected menu item",
	"disabled": "Disabled",
	"toggled": "Toggled",
	"tabs": "Tabs",
	"chat": {
	"incoming": "Incoming",
	"outgoing": "Outgoing",
	"border": "Border"
	}
	},
	"radii": {
	"_tab_label": "Roundness"
	},
	"shadows": {
	"_tab_label": "Shadow and lighting",
	"component": "Component",
	"override": "Override",
	"shadow_id": "Shadow #{value}",
	"blur": "Blur",
	"spread": "Spread",
	"inset": "Inset",
	"hintV3": "For shadows you can also use the {0} notation to use other color slot.",
	"filter_hint": {
	"always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
	"drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.",
	"avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.",
	"spread_zero": "Shadows with spread > 0 will appear as if it was set to zero",
	"inset_classic": "Inset shadows will be using {0}"
	},
	"components": {
	"panel": "Panel",
	"panelHeader": "Panel header",
	"topBar": "Top bar",
	"avatar": "User avatar (in profile view)",
	"avatarStatus": "User avatar (in post display)",
	"popup": "Popups and tooltips",
	"button": "Button",
	"buttonHover": "Button (hover)",
	"buttonPressed": "Button (pressed)",
	"buttonPressedHover": "Button (pressed+hover)",
	"input": "Input field"
	}
	},
	"fonts": {
	"_tab_label": "Fonts",
	"help": "Select font to use for elements of UI. For \"custom\" you have to enter exact font name as it appears in system.",
	"components": {
	"interface": "Interface",
	"input": "Input fields",
	"post": "Post text",
	"postCode": "Monospaced text in a post (rich text)"
	},
	"family": "Font name",
	"size": "Size (in px)",
	"weight": "Weight (boldness)",
	"custom": "Custom"
	},
	"preview": {
	"header": "Preview",
	"content": "Content",
	"error": "Example error",
	"button": "Button",
	"text": "A bunch of more {0} and {1}",
	"mono": "content",
	"input": "Just landed in L.A.",
	"faint_link": "helpful manual",
	"fine_print": "Read our {0} to learn nothing useful!",
	"header_faint": "This is fine",
	"checkbox": "I have skimmed over terms and conditions",
	"link": "a nice lil' link"
	}
	},
	"version": {
	"title": "Version",
	"backend_version": "Backend version",
	"frontend_version": "Frontend version"
	}
	},
	"time": {
	"day": "{0} day",
	"days": "{0} days",
	"day_short": "{0}d",
	"days_short": "{0}d",
	"hour": "{0} hour",
	"hours": "{0} hours",
	"hour_short": "{0}h",
	"hours_short": "{0}h",
	"in_future": "in {0}",
	"in_past": "{0} ago",
	"minute": "{0} minute",
	"minutes": "{0} minutes",
	"minute_short": "{0}min",
	"minutes_short": "{0}min",
	"month": "{0} month",
	"months": "{0} months",
	"month_short": "{0}mo",
	"months_short": "{0}mo",
	"now": "just now",
	"now_short": "now",
	"second": "{0} second",
	"seconds": "{0} seconds",
	"second_short": "{0}s",
	"seconds_short": "{0}s",
	"week": "{0} week",
	"weeks": "{0} weeks",
	"week_short": "{0}w",
	"weeks_short": "{0}w",
	"year": "{0} year",
	"years": "{0} years",
	"year_short": "{0}y",
	"years_short": "{0}y"
	},
	"timeline": {
	"collapse": "Collapse",
	"conversation": "Conversation",
	"error": "Error fetching timeline: {0}",
	"load_older": "Load older statuses",
	"no_retweet_hint": "Post is marked as followers-only or direct and cannot be repeated",
	"repeated": "repeated",
	"show_new": "Show new",
	"reload": "Reload",
	"up_to_date": "Up-to-date",
	"no_more_statuses": "No more statuses",
	"no_statuses": "No statuses",
	"socket_reconnected": "Realtime connection established",
	"socket_broke": "Realtime connection lost: CloseEvent code {0}"
	},
	"status": {
	"favorites": "Favorites",
	"repeats": "Repeats",
	"delete": "Delete status",
	"pin": "Pin on profile",
	"unpin": "Unpin from profile",
	"pinned": "Pinned",
	"bookmark": "Bookmark",
	"unbookmark": "Unbookmark",
	"delete_confirm": "Do you really want to delete this status?",
	"reply_to": "Reply to",
	"mentions": "Mentions",
	"replies_list": "Replies:",
	"replies_list_with_others": "Replies (+{numReplies} other): \| Replies (+{numReplies} others):",
	"mute_conversation": "Mute conversation",
	"unmute_conversation": "Unmute conversation",
	"status_unavailable": "Status unavailable",
	"copy_link": "Copy link to status",
	"external_source": "External source",
	"thread_muted": "Thread muted",
	"thread_muted_and_words": ", has words:",
	"show_full_subject": "Show full subject",
	"hide_full_subject": "Hide full subject",
	"show_content": "Show content",
	"hide_content": "Hide content",
	"status_deleted": "This post was deleted",
	"nsfw": "NSFW",
	"expand": "Expand",
	"you": "(You)",
	"plus_more": "+{number} more",
	"many_attachments": "Post has {number} attachment(s)",
	"collapse_attachments": "Collapse attachments",
	"show_all_attachments": "Show all attachments",
	"show_attachment_in_modal": "Show in media modal",
	"show_attachment_description": "Preview description (open attachment for full description)",
	"hide_attachment": "Hide attachment",
	"remove_attachment": "Remove attachment",
	"attachment_stop_flash": "Stop Flash player",
	"move_up": "Shift attachment left",
	"move_down": "Shift attachment right",
	"open_gallery": "Open gallery",
	"thread_hide": "Hide this thread",
	"thread_show": "Show this thread",
	"thread_show_full": "Show everything under this thread ({numStatus} status in total, max depth {depth}) \| Show everything under this thread ({numStatus} statuses in total, max depth {depth})",
	"thread_show_full_with_icon": "{icon} {text}",
	"thread_follow": "See the remaining part of this thread ({numStatus} status in total) \| See the remaining part of this thread ({numStatus} statuses in total)",
	"thread_follow_with_icon": "{icon} {text}",
	"ancestor_follow": "See {numReplies} other reply under this status \| See {numReplies} other replies under this status",
	"ancestor_follow_with_icon": "{icon} {text}",
	"show_all_conversation_with_icon": "{icon} {text}",
	"show_all_conversation": "Show full conversation ({numStatus} other status) \| Show full conversation ({numStatus} other statuses)",
	"show_only_conversation_under_this": "Only show replies to this status"
	},
	"user_card": {
	"approve": "Approve",
	"block": "Block",
	"blocked": "Blocked!",
	"deactivated": "Deactivated",
	"deny": "Deny",
	"edit_profile": "Edit profile",
	"favorites": "Favorites",
	"follow": "Follow",
	"follow_cancel": "Cancel request",
	"follow_sent": "Request sent!",
	"follow_progress": "Requesting…",
	"follow_unfollow": "Unfollow",
	"followees": "Following",
	"followers": "Followers",
	"following": "Following!",
	"follows_you": "Follows you!",
	"hidden": "Hidden",
	"its_you": "It's you!",
	"media": "Media",
	"mention": "Mention",
	"message": "Message",
	"mute": "Mute",
	"muted": "Muted",
	"per_day": "per day",
	"remote_follow": "Remote follow",
	"report": "Report",
	"statuses": "Statuses",
	"subscribe": "Subscribe",
	"unsubscribe": "Unsubscribe",
	"unblock": "Unblock",
	"unblock_progress": "Unblocking…",
	"block_progress": "Blocking…",
	"unmute": "Unmute",
	"unmute_progress": "Unmuting…",
	"mute_progress": "Muting…",
	"hide_repeats": "Hide repeats",
	"show_repeats": "Show repeats",
	"bot": "Bot",
	"admin_menu": {
	"moderation": "Moderation",
	"grant_admin": "Grant Admin",
	"revoke_admin": "Revoke Admin",
	"grant_moderator": "Grant Moderator",
	"revoke_moderator": "Revoke Moderator",
	"activate_account": "Activate account",
	"deactivate_account": "Deactivate account",
	"delete_account": "Delete account",
	"force_nsfw": "Mark all posts as NSFW",
	"strip_media": "Remove media from posts",
	"force_unlisted": "Force posts to be unlisted",
	"sandbox": "Force posts to be followers-only",
	"disable_remote_subscription": "Disallow following user from remote instances",
	"disable_any_subscription": "Disallow following user at all",
	"quarantine": "Disallow user posts from federating",
	"delete_user": "Delete user",
	"delete_user_confirmation": "Are you absolutely sure? This action cannot be undone."
	},
	"highlight": {
	"disabled": "No highlight",
	"solid": "Solid bg",
	"striped": "Striped bg",
	"side": "Side stripe"
	}
	},
	"user_profile": {
	"timeline_title": "User timeline",
	"profile_does_not_exist": "Sorry, this profile does not exist.",
	"profile_loading_error": "Sorry, there was an error loading this profile."
	},
	"user_reporting": {
	"title": "Reporting {0}",
	"add_comment_description": "The report will be sent to your instance moderators. You can provide an explanation of why you are reporting this account below:",
	"additional_comments": "Additional comments",
	"forward_description": "The account is from another server. Send a copy of the report there as well?",
	"forward_to": "Forward to {0}",
	"submit": "Submit",
	"generic_error": "An error occurred while processing your request."
	},
	"who_to_follow": {
	"more": "More",
	"who_to_follow": "Who to follow"
	},
	"tool_tip": {
	"media_upload": "Upload media",
	"repeat": "Repeat",
	"reply": "Reply",
	"favorite": "Favorite",
	"add_reaction": "Add Reaction",
	"user_settings": "User Settings",
	"accept_follow_request": "Accept follow request",
	"reject_follow_request": "Reject follow request",
	"bookmark": "Bookmark"
	},
	"upload": {
	"error": {
	"base": "Upload failed.",
	"message": "Upload failed: {0}",
	"file_too_big": "File too big [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
	"default": "Try again later"
	},
	"file_size_units": {
	"B": "B",
	"KiB": "KiB",
	"MiB": "MiB",
	"GiB": "GiB",
	"TiB": "TiB"
	}
	},
	"search": {
	"people": "People",
	"hashtags": "Hashtags",
	"person_talking": "{count} person talking",
	"people_talking": "{count} people talking",
	"no_results": "No results"
	},
	"password_reset": {
	"forgot_password": "Forgot password?",
	"password_reset": "Password reset",
	"instruction": "Enter your email address or username. We will send you a link to reset your password.",
	"placeholder": "Your email or username",
	"check_email": "Check your email for a link to reset your password.",
	"return_home": "Return to the home page",
	"too_many_requests": "You have reached the limit of attempts, try again later.",
	"password_reset_disabled": "Password reset is disabled. Please contact your instance administrator.",
	"password_reset_required": "You must reset your password to log in.",
	"password_reset_required_but_mailer_is_disabled": "You must reset your password, but password reset is disabled. Please contact your instance administrator."
	},
	"chats": {
	"you": "You:",
	"message_user": "Message {nickname}",
	"delete": "Delete",
	"chats": "Chats",
	"new": "New Chat",
	"empty_message_error": "Cannot post empty message",
	"more": "More",
	"delete_confirm": "Do you really want to delete this message?",
	"error_loading_chat": "Something went wrong when loading the chat.",
	"error_sending_message": "Something went wrong when sending the message.",
	"empty_chat_list_placeholder": "You don't have any chats yet. Start a new chat!"
	},
	"file_type": {
	"audio": "Audio",
	"video": "Video",
	"image": "Image",
	"file": "File"
	},
	"display_date": {
	"today": "Today"
	}
	}
	diff --git a/src/modules/config.js b/src/modules/config.js
	index e04013394a..6ae2e754e6 100644
	--- a/src/modules/config.js
	+++ b/src/modules/config.js
	@@ -1,177 +1,183 @@
	import Cookies from 'js-cookie'
	import { setPreset, applyTheme } from '../services/style_setter/style_setter.js'
	import messages from '../i18n/messages'
	import localeService from '../services/locale/locale.service.js'

	const BACKEND_LANGUAGE_COOKIE_NAME = 'userLanguage'

	const browserLocale = (window.navigator.language \|\| 'en').split('-')[0]

	/* TODO this is a bit messy.
	* We need to declare settings with their types and also deal with
	* instance-default settings in some way, hopefully try to avoid copy-pasta
	* in general.
	*/
	export const multiChoiceProperties = [
	'postContentType',
	'subjectLineBehavior',
	'conversationDisplay', // tree \| linear
	'conversationOtherRepliesButton', // below \| inside
	'mentionLinkDisplay' // short \| full_for_remote \| full
	]

	export const defaultState = {
	expertLevel: 0, // used to track which settings to show and hide
	colors: {},
	theme: undefined,
	customTheme: undefined,
	customThemeSource: undefined,
	hideISP: false,
	hideInstanceWallpaper: false,
	hideShoutbox: false,
	// bad name: actually hides posts of muted USERS
	hideMutedPosts: undefined, // instance default
	hideMutedThreads: undefined, // instance default
	hideWordFilteredPosts: undefined, // instance default
	muteBotStatuses: undefined, // instance default
	collapseMessageWithSubject: undefined, // instance default
	padEmoji: true,
	hideAttachments: false,
	hideAttachmentsInConv: false,
	maxThumbnails: 16,
	hideNsfw: true,
	preloadImage: true,
	loopVideo: true,
	loopVideoSilentOnly: true,
	streaming: false,
	emojiReactionsOnTimeline: true,
	alwaysShowNewPostButton: false,
	autohideFloatingPostButton: false,
	pauseOnUnfocused: true,
	stopGifs: true,
	replyVisibility: 'all',
	+ thirdColumnMode: 'notifications',
	notificationVisibility: {
	follows: true,
	mentions: true,
	likes: true,
	repeats: true,
	moves: true,
	emojiReactions: true,
	followRequest: true,
	chatMention: true,
	polls: true
	},
	webPushNotifications: false,
	muteWords: [],
	highlight: {},
	interfaceLanguage: browserLocale,
	hideScopeNotice: false,
	useStreamingApi: false,
	sidebarRight: undefined, // instance default
	scopeCopy: undefined, // instance default
	subjectLineBehavior: undefined, // instance default
	alwaysShowSubjectInput: undefined, // instance default
	postContentType: undefined, // instance default
	minimalScopesMode: undefined, // instance default
	// This hides statuses filtered via a word filter
	hideFilteredStatuses: undefined, // instance default
	playVideosInModal: false,
	useOneClickNsfw: false,
	useContainFit: true,
	+ disableStickyHeaders: false,
	+ showScrollbars: false,
	greentext: undefined, // instance default
	useAtIcon: undefined, // instance default
	mentionLinkDisplay: undefined, // instance default
	mentionLinkShowTooltip: undefined, // instance default
	mentionLinkShowAvatar: undefined, // instance default
	mentionLinkFadeDomain: undefined, // instance default
	mentionLinkShowYous: undefined, // instance default
	mentionLinkBoldenYou: undefined, // instance default
	hidePostStats: undefined, // instance default
	hideBotIndication: undefined, // instance default
	hideUserStats: undefined, // instance default
	virtualScrolling: undefined, // instance default
	sensitiveByDefault: undefined, // instance default
	conversationDisplay: undefined, // instance default
	conversationTreeAdvanced: undefined, // instance default
	conversationOtherRepliesButton: undefined, // instance default
	conversationTreeFadeAncestors: undefined, // instance default
	maxDepthInThread: undefined // instance default
	}

	// caching the instance default properties
	export const instanceDefaultProperties = Object.entries(defaultState)
	.filter(([key, value]) => value === undefined)
	.map(([key, value]) => key)

	const config = {
	state: { ...defaultState },
	getters: {
	defaultConfig (state, getters, rootState, rootGetters) {
	const { instance } = rootState
	return {
	...defaultState,
	...Object.fromEntries(
	instanceDefaultProperties.map(key => [key, instance[key]])
	)
	}
	},
	mergedConfig (state, getters, rootState, rootGetters) {
	const { defaultConfig } = rootGetters
	return {
	...defaultConfig,
	// Do not override with undefined
	...Object.fromEntries(Object.entries(state).filter(([k, v]) => v !== undefined))
	}
	}
	},
	mutations: {
	setOption (state, { name, value }) {
	state[name] = value
	},
	setHighlight (state, { user, color, type }) {
	const data = this.state.config.highlight[user]
	if (color \|\| type) {
	state.highlight[user] = { color: color \|\| data.color, type: type \|\| data.type }
	} else {
	delete state.highlight[user]
	}
	}
	},
	actions: {
	loadSettings ({ dispatch }, data) {
	const knownKeys = new Set(Object.keys(defaultState))
	const presentKeys = new Set(Object.keys(data))
	const intersection = new Set()
	for (let elem of presentKeys) {
	if (knownKeys.has(elem)) {
	intersection.add(elem)
	}
	}

	intersection.forEach(
	name => dispatch('setOption', { name, value: data[name] })
	)
	},
	setHighlight ({ commit, dispatch }, { user, color, type }) {
	commit('setHighlight', { user, color, type })
	},
	setOption ({ commit, dispatch }, { name, value }) {
	commit('setOption', { name, value })
	switch (name) {
	case 'theme':
	setPreset(value)
	break
	case 'customTheme':
	case 'customThemeSource':
	applyTheme(value)
	break
	case 'interfaceLanguage':
	messages.setLanguage(this.getters.i18n, value)
	Cookies.set(BACKEND_LANGUAGE_COOKIE_NAME, localeService.internalToBackendLocale(value))
	break
	+ case 'thirdColumnMode':
	+ dispatch('setLayoutWidth', undefined)
	+ break
	}
	}
	}
	}

	export default config
	diff --git a/src/modules/interface.js b/src/modules/interface.js
	index 17277331be..a86193eaff 100644
	--- a/src/modules/interface.js
	+++ b/src/modules/interface.js
	@@ -1,142 +1,160 @@
	const defaultState = {
	settingsModalState: 'hidden',
	settingsModalLoaded: false,
	settingsModalTargetTab: null,
	settings: {
	currentSaveStateNotice: null,
	noticeClearTimeout: null,
	notificationPermission: null
	},
	browserSupport: {
	cssFilter: window.CSS && window.CSS.supports && (
	window.CSS.supports('filter', 'drop-shadow(0 0)') \|\|
	window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
	)
	},
	- mobileLayout: false,
	+ layoutType: 'normal',
	globalNotices: [],
	layoutHeight: 0,
	lastTimeline: null
	}

	const interfaceMod = {
	state: defaultState,
	mutations: {
	settingsSaved (state, { success, error }) {
	if (success) {
	if (state.noticeClearTimeout) {
	clearTimeout(state.noticeClearTimeout)
	}
	state.settings.currentSaveStateNotice = { error: false, data: success }
	state.settings.noticeClearTimeout = setTimeout(() => delete state.settings.currentSaveStateNotice, 2000)
	} else {
	state.settings.currentSaveStateNotice = { error: true, errorData: error }
	}
	},
	setNotificationPermission (state, permission) {
	state.notificationPermission = permission
	},
	- setMobileLayout (state, value) {
	- state.mobileLayout = value
	+ setLayoutType (state, value) {
	+ state.layoutType = value
	},
	closeSettingsModal (state) {
	state.settingsModalState = 'hidden'
	},
	togglePeekSettingsModal (state) {
	switch (state.settingsModalState) {
	case 'minimized':
	state.settingsModalState = 'visible'
	return
	case 'visible':
	state.settingsModalState = 'minimized'
	return
	default:
	throw new Error('Illegal minimization state of settings modal')
	}
	},
	openSettingsModal (state) {
	state.settingsModalState = 'visible'
	if (!state.settingsModalLoaded) {
	state.settingsModalLoaded = true
	}
	},
	setSettingsModalTargetTab (state, value) {
	state.settingsModalTargetTab = value
	},
	pushGlobalNotice (state, notice) {
	state.globalNotices.push(notice)
	},
	removeGlobalNotice (state, notice) {
	state.globalNotices = state.globalNotices.filter(n => n !== notice)
	},
	setLayoutHeight (state, value) {
	state.layoutHeight = value
	},
	+ setLayoutWidth (state, value) {
	+ state.layoutWidth = value
	+ },
	setLastTimeline (state, value) {
	state.lastTimeline = value
	}
	},
	actions: {
	setPageTitle ({ rootState }, option = '') {
	document.title = `${option} ${rootState.instance.name}`
	},
	settingsSaved ({ commit, dispatch }, { success, error }) {
	commit('settingsSaved', { success, error })
	},
	setNotificationPermission ({ commit }, permission) {
	commit('setNotificationPermission', permission)
	},
	- setMobileLayout ({ commit }, value) {
	- commit('setMobileLayout', value)
	- },
	closeSettingsModal ({ commit }) {
	commit('closeSettingsModal')
	},
	openSettingsModal ({ commit }) {
	commit('openSettingsModal')
	},
	togglePeekSettingsModal ({ commit }) {
	commit('togglePeekSettingsModal')
	},
	clearSettingsModalTargetTab ({ commit }) {
	commit('setSettingsModalTargetTab', null)
	},
	openSettingsModalTab ({ commit }, value) {
	commit('setSettingsModalTargetTab', value)
	commit('openSettingsModal')
	},
	pushGlobalNotice (
	{ commit, dispatch, state },
	{
	messageKey,
	messageArgs = {},
	level = 'error',
	timeout = 0
	}) {
	const notice = {
	messageKey,
	messageArgs,
	level
	}
	commit('pushGlobalNotice', notice)
	// Adding a new element to array wraps it in a Proxy, which breaks the comparison
	// TODO: Generate UUID or something instead or relying on !== operator?
	const newNotice = state.globalNotices[state.globalNotices.length - 1]
	if (timeout) {
	setTimeout(() => dispatch('removeGlobalNotice', newNotice), timeout)
	}
	return newNotice
	},
	removeGlobalNotice ({ commit }, notice) {
	commit('removeGlobalNotice', notice)
	},
	setLayoutHeight ({ commit }, value) {
	commit('setLayoutHeight', value)
	},
	+ // value is optional, assuming it was cached prior
	+ setLayoutWidth ({ commit, state, rootGetters, rootState }, value) {
	+ let width = value
	+ if (value !== undefined) {
	+ commit('setLayoutWidth', value)
	+ } else {
	+ width = state.layoutWidth
	+ }
	+ const mobileLayout = width <= 800
	+ const normalOrMobile = mobileLayout ? 'mobile' : 'normal'
	+ const { thirdColumnMode } = rootGetters.mergedConfig
	+ if (thirdColumnMode === 'none' \|\| !rootState.users.currentUser) {
	+ commit('setLayoutType', normalOrMobile)
	+ } else {
	+ const wideLayout = width >= 1300
	+ commit('setLayoutType', wideLayout ? 'wide' : normalOrMobile)
	+ }
	+ },
	setLastTimeline ({ commit }, value) {
	commit('setLastTimeline', value)
	}
	}
	}

	export default interfaceMod
	diff --git a/src/modules/users.js b/src/modules/users.js
	index e5889fdb65..f951483f09 100644
	--- a/src/modules/users.js
	+++ b/src/modules/users.js
	@@ -1,595 +1,601 @@
	import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
	+import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
	import oauthApi from '../services/new_api/oauth.js'
	import { compact, map, each, mergeWith, last, concat, uniq, isArray } from 'lodash'
	import { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js'

	// TODO: Unify with mergeOrAdd in statuses.js
	export const mergeOrAdd = (arr, obj, item) => {
	if (!item) { return false }
	const oldItem = obj[item.id]
	if (oldItem) {
	// We already have this, so only merge the new info.
	mergeWith(oldItem, item, mergeArrayLength)
	return { item: oldItem, new: false }
	} else {
	// This is a new item, prepare it
	arr.push(item)
	obj[item.id] = item
	if (item.screen_name && !item.screen_name.includes('@')) {
	obj[item.screen_name.toLowerCase()] = item
	}
	return { item, new: true }
	}
	}

	const mergeArrayLength = (oldValue, newValue) => {
	if (isArray(oldValue) && isArray(newValue)) {
	oldValue.length = newValue.length
	return mergeWith(oldValue, newValue, mergeArrayLength)
	}
	}

	const getNotificationPermission = () => {
	const Notification = window.Notification

	if (!Notification) return Promise.resolve(null)
	if (Notification.permission === 'default') return Notification.requestPermission()
	return Promise.resolve(Notification.permission)
	}

	const blockUser = (store, id) => {
	return store.rootState.api.backendInteractor.blockUser({ id })
	.then((relationship) => {
	store.commit('updateUserRelationship', [relationship])
	store.commit('addBlockId', id)
	store.commit('removeStatus', { timeline: 'friends', userId: id })
	store.commit('removeStatus', { timeline: 'public', userId: id })
	store.commit('removeStatus', { timeline: 'publicAndExternal', userId: id })
	})
	}

	const unblockUser = (store, id) => {
	return store.rootState.api.backendInteractor.unblockUser({ id })
	.then((relationship) => store.commit('updateUserRelationship', [relationship]))
	}

	const muteUser = (store, id) => {
	const predictedRelationship = store.state.relationships[id] \|\| { id }
	predictedRelationship.muting = true
	store.commit('updateUserRelationship', [predictedRelationship])
	store.commit('addMuteId', id)

	return store.rootState.api.backendInteractor.muteUser({ id })
	.then((relationship) => {
	store.commit('updateUserRelationship', [relationship])
	store.commit('addMuteId', id)
	})
	}

	const unmuteUser = (store, id) => {
	const predictedRelationship = store.state.relationships[id] \|\| { id }
	predictedRelationship.muting = false
	store.commit('updateUserRelationship', [predictedRelationship])

	return store.rootState.api.backendInteractor.unmuteUser({ id })
	.then((relationship) => store.commit('updateUserRelationship', [relationship]))
	}

	const hideReblogs = (store, userId) => {
	return store.rootState.api.backendInteractor.followUser({ id: userId, reblogs: false })
	.then((relationship) => {
	store.commit('updateUserRelationship', [relationship])
	})
	}

	const showReblogs = (store, userId) => {
	return store.rootState.api.backendInteractor.followUser({ id: userId, reblogs: true })
	.then((relationship) => store.commit('updateUserRelationship', [relationship]))
	}

	const muteDomain = (store, domain) => {
	return store.rootState.api.backendInteractor.muteDomain({ domain })
	.then(() => store.commit('addDomainMute', domain))
	}

	const unmuteDomain = (store, domain) => {
	return store.rootState.api.backendInteractor.unmuteDomain({ domain })
	.then(() => store.commit('removeDomainMute', domain))
	}

	export const mutations = {
	tagUser (state, { user: { id }, tag }) {
	const user = state.usersObject[id]
	const tags = user.tags \|\| []
	const newTags = tags.concat([tag])
	user['tags'] = newTags
	},
	untagUser (state, { user: { id }, tag }) {
	const user = state.usersObject[id]
	const tags = user.tags \|\| []
	const newTags = tags.filter(t => t !== tag)
	user['tags'] = newTags
	},
	updateRight (state, { user: { id }, right, value }) {
	const user = state.usersObject[id]
	let newRights = user.rights
	newRights[right] = value
	user['rights'] = newRights
	},
	updateActivationStatus (state, { user: { id }, deactivated }) {
	const user = state.usersObject[id]
	user['deactivated'] = deactivated
	},
	setCurrentUser (state, user) {
	state.lastLoginName = user.screen_name
	state.currentUser = mergeWith(state.currentUser \|\| {}, user, mergeArrayLength)
	},
	clearCurrentUser (state) {
	state.currentUser = false
	state.lastLoginName = false
	},
	beginLogin (state) {
	state.loggingIn = true
	},
	endLogin (state) {
	state.loggingIn = false
	},
	saveFriendIds (state, { id, friendIds }) {
	const user = state.usersObject[id]
	user.friendIds = uniq(concat(user.friendIds \|\| [], friendIds))
	},
	saveFollowerIds (state, { id, followerIds }) {
	const user = state.usersObject[id]
	user.followerIds = uniq(concat(user.followerIds \|\| [], followerIds))
	},
	// Because frontend doesn't have a reason to keep these stuff in memory
	// outside of viewing someones user profile.
	clearFriends (state, userId) {
	const user = state.usersObject[userId]
	if (user) {
	user['friendIds'] = []
	}
	},
	clearFollowers (state, userId) {
	const user = state.usersObject[userId]
	if (user) {
	user['followerIds'] = []
	}
	},
	addNewUsers (state, users) {
	each(users, (user) => {
	if (user.relationship) {
	state.relationships[user.relationship.id] = user.relationship
	}
	mergeOrAdd(state.users, state.usersObject, user)
	})
	},
	updateUserRelationship (state, relationships) {
	relationships.forEach((relationship) => {
	state.relationships[relationship.id] = relationship
	})
	},
	saveBlockIds (state, blockIds) {
	state.currentUser.blockIds = blockIds
	},
	addBlockId (state, blockId) {
	if (state.currentUser.blockIds.indexOf(blockId) === -1) {
	state.currentUser.blockIds.push(blockId)
	}
	},
	saveMuteIds (state, muteIds) {
	state.currentUser.muteIds = muteIds
	},
	addMuteId (state, muteId) {
	if (state.currentUser.muteIds.indexOf(muteId) === -1) {
	state.currentUser.muteIds.push(muteId)
	}
	},
	saveDomainMutes (state, domainMutes) {
	state.currentUser.domainMutes = domainMutes
	},
	addDomainMute (state, domain) {
	if (state.currentUser.domainMutes.indexOf(domain) === -1) {
	state.currentUser.domainMutes.push(domain)
	}
	},
	removeDomainMute (state, domain) {
	const index = state.currentUser.domainMutes.indexOf(domain)
	if (index !== -1) {
	state.currentUser.domainMutes.splice(index, 1)
	}
	},
	setPinnedToUser (state, status) {
	const user = state.usersObject[status.user.id]
	user.pinnedStatusIds = user.pinnedStatusIds \|\| []
	const index = user.pinnedStatusIds.indexOf(status.id)

	if (status.pinned && index === -1) {
	user.pinnedStatusIds.push(status.id)
	} else if (!status.pinned && index !== -1) {
	user.pinnedStatusIds.splice(index, 1)
	}
	},
	setUserForStatus (state, status) {
	status.user = state.usersObject[status.user.id]
	},
	setUserForNotification (state, notification) {
	if (notification.type !== 'follow') {
	notification.action.user = state.usersObject[notification.action.user.id]
	}
	notification.from_profile = state.usersObject[notification.from_profile.id]
	},
	setColor (state, { user: { id }, highlighted }) {
	const user = state.usersObject[id]
	user['highlight'] = highlighted
	},
	signUpPending (state) {
	state.signUpPending = true
	state.signUpErrors = []
	},
	signUpSuccess (state) {
	state.signUpPending = false
	},
	signUpFailure (state, errors) {
	state.signUpPending = false
	state.signUpErrors = errors
	}
	}

	export const getters = {
	findUser: state => query => {
	const result = state.usersObject[query]
	// In case it's a screen_name, we can try searching case-insensitive
	if (!result && typeof query === 'string') {
	return state.usersObject[query.toLowerCase()]
	}
	return result
	},
	findUserByUrl: state => query => {
	return state.users
	.find(u => u.statusnet_profile_url &&
	u.statusnet_profile_url.toLowerCase() === query.toLowerCase())
	},
	relationship: state => id => {
	const rel = id && state.relationships[id]
	return rel \|\| { id, loading: true }
	}
	}

	export const defaultState = {
	loggingIn: false,
	lastLoginName: false,
	currentUser: false,
	users: [],
	usersObject: {},
	signUpPending: false,
	signUpErrors: [],
	relationships: {}
	}

	const users = {
	state: defaultState,
	mutations,
	getters,
	actions: {
	fetchUserIfMissing (store, id) {
	if (!store.getters.findUser(id)) {
	store.dispatch('fetchUser', id)
	}
	},
	fetchUser (store, id) {
	return store.rootState.api.backendInteractor.fetchUser({ id })
	.then((user) => {
	store.commit('addNewUsers', [user])
	return user
	})
	},
	fetchUserRelationship (store, id) {
	if (store.state.currentUser) {
	store.rootState.api.backendInteractor.fetchUserRelationship({ id })
	.then((relationships) => store.commit('updateUserRelationship', relationships))
	}
	},
	fetchBlocks (store) {
	return store.rootState.api.backendInteractor.fetchBlocks()
	.then((blocks) => {
	store.commit('saveBlockIds', map(blocks, 'id'))
	store.commit('addNewUsers', blocks)
	return blocks
	})
	},
	blockUser (store, id) {
	return blockUser(store, id)
	},
	unblockUser (store, id) {
	return unblockUser(store, id)
	},
	blockUsers (store, ids = []) {
	return Promise.all(ids.map(id => blockUser(store, id)))
	},
	unblockUsers (store, ids = []) {
	return Promise.all(ids.map(id => unblockUser(store, id)))
	},
	fetchMutes (store) {
	return store.rootState.api.backendInteractor.fetchMutes()
	.then((mutes) => {
	store.commit('saveMuteIds', map(mutes, 'id'))
	store.commit('addNewUsers', mutes)
	return mutes
	})
	},
	muteUser (store, id) {
	return muteUser(store, id)
	},
	unmuteUser (store, id) {
	return unmuteUser(store, id)
	},
	hideReblogs (store, id) {
	return hideReblogs(store, id)
	},
	showReblogs (store, id) {
	return showReblogs(store, id)
	},
	muteUsers (store, ids = []) {
	return Promise.all(ids.map(id => muteUser(store, id)))
	},
	unmuteUsers (store, ids = []) {
	return Promise.all(ids.map(id => unmuteUser(store, id)))
	},
	fetchDomainMutes (store) {
	return store.rootState.api.backendInteractor.fetchDomainMutes()
	.then((domainMutes) => {
	store.commit('saveDomainMutes', domainMutes)
	return domainMutes
	})
	},
	muteDomain (store, domain) {
	return muteDomain(store, domain)
	},
	unmuteDomain (store, domain) {
	return unmuteDomain(store, domain)
	},
	muteDomains (store, domains = []) {
	return Promise.all(domains.map(domain => muteDomain(store, domain)))
	},
	unmuteDomains (store, domain = []) {
	return Promise.all(domain.map(domain => unmuteDomain(store, domain)))
	},
	fetchFriends ({ rootState, commit }, id) {
	const user = rootState.users.usersObject[id]
	const maxId = last(user.friendIds)
	return rootState.api.backendInteractor.fetchFriends({ id, maxId })
	.then((friends) => {
	commit('addNewUsers', friends)
	commit('saveFriendIds', { id, friendIds: map(friends, 'id') })
	return friends
	})
	},
	fetchFollowers ({ rootState, commit }, id) {
	const user = rootState.users.usersObject[id]
	const maxId = last(user.followerIds)
	return rootState.api.backendInteractor.fetchFollowers({ id, maxId })
	.then((followers) => {
	commit('addNewUsers', followers)
	commit('saveFollowerIds', { id, followerIds: map(followers, 'id') })
	return followers
	})
	},
	clearFriends ({ commit }, userId) {
	commit('clearFriends', userId)
	},
	clearFollowers ({ commit }, userId) {
	commit('clearFollowers', userId)
	},
	subscribeUser ({ rootState, commit }, id) {
	return rootState.api.backendInteractor.subscribeUser({ id })
	.then((relationship) => commit('updateUserRelationship', [relationship]))
	},
	unsubscribeUser ({ rootState, commit }, id) {
	return rootState.api.backendInteractor.unsubscribeUser({ id })
	.then((relationship) => commit('updateUserRelationship', [relationship]))
	},
	toggleActivationStatus ({ rootState, commit }, { user }) {
	const api = user.deactivated ? rootState.api.backendInteractor.activateUser : rootState.api.backendInteractor.deactivateUser
	api({ user })
	.then((user) => { let deactivated = !user.is_active; commit('updateActivationStatus', { user, deactivated }) })
	},
	registerPushNotifications (store) {
	const token = store.state.currentUser.credentials
	const vapidPublicKey = store.rootState.instance.vapidPublicKey
	const isEnabled = store.rootState.config.webPushNotifications
	const notificationVisibility = store.rootState.config.notificationVisibility

	registerPushNotifications(isEnabled, vapidPublicKey, token, notificationVisibility)
	},
	unregisterPushNotifications (store) {
	const token = store.state.currentUser.credentials

	unregisterPushNotifications(token)
	},
	addNewUsers ({ commit }, users) {
	commit('addNewUsers', users)
	},
	addNewStatuses (store, { statuses }) {
	const users = map(statuses, 'user')
	const retweetedUsers = compact(map(statuses, 'retweeted_status.user'))
	store.commit('addNewUsers', users)
	store.commit('addNewUsers', retweetedUsers)

	each(statuses, (status) => {
	// Reconnect users to statuses
	store.commit('setUserForStatus', status)
	// Set pinned statuses to user
	store.commit('setPinnedToUser', status)
	})
	each(compact(map(statuses, 'retweeted_status')), (status) => {
	// Reconnect users to retweets
	store.commit('setUserForStatus', status)
	// Set pinned retweets to user
	store.commit('setPinnedToUser', status)
	})
	},
	addNewNotifications (store, { notifications }) {
	const users = map(notifications, 'from_profile')
	const targetUsers = map(notifications, 'target').filter(_ => _)
	const notificationIds = notifications.map(_ => _.id)
	store.commit('addNewUsers', users)
	store.commit('addNewUsers', targetUsers)

	const notificationsObject = store.rootState.statuses.notifications.idStore
	const relevantNotifications = Object.entries(notificationsObject)
	.filter(([k, val]) => notificationIds.includes(k))
	.map(([k, val]) => val)

	// Reconnect users to notifications
	each(relevantNotifications, (notification) => {
	store.commit('setUserForNotification', notification)
	})
	},
	searchUsers ({ rootState, commit }, { query }) {
	return rootState.api.backendInteractor.searchUsers({ query })
	.then((users) => {
	commit('addNewUsers', users)
	return users
	})
	},
	async signUp (store, userInfo) {
	store.commit('signUpPending')

	let rootState = store.rootState

	try {
	let data = await rootState.api.backendInteractor.register(
	{ params: { ...userInfo } }
	)
	store.commit('signUpSuccess')
	store.commit('setToken', data.access_token)
	store.dispatch('loginUser', data.access_token)
	} catch (e) {
	let errors = e.message
	store.commit('signUpFailure', errors)
	throw e
	}
	},
	async getCaptcha (store) {
	return store.rootState.api.backendInteractor.getCaptcha()
	},

	logout (store) {
	const { oauth, instance } = store.rootState

	const data = {
	...oauth,
	commit: store.commit,
	instance: instance.server
	}

	return oauthApi.getOrCreateApp(data)
	.then((app) => {
	const params = {
	app,
	instance: data.instance,
	token: oauth.userToken
	}

	return oauthApi.revokeToken(params)
	})
	.then(() => {
	store.commit('clearCurrentUser')
	store.dispatch('disconnectFromSocket')
	store.commit('clearToken')
	store.dispatch('stopFetchingTimeline', 'friends')
	store.commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
	store.dispatch('stopFetchingNotifications')
	store.dispatch('stopFetchingFollowRequests')
	store.commit('clearNotifications')
	store.commit('resetStatuses')
	store.dispatch('resetChats')
	store.dispatch('setLastTimeline', 'public-timeline')
	+ store.dispatch('setLayoutWidth', windowWidth())
	+ store.dispatch('setLayoutHeight', windowHeight())
	})
	},
	loginUser (store, accessToken) {
	return new Promise((resolve, reject) => {
	const commit = store.commit
	commit('beginLogin')
	store.rootState.api.backendInteractor.verifyCredentials(accessToken)
	.then((data) => {
	if (!data.error) {
	const user = data
	// user.credentials = userCredentials
	user.credentials = accessToken
	user.blockIds = []
	user.muteIds = []
	user.domainMutes = []
	commit('setCurrentUser', user)
	commit('addNewUsers', [user])

	store.dispatch('fetchEmoji')

	getNotificationPermission()
	.then(permission => commit('setNotificationPermission', permission))

	// Set our new backend interactor
	commit('setBackendInteractor', backendInteractorService(accessToken))

	if (user.token) {
	store.dispatch('setWsToken', user.token)

	// Initialize the shout socket.
	store.dispatch('initializeSocket')
	}

	const startPolling = () => {
	// Start getting fresh posts.
	store.dispatch('startFetchingTimeline', { timeline: 'friends' })

	// Start fetching notifications
	store.dispatch('startFetchingNotifications')

	// Start fetching chats
	store.dispatch('startFetchingChats')
	}

	if (store.getters.mergedConfig.useStreamingApi) {
	store.dispatch('fetchTimeline', 'friends', { since: null })
	store.dispatch('fetchNotifications', { since: null })
	store.dispatch('enableMastoSockets', true).catch((error) => {
	console.error('Failed initializing MastoAPI Streaming socket', error)
	}).then(() => {
	store.dispatch('fetchChats', { latest: true })
	setTimeout(() => store.dispatch('setNotificationsSilence', false), 10000)
	})
	} else {
	startPolling()
	}

	// Get user mutes
	store.dispatch('fetchMutes')

	+ store.dispatch('setLayoutWidth', windowWidth())
	+ store.dispatch('setLayoutHeight', windowHeight())
	+
	// Fetch our friends
	store.rootState.api.backendInteractor.fetchFriends({ id: user.id })
	.then((friends) => commit('addNewUsers', friends))
	} else {
	const response = data.error
	// Authentication failed
	commit('endLogin')
	if (response.status === 401) {
	reject(new Error('Wrong username or password'))
	} else {
	reject(new Error('An error occurred, please try again'))
	}
	}
	commit('endLogin')
	resolve()
	})
	.catch((error) => {
	console.log(error)
	commit('endLogin')
	reject(new Error('Failed to connect to server, try again'))
	})
	})
	}
	}
	}

	export default users
	diff --git a/src/panel.scss b/src/panel.scss
	new file mode 100644
	index 0000000000..3a814269fd
	--- /dev/null
	+++ b/src/panel.scss
	@@ -0,0 +1,198 @@
	+.panel {
	+ position: relative;
	+ display: flex;
	+ flex-direction: column;
	+ background-color: $fallback--bg;
	+ background-color: var(--bg, $fallback--bg);
	+
	+ &::after,
	+ & {
	+ border-radius: $fallback--panelRadius;
	+ border-radius: var(--panelRadius, $fallback--panelRadius);
	+ }
	+
	+ &::after {
	+ content: '';
	+ position: absolute;
	+ top: 0;
	+ bottom: 0;
	+ left: 0;
	+ right: 0;
	+ z-index: 5;
	+ box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
	+ box-shadow: var(--panelShadow);
	+ pointer-events: none;
	+ }
	+}
	+
	+.panel-body {
	+ padding: var(--panel-body-padding, 0);
	+
	+ &:empty::before {
	+ content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
	+ display: block;
	+ margin: 1em;
	+ text-align: center;
	+ }
	+
	+ > p {
	+ line-height: 1.3;
	+ padding: 1em;
	+ margin: 0;
	+ }
	+}
	+
	+.panel-heading,
	+.panel-footer {
	+ --panel-heading-height-padding: 0.6em;
	+ --__panel-heading-height: 3.2em;
	+ --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding));
	+
	+ position: relative;
	+ box-sizing: border-box;
	+ display: grid;
	+ grid-auto-flow: column;
	+ grid-template-columns: minmax(50%, 1fr);
	+ grid-auto-columns: auto;
	+ grid-column-gap: 0.5em;
	+ flex: none;
	+ background-size: cover;
	+ padding: 0.6em;
	+ height: var(--__panel-heading-height);
	+ line-height: var(--__panel-heading-height-inner);
	+ z-index: 4;
	+
	+ &.-flexible-height {
	+ --__panel-heading-height: auto;
	+
	+ &::after,
	+ &::before {
	+ display: none;
	+ }
	+ }
	+
	+ &.-stub {
	+ &,
	+ &::after {
	+ border-radius: $fallback--panelRadius;
	+ border-radius: var(--panelRadius, $fallback--panelRadius);
	+ }
	+ }
	+
	+ &.-sticky {
	+ position: sticky;
	+ top: var(--navbar-height);
	+ }
	+
	+ &::after,
	+ &::before {
	+ content: '';
	+ position: absolute;
	+ top: 0;
	+ bottom: 0;
	+ right: 0;
	+ left: 0;
	+ pointer-events: none;
	+ }
	+
	+ .title {
	+ font-size: 1.3em;
	+ }
	+
	+ .alert {
	+ white-space: nowrap;
	+ text-overflow: ellipsis;
	+ overflow-x: hidden;
	+ }
	+
	+ &:not(.-flexible-height) {
	+ > .button-default,
	+ > .alert {
	+ height: var(--__panel-heading-height-inner);
	+ min-height: 0;
	+ box-sizing: border-box;
	+ margin: 0;
	+ min-width: 1px;
	+ padding-top: 0;
	+ padding-bottom: 0;
	+ align-self: stretch;
	+ }
	+ }
	+}
	+
	+// TODO Should refactor panels into separate component and utilize slots
	+
	+.panel-heading {
	+ border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
	+ border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
	+ border-width: 0 0 1px 0;
	+ align-items: start;
	+ // panel theme
	+ color: var(--panelText);
	+ background-color: $fallback--bg;
	+ background-color: var(--bg, $fallback--bg);
	+
	+ &::after {
	+ background-color: $fallback--fg;
	+ background-color: var(--panel, $fallback--fg);
	+ z-index: -2;
	+ border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
	+ border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
	+ box-shadow: var(--panelHeaderShadow);
	+ }
	+
	+ a,
	+ .-link {
	+ color: $fallback--link;
	+ color: var(--panelLink, $fallback--link);
	+ }
	+
	+ .faint {
	+ background-color: transparent;
	+ color: $fallback--faint;
	+ color: var(--panelFaint, $fallback--faint);
	+ }
	+
	+ .faint-link {
	+ color: $fallback--faint;
	+ color: var(--faintLink, $fallback--faint);
	+ }
	+
	+ &:not(.-flexible-height) {
	+ > .button-default {
	+ flex-shrink: 0;
	+
	+ &,
	+ i[class*=icon-] {
	+ color: $fallback--text;
	+ color: var(--btnPanelText, $fallback--text);
	+ }
	+
	+ &:active {
	+ background-color: $fallback--fg;
	+ background-color: var(--btnPressedPanel, $fallback--fg);
	+ color: $fallback--text;
	+ color: var(--btnPressedPanelText, $fallback--text);
	+ }
	+
	+ &:disabled {
	+ color: $fallback--text;
	+ color: var(--btnDisabledPanelText, $fallback--text);
	+ }
	+
	+ &.toggled {
	+ color: $fallback--text;
	+ color: var(--btnToggledPanelText, $fallback--text);
	+ }
	+ }
	+ }
	+}
	+
	+.panel-footer {
	+ border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
	+ border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
	+ align-items: center;
	+ border-width: 1px 0 0 0;
	+ border-style: solid;
	+ border-color: var(--border, $fallback--border);
	+}
	diff --git a/src/services/offset_finder/offset_finder.service.js b/src/services/offset_finder/offset_finder.service.js
	index 9034f8c843..5a904f08ca 100644
	--- a/src/services/offset_finder/offset_finder.service.js
	+++ b/src/services/offset_finder/offset_finder.service.js
	@@ -1,31 +1,31 @@
	export const findOffset = (child, parent, { top = 0, left = 0 } = {}, ignorePadding = true) => {
	const result = {
	top: top + child.offsetTop,
	left: left + child.offsetLeft
	}
	if (!ignorePadding && child !== window) {
	const { topPadding, leftPadding } = findPadding(child)
	result.top += ignorePadding ? 0 : topPadding
	result.left += ignorePadding ? 0 : leftPadding
	}

	- if (child.offsetParent && (parent === window \|\| parent.contains(child.offsetParent) \|\| parent === child.offsetParent)) {
	+ if (child.offsetParent && window.getComputedStyle(child.offsetParent).position !== 'sticky' && (parent === window \|\| parent.contains(child.offsetParent) \|\| parent === child.offsetParent)) {
	return findOffset(child.offsetParent, parent, result, false)
	} else {
	if (parent !== window) {
	const { topPadding, leftPadding } = findPadding(parent)
	result.top += topPadding
	result.left += leftPadding
	}
	return result
	}
	}

	const findPadding = (el) => {
	const topPaddingStr = window.getComputedStyle(el)['padding-top']
	const topPadding = Number(topPaddingStr.substring(0, topPaddingStr.length - 2))
	const leftPaddingStr = window.getComputedStyle(el)['padding-left']
	const leftPadding = Number(leftPaddingStr.substring(0, leftPaddingStr.length - 2))

	return { topPadding, leftPadding }
	}
	diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
	index f75e69168f..543aa874c7 100644
	--- a/src/services/style_setter/style_setter.js
	+++ b/src/services/style_setter/style_setter.js
	@@ -1,421 +1,421 @@
	import { convert } from 'chromatism'
	import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js'
	import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/theme_data.service.js'

	export const applyTheme = (input) => {
	const { rules } = generatePreset(input)
	const head = document.head
	const body = document.body
	body.classList.add('hidden')

	const styleEl = document.createElement('style')
	head.appendChild(styleEl)
	const styleSheet = styleEl.sheet

	styleSheet.toString()
	- styleSheet.insertRule(`body { ${rules.radii} }`, 'index-max')
	- styleSheet.insertRule(`body { ${rules.colors} }`, 'index-max')
	- styleSheet.insertRule(`body { ${rules.shadows} }`, 'index-max')
	- styleSheet.insertRule(`body { ${rules.fonts} }`, 'index-max')
	+ styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
	+ styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
	+ styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
	+ styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
	body.classList.remove('hidden')
	}

	export const getCssShadow = (input, usesDropShadow) => {
	if (input.length === 0) {
	return 'none'
	}

	return input
	.filter(_ => usesDropShadow ? _.inset : _)
	.map((shad) => [
	shad.x,
	shad.y,
	shad.blur,
	shad.spread
	].map(_ => _ + 'px').concat([
	getCssColor(shad.color, shad.alpha),
	shad.inset ? 'inset' : ''
	]).join(' ')).join(', ')
	}

	const getCssShadowFilter = (input) => {
	if (input.length === 0) {
	return 'none'
	}

	return input
	// drop-shadow doesn't support inset or spread
	.filter((shad) => !shad.inset && Number(shad.spread) === 0)
	.map((shad) => [
	shad.x,
	shad.y,
	// drop-shadow's blur is twice as strong compared to box-shadow
	shad.blur / 2
	].map(_ => _ + 'px').concat([
	getCssColor(shad.color, shad.alpha)
	]).join(' '))
	.map(_ => `drop-shadow(${_})`)
	.join(' ')
	}

	export const generateColors = (themeData) => {
	const sourceColors = !themeData.themeEngineVersion
	? colors2to3(themeData.colors \|\| themeData)
	: themeData.colors \|\| themeData

	const { colors, opacity } = getColors(sourceColors, themeData.opacity \|\| {})

	const htmlColors = Object.entries(colors)
	.reduce((acc, [k, v]) => {
	if (!v) return acc
	acc.solid[k] = rgb2hex(v)
	acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgba2css(v)
	return acc
	}, { complete: {}, solid: {} })
	return {
	rules: {
	colors: Object.entries(htmlColors.complete)
	.filter(([k, v]) => v)
	.map(([k, v]) => `--${k}: ${v}`)
	.join(';')
	},
	theme: {
	colors: htmlColors.solid,
	opacity
	}
	}
	}

	export const generateRadii = (input) => {
	let inputRadii = input.radii \|\| {}
	// v1 -> v2
	if (typeof input.btnRadius !== 'undefined') {
	inputRadii = Object
	.entries(input)
	.filter(([k, v]) => k.endsWith('Radius'))
	.reduce((acc, e) => { acc[e[0].split('Radius')[0]] = e[1]; return acc }, {})
	}
	const radii = Object.entries(inputRadii).filter(([k, v]) => v).reduce((acc, [k, v]) => {
	acc[k] = v
	return acc
	}, {
	btn: 4,
	input: 4,
	checkbox: 2,
	panel: 10,
	avatar: 5,
	avatarAlt: 50,
	tooltip: 2,
	attachment: 5,
	chatMessage: inputRadii.panel
	})

	return {
	rules: {
	radii: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}Radius: ${v}px`).join(';')
	},
	theme: {
	radii
	}
	}
	}

	export const generateFonts = (input) => {
	const fonts = Object.entries(input.fonts \|\| {}).filter(([k, v]) => v).reduce((acc, [k, v]) => {
	acc[k] = Object.entries(v).filter(([k, v]) => v).reduce((acc, [k, v]) => {
	acc[k] = v
	return acc
	}, acc[k])
	return acc
	}, {
	interface: {
	family: 'sans-serif'
	},
	input: {
	family: 'inherit'
	},
	post: {
	family: 'inherit'
	},
	postCode: {
	family: 'monospace'
	}
	})

	return {
	rules: {
	fonts: Object
	.entries(fonts)
	.filter(([k, v]) => v)
	.map(([k, v]) => `--${k}Font: ${v.family}`).join(';')
	},
	theme: {
	fonts
	}
	}
	}

	const border = (top, shadow) => ({
	x: 0,
	y: top ? 1 : -1,
	blur: 0,
	spread: 0,
	color: shadow ? '#000000' : '#FFFFFF',
	alpha: 0.2,
	inset: true
	})
	const buttonInsetFakeBorders = [border(true, false), border(false, true)]
	const inputInsetFakeBorders = [border(true, true), border(false, false)]
	const hoverGlow = {
	x: 0,
	y: 0,
	blur: 4,
	spread: 0,
	color: '--faint',
	alpha: 1
	}

	export const DEFAULT_SHADOWS = {
	panel: [{
	x: 1,
	y: 1,
	blur: 4,
	spread: 0,
	color: '#000000',
	alpha: 0.6
	}],
	topBar: [{
	x: 0,
	y: 0,
	blur: 4,
	spread: 0,
	color: '#000000',
	alpha: 0.6
	}],
	popup: [{
	x: 2,
	y: 2,
	blur: 3,
	spread: 0,
	color: '#000000',
	alpha: 0.5
	}],
	avatar: [{
	x: 0,
	y: 1,
	blur: 8,
	spread: 0,
	color: '#000000',
	alpha: 0.7
	}],
	avatarStatus: [],
	panelHeader: [],
	button: [{
	x: 0,
	y: 0,
	blur: 2,
	spread: 0,
	color: '#000000',
	alpha: 1
	}, ...buttonInsetFakeBorders],
	buttonHover: [hoverGlow, ...buttonInsetFakeBorders],
	buttonPressed: [hoverGlow, ...inputInsetFakeBorders],
	input: [...inputInsetFakeBorders, {
	x: 0,
	y: 0,
	blur: 2,
	inset: true,
	spread: 0,
	color: '#000000',
	alpha: 1
	}]
	}
	export const generateShadows = (input, colors) => {
	// TODO this is a small hack for `mod` to work with shadows
	// this is used to get the "context" of shadow, i.e. for `mod` properly depend on background color of element
	const hackContextDict = {
	button: 'btn',
	panel: 'bg',
	top: 'topBar',
	popup: 'popover',
	avatar: 'bg',
	panelHeader: 'panel',
	input: 'input'
	}

	const cleanInputShadows = Object.fromEntries(
	Object.entries(input.shadows \|\| {})
	.map(([name, shadowSlot]) => [
	name,
	// defaulting color to black to avoid potential problems
	shadowSlot.map(shadowDef => ({ color: '#000000', ...shadowDef }))
	])
	)
	const inputShadows = cleanInputShadows && !input.themeEngineVersion
	? shadows2to3(cleanInputShadows, input.opacity)
	: cleanInputShadows \|\| {}
	const shadows = Object.entries({
	...DEFAULT_SHADOWS,
	...inputShadows
	}).reduce((shadowsAcc, [slotName, shadowDefs]) => {
	const slotFirstWord = slotName.replace(/[A-Z].*$/, '')
	const colorSlotName = hackContextDict[slotFirstWord]
	const isLightOnDark = relativeLuminance(convert(colors[colorSlotName]).rgb) < 0.5
	const mod = isLightOnDark ? 1 : -1
	const newShadow = shadowDefs.reduce((shadowAcc, def) => [
	...shadowAcc,
	{
	...def,
	color: rgb2hex(computeDynamicColor(
	def.color,
	(variableSlot) => convert(colors[variableSlot]).rgb,
	mod
	))
	}
	], [])
	return { ...shadowsAcc, [slotName]: newShadow }
	}, {})

	return {
	rules: {
	shadows: Object
	.entries(shadows)
	// TODO for v2.2: if shadow doesn't have non-inset shadows with spread > 0 - optionally
	// convert all non-inset shadows into filter: drop-shadow() to boost performance
	.map(([k, v]) => [
	`--${k}Shadow: ${getCssShadow(v)}`,
	`--${k}ShadowFilter: ${getCssShadowFilter(v)}`,
	`--${k}ShadowInset: ${getCssShadow(v, true)}`
	].join(';'))
	.join(';')
	},
	theme: {
	shadows
	}
	}
	}

	export const composePreset = (colors, radii, shadows, fonts) => {
	return {
	rules: {
	...shadows.rules,
	...colors.rules,
	...radii.rules,
	...fonts.rules
	},
	theme: {
	...shadows.theme,
	...colors.theme,
	...radii.theme,
	...fonts.theme
	}
	}
	}

	export const generatePreset = (input) => {
	const colors = generateColors(input)
	return composePreset(
	colors,
	generateRadii(input),
	generateShadows(input, colors.theme.colors, colors.mod),
	generateFonts(input)
	)
	}

	export const getThemes = () => {
	const cache = 'no-store'

	return window.fetch('/static/styles.json', { cache })
	.then((data) => data.json())
	.then((themes) => {
	return Object.entries(themes).map(([k, v]) => {
	let promise = null
	if (typeof v === 'object') {
	promise = Promise.resolve(v)
	} else if (typeof v === 'string') {
	promise = window.fetch(v, { cache })
	.then((data) => data.json())
	.catch((e) => {
	console.error(e)
	return null
	})
	}
	return [k, promise]
	})
	})
	.then((promises) => {
	return promises
	.reduce((acc, [k, v]) => {
	acc[k] = v
	return acc
	}, {})
	})
	}
	export const colors2to3 = (colors) => {
	return Object.entries(colors).reduce((acc, [slotName, color]) => {
	const btnPositions = ['', 'Panel', 'TopBar']
	switch (slotName) {
	case 'lightBg':
	return { ...acc, highlight: color }
	case 'btnText':
	return {
	...acc,
	...btnPositions
	.reduce(
	(statePositionAcc, position) =>
	({ ...statePositionAcc, ['btn' + position + 'Text']: color })
	, {}
	)
	}
	default:
	return { ...acc, [slotName]: color }
	}
	}, {})
	}

	/**
	* This handles compatibility issues when importing v2 theme's shadows to current format
	*
	* Back in v2 shadows allowed you to use dynamic colors however those used pure CSS3 variables
	*/
	export const shadows2to3 = (shadows, opacity) => {
	return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => {
	const isDynamic = ({ color = '#000000' }) => color.startsWith('--')
	const getOpacity = ({ color }) => opacity[getOpacitySlot(color.substring(2).split(',')[0])]
	const newShadow = shadowDefs.reduce((shadowAcc, def) => [
	...shadowAcc,
	{
	...def,
	alpha: isDynamic(def) ? getOpacity(def) \|\| 1 : def.alpha
	}
	], [])
	return { ...shadowsAcc, [slotName]: newShadow }
	}, {})
	}

	export const getPreset = (val) => {
	return getThemes()
	.then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
	.then((theme) => {
	const isV1 = Array.isArray(theme)
	const data = isV1 ? {} : theme.theme

	if (isV1) {
	const bg = hex2rgb(theme[1])
	const fg = hex2rgb(theme[2])
	const text = hex2rgb(theme[3])
	const link = hex2rgb(theme[4])

	const cRed = hex2rgb(theme[5] \|\| '#FF0000')
	const cGreen = hex2rgb(theme[6] \|\| '#00FF00')
	const cBlue = hex2rgb(theme[7] \|\| '#0000FF')
	const cOrange = hex2rgb(theme[8] \|\| '#E3FF00')

	data.colors = { bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
	}

	return { theme: data, source: theme.source }
	})
	}

	export const setPreset = (val) => getPreset(val).then(data => applyTheme(data.theme))

File Metadata

Mime Type: text/x-diff
Expires: Sun, Oct 11, 1:02 PM (1 d, 16 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1785790
Default Alt Text: (434 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions