From 3b5306b34a0e4d05d018e9cc45d58d473bfd138a Mon Sep 17 00:00:00 2001
From: Tri Truong <tmtri@tma.com.vn>
Date: Thu, 1 Aug 2024 19:05:59 +0700
Subject: [PATCH 1/5] Make left side bar move in/out

---
 webapp/src/App.vue                            | 87 +++++++++++++------
 webapp/src/components/MediaSource.vue         | 12 +--
 .../src/components/MediaSourcePlaceholder.vue |  4 +
 webapp/src/components/RoomsSidebar.vue        | 34 ++++----
 webapp/src/views/rooms/RoomHeader.vue         |  1 +
 webapp/src/views/rooms/item.vue               |  1 +
 6 files changed, 90 insertions(+), 49 deletions(-)

diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index a51a1c56..5871c82e 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-#app(:class="{'has-background-room': backgroundRoom, 'override-sidebar-collapse': overrideSidebarCollapse}", :style="[themeVariables, browserhackStyle, mediaConstraintsStyle]", :key="`${userLocale}-${userTimezone}`")
+#app(ref="app", :class="{'has-background-room': backgroundRoom, 'override-sidebar-collapse': overrideSidebarCollapse}", :style="[themeVariables, browserhackStyle, mediaConstraintsStyle]", :key="`${userLocale}-${userTimezone}`")
 	.fatal-connection-error(v-if="fatalConnectionError")
 		template(v-if="fatalConnectionError.code === 'world.unknown_world'")
 			.mdi.mdi-help-circle
@@ -18,11 +18,13 @@
 			h1 {{ $t('App:fatal-connection-error:else:headline') }}
 		p.code error code: {{ fatalConnectionError.code }}
 	template(v-else-if="world")
-		app-bar(v-if="$mq.below['l']", @toggleSidebar="toggleSidebar")
-		transition(name="backdrop")
-			.sidebar-backdrop(v-if="$mq.below['l'] && showSidebar && !overrideSidebarCollapse", @pointerup="showSidebar = false")
-		rooms-sidebar(:show="$mq.above['l'] || showSidebar || overrideSidebarCollapse", @close="showSidebar = false")
-		router-view(:key="!$route.path.startsWith('/admin') ? $route.fullPath : null", :role="roomHasMedia ? '' : 'main'")
+		//- app-bar(v-if="$mq.below['l']", @toggleSidebar="toggleSidebar")
+		//- transition(name="backdrop")
+		//- 	.sidebar-backdrop(v-if="$mq.below['l'] && showSidebar && !overrideSidebarCollapse", @pointerup="showSidebar = false")
+		bunt-icon-button#btn-close-sidebar(ref="closeSidebarButton", @click="toggleSidebar")
+			template {{ showSidebar ? 'close' : 'menu' }}
+		rooms-sidebar(ref="roomsSidebar", @toggleSidebar="toggleSidebar")
+		router-view(ref="routerView", class="router-view" :key="!$route.path.startsWith('/admin') ? $route.fullPath : null", :role="roomHasMedia ? '' : 'main'")
 		//- defining keys like this keeps the playing dom element alive for uninterupted transitions
 		media-source(v-if="roomHasMedia && user.profile.greeted", ref="primaryMediaSource", :room="room", :key="room.id", role="main")
 		media-source(v-if="call", ref="channelCallSource", :call="call", :background="call.channel !== $route.params.channelId", :key="call.id", @close="$store.dispatch('chat/leaveCall')")
@@ -105,9 +107,11 @@ export default {
 				'--has-stagetools': hasStageTools ? '1' : '0'
 			}
 			if (this.mediaSourcePlaceholderRect) {
+				const routerViewLeft = window.getComputedStyle(this.$refs.routerView.$el).marginLeft;
 				Object.assign(style, {
 					'--mediasource-placeholder-height': this.mediaSourcePlaceholderRect.height + 'px',
-					'--mediasource-placeholder-width': this.mediaSourcePlaceholderRect.width + 'px'
+					'--mediasource-placeholder-width': this.mediaSourcePlaceholderRect.width  + 'px',
+					'--offset-sidebar': (280 - parseFloat(routerViewLeft)) + 'px' 
 				})
 			}
 			return style
