Revert "client: move chat outside of youtube player bounds to comply …

…with youtube TOS (#1791)" (#1795)

This reverts commit 7b10e86.

fixes #1794

client/src/components/Chat.vue

@@ -73,11 +73,11 @@
 </template>
 
 <script lang="ts" setup>
-import { onUpdated, ref, type Ref, nextTick, onMounted, onUnmounted } from "vue";
+import { onUpdated, ref, Ref, nextTick, onMounted, onUnmounted } from "vue";
 import type { ChatMessage } from "ott-common/models/types";
 import { useConnection } from "@/plugins/connection";
 import { useRoomApi } from "@/util/roomapi";
-import type { ServerMessageChat } from "ott-common/models/messages";
+import { ServerMessageChat } from "ott-common/models/messages";
 import { useRoomKeyboardShortcuts } from "@/util/keyboard-shortcuts";
 import { useSfx } from "@/plugins/sfx";
 import ChatMsg from "./ChatMsg.vue";

client/src/components/controls/VideoControls.vue

@@ -1,26 +1,24 @@
 <template>
-	<div class="video-controls-wrapper">
-		<div
-			:class="{
-				'video-controls': true,
-				'in-video': mode == 'in-video',
-				'outside-video': mode == 'outside-video',
-				'hide': !controlsVisible,
-			}"
-		>
-			<VideoProgressSlider :current-position="sliderPosition" />
-			<div class="controls-row2">
-				<BasicControls :current-position="truePosition" />
-				<!-- eslint-disable-next-line vue/no-v-model-argument -->
-				<VolumeControl />
-				<TimestampDisplay :current-position="truePosition" data-cy="timestamp-display" />
-				<div class="grow"><!-- Spacer --></div>
-				<ClosedCaptionsSwitcher />
-				<PlaybackRateSwitcher />
-				<LayoutSwitcher />
-			</div>
-		</div>
-	</div>
+	<v-col
+		:class="{
+			'video-controls': true,
+			'in-video': mode == 'in-video',
+			'outside-video': mode == 'outside-video',
+			'hide': !controlsVisible,
+		}"
+	>
+		<VideoProgressSlider :current-position="sliderPosition" />
+		<v-row no-gutters class="controls-row2">
+			<BasicControls :current-position="truePosition" />
+			<!-- eslint-disable-next-line vue/no-v-model-argument -->
+			<VolumeControl />
+			<TimestampDisplay :current-position="truePosition" data-cy="timestamp-display" />
+			<div class="grow"><!-- Spacer --></div>
+			<ClosedCaptionsSwitcher />
+			<PlaybackRateSwitcher />
+			<LayoutSwitcher />
+		</v-row>
+	</v-col>
 </template>
 
 <script lang="ts" setup>
@@ -59,7 +57,6 @@ $media-control-background: var(--v-theme-media-control-background, (0, 0, 0));
 	min-height: $video-controls-height;
 	transition: all 0.2s;
 	z-index: 100;
-	padding: 12px;
 
 	&.in-video {
 		position: relative;
@@ -80,6 +77,7 @@ $media-control-background: var(--v-theme-media-control-background, (0, 0, 0));
 	}
 
 	&.outside-video {
+		position: relative;
 		background: rgb($media-control-background);
 		border-radius: 0 0 10px 10px;
 
@@ -92,7 +90,6 @@ $media-control-background: var(--v-theme-media-control-background, (0, 0, 0));
 	}
 
 	.controls-row2 {
-		display: flex;
 		align-items: center;
 	}
 }