From 33c9391ad8e69e2784e094abb4707e74720f69f7 Mon Sep 17 00:00:00 2001
From: Carson McManus <dyc3@users.noreply.github.com>
Date: Sat, 31 Aug 2024 05:43:52 -0400
Subject: [PATCH] client: slightly improve room layout on smaller screens
 (#1802)

---
 .../src/components/controls/VolumeControl.vue | 51 ++++++++++++-------
 client/src/views/Room.vue                     |  2 +-
 2 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/client/src/components/controls/VolumeControl.vue b/client/src/components/controls/VolumeControl.vue
index 57f803612..b6b80436e 100644
--- a/client/src/components/controls/VolumeControl.vue
+++ b/client/src/components/controls/VolumeControl.vue
@@ -1,22 +1,23 @@
 <template>
-	<vue-slider
-		:model-value="volume"
-		@update:model-value="changed"
-		style="width: 150px; margin-left: 10px; margin-right: 20px"
-		:process="
-			dotsPos => [
-				[
-					0,
-					dotsPos[0],
-					{
-						backgroundColor: 'rgb(var(--v-theme-primary))',
-					},
-				],
-			]
-		"
-		:drag-on-click="true"
-		data-cy="volume-slider"
-	/>
+	<div class="volume">
+		<vue-slider
+			:model-value="volume"
+			@update:model-value="changed"
+			:process="
+				dotsPos => [
+					[
+						0,
+						dotsPos[0],
+						{
+							backgroundColor: 'rgb(var(--v-theme-primary))',
+						},
+					],
+				]
+			"
+			:drag-on-click="true"
+			data-cy="volume-slider"
+		/>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -33,3 +34,17 @@ function changed(value: number) {
 	volume.value = value;
 }
 </script>
+
+<style lang="scss" scoped>
+@import "../../variables.scss";
+
+.volume {
+	width: 150px;
+	margin-left: 10px;
+	margin-right: 20px;
+
+	@media (max-width: $md-max) {
+		width: 100px;
+	}
+}
+</style>
diff --git a/client/src/views/Room.vue b/client/src/views/Room.vue
index fa8856d2f..80547541a 100644
--- a/client/src/views/Room.vue
+++ b/client/src/views/Room.vue
@@ -749,7 +749,7 @@ $in-video-chat-width-small: 250px;
 		justify-self: center;
 
 		@media (max-width: $md-max) {
-			max-width: 100%;
+			width: 100%;
 		}
 	}
 }