use bs5

apps/app/src/components/Admin/SlackIntegration/Bridge.tsx

@@ -3,10 +3,10 @@ import { useTranslation } from 'next-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
 
 const ProxyCircle = () => (
-  <div className="grw-bridge-proxy-circle">
-    <div className="circle bg-primary border-light rounded-circle">
-      <p className="circle-inner text-light fw-bold d-none d-lg-inline">Proxy Server</p>
-      <p className="circle-inner grw-proxy-server-name d-inline d-lg-none">Proxy Server</p>
+  <div className="grw-bridge-proxy-circle position-relative">
+    <div className="circle position-absolute m-auto z-1 bg-primary border-light rounded-circle">
+      <p className="circle-inner position-absolute text-light fw-bold d-none d-lg-inline">Proxy Server</p>
+      <p className="circle-inner position-absolute grw-proxy-server-name d-inline d-lg-none">Proxy Server</p>
     </div>
   </div>
 );

apps/app/src/components/Layout/Admin.module.scss

@@ -142,7 +142,6 @@ $slack-work-space-name-card-border: #efc1f6;
         inset: 0;
         width: 100px;
         height: 100px;
-        margin:auto;
         border: 13px solid;
 
         @include media-breakpoint-down(lg) {