@@ -125,7 +129,9 @@ export default {
 		room: 'roomChange',
 		call: 'callChange',
 		$route () {
-			this.showSidebar = false
+			if(this.$mq.below.l) {
+				this.toggleSidebar()
+			}
 		},
 		stageStreamCollapsed: {
 			handler  () {
@@ -151,7 +157,17 @@ export default {
 			this.$store.dispatch('notifications/clearDesktopNotifications')
 		},
 		toggleSidebar () {
-			this.showSidebar = !this.showSidebar
+			if(this.$refs.roomsSidebar && this.$refs.roomsSidebar.$el) {
+				this.$refs.roomsSidebar.$el.style.width = !!this.$refs.roomsSidebar.$el.offsetWidth ? '0px' : '280px';
+			}
+			if(this.$refs.closeSidebarButton && this.$refs.closeSidebarButton.$el) {
+				const buttonLeft = this.$refs.closeSidebarButton.$el.offsetLeft;
+				this.$refs.closeSidebarButton.$el.style.left = !!buttonLeft ? '0px' : '250px';
+			}
+			if(this.$refs.routerView && this.$refs.routerView.$el) {
+				const routerViewLeft = window.getComputedStyle(this.$refs.routerView.$el).marginLeft;
+                this.$refs.routerView.$el.style.marginLeft = routerViewLeft !== '0px' ? '0px' : '280px';
+			}
 		},
 		clearTokenAndReload () {
 			localStorage.removeItem('token')
@@ -215,18 +231,11 @@ export default {
 </script>
 <style lang="stylus">
 #app
-	display: grid
-	grid-template-columns: var(--sidebar-width) auto
-	grid-template-rows: auto
-	grid-template-areas: "rooms-sidebar main"
+	.router-view
+		margin-left: 280px
+		transition: 0.5s
 	--sidebar-width: 280px
 	--pretalx-clr-primary: var(--clr-primary)
-	.c-app-bar
-		grid-area: app-bar
-	.c-rooms-sidebar
-		grid-area: rooms-sidebar
-	.c-room-header
-		grid-area: main
 	> .bunt-progress-circular
 		position: fixed
 		top: 50%
@@ -291,15 +300,41 @@ export default {
 		width: 0
 		height: 0
 
+	.c-rooms-sidebar
+		height: 100%
+		width: 280px
+		position: fixed
+		z-index: 98
+		top: 0
+		left: 0
+		overflow-x: hidden
+		transition: 0.5s
+	#btn-close-sidebar
+		position: absolute
+		top: 0px
+		left: 250px
+		z-index: 99
+		transition: 0.5s
 	+below('l')
-		&.override-sidebar-collapse
-			grid-template-rows: 48px 1fr
-			grid-template-areas: "app-bar app-bar" "rooms-sidebar main"
+		.router-view
+			margin-left: 0px
+			transition: 0.5s
+		.c-rooms-sidebar
+			height: 100%
+			width: 0px
+			position: fixed
+			z-index: 98
+			top: 0
+			left: 0
+			overflow-x: hidden
+			transition: 0.5s
+		#btn-close-sidebar
+			position: absolute
+			top: 0px
+			left: 0px
+			z-index: 99
+			transition: 0.5s
 		&:not(.override-sidebar-collapse)
-			grid-template-columns: auto
-			grid-template-rows: 48px 1fr
-			grid-template-areas: "app-bar" "main"
-
 			.sidebar-backdrop
 				position: fixed
 				top: 0
diff --git a/webapp/src/components/MediaSource.vue b/webapp/src/components/MediaSource.vue
index ae58c3d7..aff321a5 100644
--- a/webapp/src/components/MediaSource.vue
+++ b/webapp/src/components/MediaSource.vue
@@ -236,16 +236,16 @@ export default {
 	&.size-tiny, &.background
 		bottom: calc(var(--vh100) - 48px - 3px)
 		right: 4px + 36px + 4px
-		+below('l')
-			bottom: calc(var(--vh100) - 48px - 48px - 3px)
+		// +below('l')
+		// 	bottom: calc(var(--vh100) - 48px - 48px - 3px)
 	&:not(.size-tiny):not(.background)
 		bottom: calc(var(--vh100) - 56px - var(--mediasource-placeholder-height))
-		right: calc(100vw - var(--sidebar-width) - var(--mediasource-placeholder-width))
+		right: calc(100vw - var(--sidebar-width) + var(--offset-sidebar) - var(--mediasource-placeholder-width))
 		width: var(--mediasource-placeholder-width)
 		height: var(--mediasource-placeholder-height)
-		+below('l')
-			bottom: calc(var(--vh100) - 48px - 56px - var(--mediasource-placeholder-height))
-			right: calc(100vw - var(--mediasource-placeholder-width))
+		// +below('l')
+		// 	bottom: calc(var(--vh100) - 48px - 56px - var(--mediasource-placeholder-height))
+		// 	right: calc(100vw - var(--mediasource-placeholder-width))
 iframe.iframe-media-source
 	transition: all .3s ease
 	border: none
diff --git a/webapp/src/components/MediaSourcePlaceholder.vue b/webapp/src/components/MediaSourcePlaceholder.vue
index b511d0b1..f41b8009 100644
--- a/webapp/src/components/MediaSourcePlaceholder.vue
+++ b/webapp/src/components/MediaSourcePlaceholder.vue
@@ -23,8 +23,12 @@ export default {
 		onResize ([{contentRect}]) {
 			this.$store.commit('reportMediaSourcePlaceholderRect', contentRect)
 		}
+
 	}
 }
 </script>
 <style lang="stylus">
+.c-media-source-placeholder
+	width: 100%
+	height: 100%
 </style>
diff --git a/webapp/src/components/RoomsSidebar.vue b/webapp/src/components/RoomsSidebar.vue
index 8778d80d..d0b633c3 100644
--- a/webapp/src/components/RoomsSidebar.vue
+++ b/webapp/src/components/RoomsSidebar.vue
@@ -1,9 +1,9 @@
 <template lang="pug">
 transition(name="sidebar")
-	.c-rooms-sidebar(v-show="show && !snapBack", :style="style", role="navigation", @pointerdown="onPointerdown", @pointermove="onPointermove", @pointerup="onPointerup", @pointercancel="onPointercancel")
+	.c-rooms-sidebar(:style="style", role="navigation", @pointerdown="onPointerdown", @pointermove="onPointermove", @pointerup="onPointerup", @pointercancel="onPointercancel")
 		router-link.logo(to="/", v-if="$mq.above['m']", :class="{'fit-to-width': theme.logo.fitToWidth}")
 			img(:src="theme.logo.url", :alt="world.title")
-		bunt-icon-button#btn-close-sidebar(v-else, @click="$emit('close')") menu
+		//- bunt-icon-button#btn-close-sidebar(v-else, @click="$emit('close')") menu
 		scrollbars(y)
 			.global-links(role="group", aria-label="pages")
 				router-link.room(v-if="roomsByType.page.includes(rooms[0])", :to="{name: 'home'}", v-html="$emojify(rooms[0].name)")
@@ -506,19 +506,19 @@ export default {
 		.mdi
 			font-size: 24px
 			line-height: 1
-#app:not(.override-sidebar-collapse) .c-rooms-sidebar
-	+below('l')
-		position: fixed
-		left: 0
-		top: 0
-		z-index: 901
-		width: var(--sidebar-width)
-		height: var(--vh100)
-		touch-action: pan-y
-		> .c-scrollbars .scroll-content
-			touch-action: pan-y
-		&.sidebar-enter-active, &.sidebar-leave-active
-			transition: transform .2s
-		&.sidebar-enter, &.sidebar-leave-to
-			transform: translateX(calc(-1 * var(--sidebar-width)))
+// #app:not(.override-sidebar-collapse) .c-rooms-sidebar
+// 	+below('l')
+// 		position: fixed
+// 		left: 0
+// 		top: 0
+// 		z-index: 901
+// 		width: var(--sidebar-width)
+// 		height: var(--vh100)
+// 		touch-action: pan-y
+// 		> .c-scrollbars .scroll-content
+// 			touch-action: pan-y
+// 		&.sidebar-enter-active, &.sidebar-leave-active
+// 			transition: transform .2s
+// 		&.sidebar-enter, &.sidebar-leave-to
+// 			transform: translateX(calc(-1 * var(--sidebar-width)))
 </style>
diff --git a/webapp/src/views/rooms/RoomHeader.vue b/webapp/src/views/rooms/RoomHeader.vue
index 915eda12..f1ed637a 100644
--- a/webapp/src/views/rooms/RoomHeader.vue
+++ b/webapp/src/views/rooms/RoomHeader.vue
@@ -81,6 +81,7 @@ export default {
 	background-color: $clr-white
 	min-height: 0
 	min-width: 0
+	height: 100%
 	> .ui-page-header
 		justify-content: space-between
 		.room-info
diff --git a/webapp/src/views/rooms/item.vue b/webapp/src/views/rooms/item.vue
index 5c18dbf2..3cc4d477 100644
--- a/webapp/src/views/rooms/item.vue
+++ b/webapp/src/views/rooms/item.vue
@@ -114,6 +114,7 @@ export default {
 	flex: auto
 	display: flex
 	min-height: 0
+	height: 100%
 	.stage
 		display: flex
 		flex-direction: column

From e3b4a20d3be3841034196def819ced5904a65731 Mon Sep 17 00:00:00 2001
From: Tri Truong <tmtri@tma.com.vn>
Date: Thu, 1 Aug 2024 21:37:58 +0700
Subject: [PATCH 2/5] adding back app-bar

---
 webapp/src/App.vue                     | 22 +++++++++++++++++-----
 webapp/src/components/AppBar.vue       |  2 +-
 webapp/src/components/RoomsSidebar.vue |  3 ---
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index 5871c82e..dc39f0bb 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -18,11 +18,10 @@
 			h1 {{ $t('App:fatal-connection-error:else:headline') }}
 		p.code error code: {{ fatalConnectionError.code }}
 	template(v-else-if="world")
-		//- app-bar(v-if="$mq.below['l']", @toggleSidebar="toggleSidebar")
+		app-bar(ref="appBar", v-if="$mq.below['l']")
 		//- transition(name="backdrop")
 		//- 	.sidebar-backdrop(v-if="$mq.below['l'] && showSidebar && !overrideSidebarCollapse", @pointerup="showSidebar = false")
-		bunt-icon-button#btn-close-sidebar(ref="closeSidebarButton", @click="toggleSidebar")
-			template {{ showSidebar ? 'close' : 'menu' }}
+		bunt-icon-button#btn-close-sidebar(ref="closeSidebarButton", @click="toggleSidebar") menu
 		rooms-sidebar(ref="roomsSidebar", @toggleSidebar="toggleSidebar")
 		router-view(ref="routerView", class="router-view" :key="!$route.path.startsWith('/admin') ? $route.fullPath : null", :role="roomHasMedia ? '' : 'main'")
 		//- defining keys like this keeps the playing dom element alive for uninterupted transitions
@@ -162,12 +161,16 @@ export default {
 			}
 			if(this.$refs.closeSidebarButton && this.$refs.closeSidebarButton.$el) {
 				const buttonLeft = this.$refs.closeSidebarButton.$el.offsetLeft;
-				this.$refs.closeSidebarButton.$el.style.left = !!buttonLeft ? '0px' : '250px';
+				this.$refs.closeSidebarButton.$el.style.left = !!buttonLeft ? '0px' : '280px';
 			}
 			if(this.$refs.routerView && this.$refs.routerView.$el) {
 				const routerViewLeft = window.getComputedStyle(this.$refs.routerView.$el).marginLeft;
                 this.$refs.routerView.$el.style.marginLeft = routerViewLeft !== '0px' ? '0px' : '280px';
 			}
+			if(this.$refs.appBar && this.$refs.appBar.$el) {
+				const appBarLeft = window.getComputedStyle(this.$refs.appBar.$el).marginLeft;
+                this.$refs.appBar.$el.style.marginLeft = appBarLeft !== '0px' ? '0px' : '280px';
+			}
 		},
 		clearTokenAndReload () {
 			localStorage.removeItem('token')
@@ -234,6 +237,9 @@ export default {
 	.router-view
 		margin-left: 280px
 		transition: 0.5s
+	.c-app-bar
+		margin-left: 280px
+		transition: 0.5s
 	--sidebar-width: 280px
 	--pretalx-clr-primary: var(--clr-primary)
 	> .bunt-progress-circular
@@ -310,15 +316,21 @@ export default {
 		overflow-x: hidden
 		transition: 0.5s
 	#btn-close-sidebar
+		background-color: #C0C0C0
+		border-radius: 5px
 		position: absolute
 		top: 0px
-		left: 250px
+		left: 280px
 		z-index: 99
 		transition: 0.5s
+		opacity: 0.5
 	+below('l')
 		.router-view
 			margin-left: 0px
 			transition: 0.5s
+		.c-app-bar
+			margin-left: 0px
+			transition: 0.5s
 		.c-rooms-sidebar
 			height: 100%
 			width: 0px
diff --git a/webapp/src/components/AppBar.vue b/webapp/src/components/AppBar.vue
index 8ea28854..535cc19d 100644
--- a/webapp/src/components/AppBar.vue
+++ b/webapp/src/components/AppBar.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 .c-app-bar
-	bunt-icon-button(v-if="showActions", @click="$emit('toggleSidebar')", @touchend.native="$emit('toggleSidebar')") menu
+	//- bunt-icon-button(v-if="showActions", @click="$emit('toggleSidebar')", @touchend.native="$emit('toggleSidebar')") menu
 	router-link.logo(to="/", :class="{anonymous: isAnonymous}")
 		img(:src="theme.logo.url", :alt="world.title")
 	.user(v-if="showUser")
diff --git a/webapp/src/components/RoomsSidebar.vue b/webapp/src/components/RoomsSidebar.vue
index d0b633c3..454eb658 100644
--- a/webapp/src/components/RoomsSidebar.vue
+++ b/webapp/src/components/RoomsSidebar.vue
@@ -242,9 +242,6 @@ export default {
 			margin: 0
 			img
 				height: auto
-	#btn-close-sidebar
-		margin: 8px
-		icon-button-style(color: var(--clr-sidebar-text-primary), style: clear)
 	> .c-scrollbars
 		flex: auto
 		.scroll-content

From 6901d020069af891a2d2b12c456cab234949a336 Mon Sep 17 00:00:00 2001
From: Tri Truong <tmtri@tma.com.vn>
Date: Fri, 2 Aug 2024 10:11:20 +0700
Subject: [PATCH 3/5] make content scrollable

---
 webapp/src/components/Scrollbars.vue | 1 +
 webapp/src/views/schedule/index.vue  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/webapp/src/components/Scrollbars.vue b/webapp/src/components/Scrollbars.vue
index abc8c902..8ac9ec70 100644
--- a/webapp/src/components/Scrollbars.vue
+++ b/webapp/src/components/Scrollbars.vue
@@ -210,6 +210,7 @@ $thumb-width-hovered = 12px
 	box-sizing: border-box
 	min-height: 0
 	flex: auto
+	height: 100vh
 	.scroll-content
 		display: flex
 		flex-direction: column
diff --git a/webapp/src/views/schedule/index.vue b/webapp/src/views/schedule/index.vue
index 430d0115..a0f94f31 100644
--- a/webapp/src/views/schedule/index.vue
+++ b/webapp/src/views/schedule/index.vue
@@ -108,6 +108,7 @@ export default {
 	.c-grid-schedule .grid > .room
 		top: 0
 	.scroll-parent
+		height: 100vh
 		.bunt-scrollbar-rail-wrapper-x, .bunt-scrollbar-rail-wrapper-y
 			z-index: 30
 </style>

From 97e24c7d634b35d649af9f5be678f00fd19ecff0 Mon Sep 17 00:00:00 2001
From: odkhang <odkhang@tma.com.vn>
Date: Fri, 2 Aug 2024 13:48:44 +0700
Subject: [PATCH 4/5] update scrollbars height

---
 webapp/src/components/Scrollbars.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/components/Scrollbars.vue b/webapp/src/components/Scrollbars.vue
index 8ac9ec70..da72c9bf 100644
--- a/webapp/src/components/Scrollbars.vue
+++ b/webapp/src/components/Scrollbars.vue
@@ -210,7 +210,7 @@ $thumb-width-hovered = 12px
 	box-sizing: border-box
 	min-height: 0
 	flex: auto
-	height: 100vh
+	height: 89vh
 	.scroll-content
 		display: flex
 		flex-direction: column

From 57d79b83f157521b5d809b0572bc7138068ff3f7 Mon Sep 17 00:00:00 2001
From: Tri Truong <tmtri@tma.com.vn>
Date: Tue, 6 Aug 2024 10:44:16 +0700
Subject: [PATCH 5/5] fix UI

---
 webapp/src/App.vue                     | 21 ++++++++++-----------
 webapp/src/components/AppBar.vue       |  2 +-
 webapp/src/components/MediaSource.vue  |  4 ++--
 webapp/src/components/RoomsSidebar.vue |  2 +-
 webapp/src/components/Scrollbars.vue   | 14 ++++++++++++++
 5 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index dc39f0bb..d211ff4a 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -151,6 +151,10 @@ export default {
 	methods: {
 		onResize () {
 			this.windowHeight = window.innerHeight
+			this.$refs.roomsSidebar.$el.style.width = ''
+			// this.$refs.closeSidebarButton.$el.style.left = ''
+			this.$refs.routerView.$el.style.marginLeft = ''
+			this.$refs.appBar.$el.style.marginLeft = ''
 		},
 		onFocus () {
 			this.$store.dispatch('notifications/clearDesktopNotifications')
@@ -159,10 +163,10 @@ export default {
 			if(this.$refs.roomsSidebar && this.$refs.roomsSidebar.$el) {
 				this.$refs.roomsSidebar.$el.style.width = !!this.$refs.roomsSidebar.$el.offsetWidth ? '0px' : '280px';
 			}
-			if(this.$refs.closeSidebarButton && this.$refs.closeSidebarButton.$el) {
-				const buttonLeft = this.$refs.closeSidebarButton.$el.offsetLeft;
-				this.$refs.closeSidebarButton.$el.style.left = !!buttonLeft ? '0px' : '280px';
-			}
+			// if(this.$refs.closeSidebarButton && this.$refs.closeSidebarButton.$el) {
+			// 	const buttonLeft = this.$refs.closeSidebarButton.$el.offsetLeft;
+			// 	this.$refs.closeSidebarButton.$el.style.left = !!buttonLeft ? '0px' : '280px';
+			// }
 			if(this.$refs.routerView && this.$refs.routerView.$el) {
 				const routerViewLeft = window.getComputedStyle(this.$refs.routerView.$el).marginLeft;
                 this.$refs.routerView.$el.style.marginLeft = routerViewLeft !== '0px' ? '0px' : '280px';
@@ -316,14 +320,9 @@ export default {
 		overflow-x: hidden
 		transition: 0.5s
 	#btn-close-sidebar
-		background-color: #C0C0C0
-		border-radius: 5px
 		position: absolute
-		top: 0px
-		left: 280px
+		top: 10px
 		z-index: 99
-		transition: 0.5s
-		opacity: 0.5
 	+below('l')
 		.router-view
 			margin-left: 0px
@@ -342,7 +341,7 @@ export default {
 			transition: 0.5s
 		#btn-close-sidebar
 			position: absolute
-			top: 0px
+			top: 10px
 			left: 0px
 			z-index: 99
 			transition: 0.5s
diff --git a/webapp/src/components/AppBar.vue b/webapp/src/components/AppBar.vue
index 535cc19d..253b7d35 100644
--- a/webapp/src/components/AppBar.vue
+++ b/webapp/src/components/AppBar.vue
@@ -51,7 +51,7 @@ export default {
 	.bunt-icon-button
 		icon-button-style(color: var(--clr-sidebar-text-primary), style: clear)
 	.logo
-		margin-left: 8px
+		margin: auto
 		font-size: 24px
 		height: 40px
 		&.anonymous
diff --git a/webapp/src/components/MediaSource.vue b/webapp/src/components/MediaSource.vue
index 42fd11ff..4fe49127 100644
--- a/webapp/src/components/MediaSource.vue
+++ b/webapp/src/components/MediaSource.vue
@@ -243,8 +243,8 @@ export default {
 		right: calc(100vw - var(--sidebar-width) + var(--offset-sidebar) - var(--mediasource-placeholder-width))
 		width: var(--mediasource-placeholder-width)
 		height: var(--mediasource-placeholder-height)
-		// +below('l')
-		// 	bottom: calc(var(--vh100) - 48px - 56px - var(--mediasource-placeholder-height))
+		+below('l')
+			bottom: calc(var(--vh100) - 48px - 56px - var(--mediasource-placeholder-height))
 		// 	right: calc(100vw - var(--mediasource-placeholder-width))
 iframe.iframe-media-source
 	transition: all .3s ease
diff --git a/webapp/src/components/RoomsSidebar.vue b/webapp/src/components/RoomsSidebar.vue
index 7246c8ad..3073200a 100644
--- a/webapp/src/components/RoomsSidebar.vue
+++ b/webapp/src/components/RoomsSidebar.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
 transition(name="sidebar")
 	.c-rooms-sidebar(:style="style", role="navigation", @pointerdown="onPointerdown", @pointermove="onPointermove", @pointerup="onPointerup", @pointercancel="onPointercancel")
-		router-link.logo(to="/", v-if="$mq.above['m']", :class="{'fit-to-width': theme.logo.fitToWidth}")
+		router-link.logo(to="/", :class="{'fit-to-width': theme.logo.fitToWidth}")
 			img(:src="theme.logo.url", :alt="world.title")
 		//- bunt-icon-button#btn-close-sidebar(v-else, @click="$emit('close')") menu
 		scrollbars(y)
diff --git a/webapp/src/components/Scrollbars.vue b/webapp/src/components/Scrollbars.vue
index da72c9bf..8f36d57f 100644
--- a/webapp/src/components/Scrollbars.vue
+++ b/webapp/src/components/Scrollbars.vue
@@ -211,6 +211,8 @@ $thumb-width-hovered = 12px
 	min-height: 0
 	flex: auto
 	height: 89vh
+	+below('l')
+		height: 82vh
 	.scroll-content
 		display: flex
 		flex-direction: column
@@ -264,4 +266,16 @@ $thumb-width-hovered = 12px
 			.scrollbar-thumb
 				width: $thumb-width-hovered
 				opacity: .8
+.c-chat
+	.main-chat
+		+below('l')
+			.timeline
+				flex: unset
+			.c-scrollbars
+				height: 80vh
+		+below('xs')
+			.timeline
+				flex: unset
+			.c-scrollbars
+				height: 42vh
 </style>