From a4173e0900125fa1533758735987a6d1d284b68a Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Mon, 12 Dec 2022 22:23:31 +0200
Subject: [PATCH] Make moderation popover not exit confines of modal

thanks twinkle
it's not a solution i'm proud of and ideally it would behave fine but i think
i've just reached a limitation of css here

grumble grumble
---
 .../mod_modal/tabs/users_tab/users_tab.scss           |  5 +++++
 src/components/moderation_tools/moderation_tools.vue  |  1 +
 src/components/popover/popover.js                     | 11 +++++++++--
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/mod_modal/tabs/users_tab/users_tab.scss b/src/components/mod_modal/tabs/users_tab/users_tab.scss
index 6127b9aa..15c3dce1 100644
--- a/src/components/mod_modal/tabs/users_tab/users_tab.scss
+++ b/src/components/mod_modal/tabs/users_tab/users_tab.scss
@@ -36,6 +36,11 @@
 
   .user-moderation {
     padding-top: 0.6em;
+    position: relative;
+
+    .popover {
+      right: 0;
+    }
   }
 
   .basic-user-card {
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index f93f4847..13b6aef7 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -5,6 +5,7 @@
       class="moderation-tools-popover"
       placement="bottom"
       :offset="{ y: 5 }"
+      :noCenter="extended"
       @show="setToggled(true)"
       @close="setToggled(false)"
     >
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index a30a37c9..f100b3b5 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -31,7 +31,11 @@ const Popover = {
 
     // If true, subtract padding when calculating position for the popover,
     // use it when popover offset looks to be different on top vs bottom.
-    removePadding: Boolean
+    removePadding: Boolean,
+
+    // If true, do not center the popover under the button that called it,
+    // instead aligning it to the right.
+    noCenter: Boolean
   },
   data () {
     return {
@@ -121,7 +125,10 @@ const Popover = {
         : yOffset
 
       const xOffset = (this.offset && this.offset.x) || 0
-      const translateX = anchorWidth * 0.5 - content.offsetWidth * 0.5 + horizOffset + xOffset
+      let translateX = translateX = anchorWidth * 0.5 - content.offsetWidth * 0.5 + horizOffset + xOffset
+      if (this.noCenter) {
+        translateX = 0
+      }
 
       // Note, separate translateX and translateY avoids blurry text on chromium,
       // single translate or translate3d resulted in blurry text.