Hide scroll down button entirely with css to fix some issues

client/components/Chat.vue

@@ -57,14 +57,11 @@
 				<div
 					v-else
 					class="chat-content">
-					<transition name="fade">
-						<div
-							v-if="!channel.scrolledToBottom"
-							class="scroll-down"
-							@click="$refs.messageList.jumpToBottom()">
-							<div class="scroll-down-arrow" />
-						</div>
-					</transition>
+					<div
+						:class="['scroll-down', {'scroll-down-shown': !channel.scrolledToBottom}]"
+						@click="$refs.messageList.jumpToBottom()">
+						<div class="scroll-down-arrow" />
+					</div>
 					<MessageList
 						ref="messageList"
 						:network="network"

client/css/style.css

@@ -1083,27 +1083,24 @@ background on hover (unless active) */
 	margin: 0;
 }
 
-.scroll-down.fade-leave-active,
-.scroll-down.fade-enter-active {
-	opacity: 0;
-	transform: translateY(16px);
-	transition: opacity 0.3s, transform 0.3s;
-}
-
-.scroll-down.fade-enter-to {
-	opacity: 1;
-	transform: none;
-}
-
 .scroll-down {
 	position: absolute;
 	bottom: 16px;
 	right: 16px;
 	z-index: 2;
-	transition: right 0.2s ease-in-out;
+	pointer-events: none;
+	opacity: 0;
+	transform: translateY(16px);
+	transition: all 0.2s ease-in-out;
 	cursor: pointer;
 }
 
+.scroll-down-shown {
+	opacity: 1;
+	transform: none;
+	pointer-events: auto;
+}
+
 .scroll-down-arrow {
 	width: 48px;
 	height: 48px;
@@ -2381,7 +2378,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 		height: 100%;
 		position: absolute;
 		left: -220px;
-		z-index: 2;
+		z-index: 10;
 		transition: transform 160ms;
 		transform: translateZ(0);
 	}
@@ -2396,7 +2393,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 		opacity: 0;
 		visibility: hidden;
 		transition: opacity 160ms, visibility 160ms;
-		z-index: 1;
+		z-index: 9;
 	}
 
 	#viewport.menu-open #sidebar-overlay {