Adjust position for CoreSync window

src/components/CoreSyncStatus.tsx

@@ -106,11 +106,13 @@ export const CoreSyncStatus = () => {
             alt="sync status"
           />
         </span>
+
         <div
           className="bottom"
           style={{
             right: 'unset',
-            left: '0px',
+            left: '55px',
+            top: '10px',
           }}
         >
           <h3>Core Information</h3>
@@ -135,7 +137,6 @@ export const CoreSyncStatus = () => {
               {isUsingGateway?.toString()}
             </span>
           </h4>
-          <i></i>
         </div>
       </div>
     );

src/styles/CoreSyncStatus.css

@@ -44,23 +44,11 @@
 }
 
 .tooltip .bottom i {
-  position: absolute;
   bottom: 100%;
+  height: 12px;
   left: 50%;
   margin-left: -12px;
-  width: 24px;
-  height: 12px;
   overflow: hidden;
-}
-
-.tooltip .bottom i::after {
-  background-color: var(--white);
-  border: 1px solid var(--black);
-  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
-  content: '';
-  height: 12px;
-  left: 50%;
   position: absolute;
-  transform: translate(-50%, 50%) rotate(45deg);
-  width: 12px;
+  width: 24px;
 }