fix: leaking tailwind css styles for validator dashboards

Author: enzo-bitfly

frontend/components/dashboard/DashboardValidatorOverview.vue

@@ -84,7 +84,7 @@ const aprInfos = [
 </script>
 
 <template>
-  <div class="container">
+  <div class="dashboard-overview__container">
     <DashboardValidatorOverviewItem
       :title="$t('dashboard.validator.overview.online_validators')"
     >
@@ -260,7 +260,7 @@ const aprInfos = [
 
 <style lang="scss" scoped>
 @use "~/assets/css/main.scss";
-.container {
+.dashboard-overview__container {
   @include main.container;
   display: flex;
   align-items: center;

frontend/components/dashboard/slot-viz/DashboardSlotVizTooltip.vue

@@ -378,6 +378,7 @@ const data = computed(() => {
 
     &:nth-child(2) {
       border-width: 3px;
+      border-color: transparent;
     }
 
     .row {

frontend/components/notifications/NotificationsOverview.vue

@@ -40,7 +40,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <div class="container">
+  <div class="notifications-overview__container">
     <div class="box">
       <section class="box-item">
         <h3 class="big_text_label">
@@ -170,7 +170,7 @@ const emit = defineEmits<{
 @use '~/assets/css/main.scss';
 @use "~/assets/css/utils.scss";
 
-.container {
+.notifications-overview__container {
   @include main.container;
   padding: 1.0625rem 1.25rem;
   position: relative;

frontend/components/notifications/management/NotificationsManagementGeneralTab.vue

@@ -125,7 +125,7 @@ watchDebounced(() => store.settings.general_settings, async () => {
     v-if="isVisible"
     v-model="isVisible"
   />
-  <div class="container">
+  <div class="notifications-management-general-tab__container">
     <div
       v-if="status === 'pending'"
       class="loading"
@@ -275,7 +275,7 @@ watchDebounced(() => store.settings.general_settings, async () => {
   pointer-events: none;
 }
 
-.container {
+.notifications-management-general-tab__container {
   border: unset;
   margin-top: var(--padding-xl);
   display: flex;

frontend/components/notifications/management/NotificationsManagementPairedDevicesModal.vue

@@ -28,10 +28,10 @@ const handleToggleNotifications = ({
 <template>
   <BcDialog
     v-model="visible"
-    class="paired-devices-modal-container"
+    class="notifications-management-paired-devices-modal"
     @keydown.esc.stop.prevent="close"
   >
-    <div class="container">
+    <div class="notifications-management-paired-devices-modal__container">
       <h1>{{ $t("notifications.general.paired_devices.title") }}</h1>
       <div
         v-if="notificationsManagementStore.settings.paired_devices.length"
@@ -72,11 +72,11 @@ const handleToggleNotifications = ({
 </template>
 
 <style lang="scss" scoped>
-:global(.paired-devices-modal-container) {
+:global(.notifications-management-paired-devices-modal) {
   width: 790px;
 }
 
-.container {
+.notifications-management-paired-devices-modal__container {
   padding: var(--padding-large);
 
   h1 {