From 9326399ba613588f3486d35da5bcb57fdb9b05fc Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Fri, 22 Jul 2022 18:10:11 +0800
Subject: [PATCH] Center horizontally for small width videos

---
 .../private/components/file-preview/file-preview.vue  | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/src/views/private/components/file-preview/file-preview.vue b/app/src/views/private/components/file-preview/file-preview.vue
index 22b42b521b..304bda89f8 100644
--- a/app/src/views/private/components/file-preview/file-preview.vue
+++ b/app/src/views/private/components/file-preview/file-preview.vue
@@ -1,5 +1,9 @@
 <template>
-	<div v-if="type && !imgError" class="file-preview" :class="{ modal: inModal, small: isSmall, svg: isSVG }">
+	<div
+		v-if="type && !imgError"
+		class="file-preview"
+		:class="{ modal: inModal, small: isSmall, svg: isSVG, centered: type === 'video' }"
+	>
 		<div v-if="type === 'image'" class="image" @click="$emit('click')">
 			<v-image :src="src" :width="width" :height="height" :alt="title" @error="imgError = true" />
 		</div>
@@ -65,6 +69,11 @@ const authenticatedSrc = computed(() => addTokenToURL(props.src));
 	position: relative;
 	max-width: calc((var(--form-column-max-width) * 2) + var(--form-horizontal-gap));
 
+	&.centered {
+		display: flex;
+		justify-content: center;
+	}
+
 	img,
 	video {
 		width: auto;