From 60e8b88c75b40f35aabd722f63c00d8dc40f771f Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 13 Jan 2025 20:29:27 +0530
Subject: [PATCH] feat: update orientation of error message

---
 .../dashboard/components-next/message/MessageError.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components-next/message/MessageError.vue b/app/javascript/dashboard/components-next/message/MessageError.vue
index 128ab0b06..0e0a5e53b 100644
--- a/app/javascript/dashboard/components-next/message/MessageError.vue
+++ b/app/javascript/dashboard/components-next/message/MessageError.vue
@@ -1,11 +1,15 @@
 <script setup>
 import Icon from 'next/icon/Icon.vue';
 import { useI18n } from 'vue-i18n';
+import { useMessageContext } from './provider.js';
+import { ORIENTATION } from './constants';
 
 defineProps({
   error: { type: String, required: true },
 });
 
+const { orientation } = useMessageContext();
+
 const { t } = useI18n();
 </script>
 
@@ -22,7 +26,11 @@ const { t } = useI18n();
         />
       </div>
       <div
-        class="absolute bg-n-alpha-3 px-4 py-3 border rounded-xl border-n-strong text-n-slate-12 bottom-6 w-52 right-0 text-xs backdrop-blur-[100px] shadow-[0px_0px_24px_0px_rgba(0,0,0,0.12)] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all"
+        class="absolute bg-n-alpha-3 px-4 py-3 border rounded-xl border-n-strong text-n-slate-12 bottom-6 w-52 text-xs backdrop-blur-[100px] shadow-[0px_0px_24px_0px_rgba(0,0,0,0.12)] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all"
+        :class="{
+          'right-0': orientation === ORIENTATION.LEFT,
+          'left-0': orientation === ORIENTATION.RIGHT,
+        }"
       >
         {{ error }}
       </div>