change button icons positioning, udpate styles

Author: javiert-okta

src/features/common/components/card-tabs/card-tabs.component.tsx

@@ -129,16 +129,20 @@ const CardTabs: React.FC<CardTabsProps> = ({
                           <span className={styles.cardTab__title__compact}>
                             {compactTitle}
                           </span>
+                          {activeCard.slots?.toolbar && (
+                            <div className={styles.cardTabs__actionButtons}>
+                              <div
+                                className={styles.cardTabs__tooltipContainer}
+                              >
+                                {activeCard.slots.toolbar}
+                              </div>
+                            </div>
+                          )}
                         </Tab>
                       </React.Fragment>
                     );
                   })}
                 </TabList>
-                {activeCard.slots?.toolbar && (
-                  <div className={styles.cardTabs__actionButtons}>
-                    {activeCard.slots.toolbar}
-                  </div>
-                )}
               </>
               {cards.map((card) => {
                 return (
@@ -181,7 +185,7 @@ const CardTabs: React.FC<CardTabsProps> = ({
           onSelectionChange={(e) => {
             handleActiveCardChange(e.toString());
           }}
-          className={clsx(MonoFont.className, styles.cardTabs)}
+          className={styles.cardTabs}
         >
           <>
             <TabList className={styles.cardTabs__tabList}>
@@ -197,16 +201,18 @@ const CardTabs: React.FC<CardTabsProps> = ({
                       <span className={styles.cardTab__title__compact}>
                         {compactTitle}
                       </span>
+                      {activeCard.slots?.toolbar && (
+                        <div className={styles.cardTabs__actionButtons}>
+                          <div className={styles.cardTabs__tooltipContainer}>
+                            {activeCard.slots.toolbar}
+                          </div>
+                        </div>
+                      )}
                     </Tab>
                   </React.Fragment>
                 );
               })}
             </TabList>
-            {activeCard.slots?.toolbar && (
-              <div className={styles.cardTabs__actionButtons}>
-                {activeCard.slots.toolbar}
-              </div>
-            )}
           </>
           {cards.map((card) => {
             return (

src/features/common/components/card-tabs/card-tabs.module.scss

@@ -95,14 +95,24 @@ $cardTabs__tabList__height: 2.5rem;
 }
 
 .cardTabs__actionButtons {
-  position: absolute;
-  right: 0.75rem;
-  top: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  height: $cardTabs__tabList__height;
+    position: absolute;
+    right: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.cardTabs__tooltipContainer {
+    position: relative;
+    display: inline-block;
+    &:hover {
+      .button__tooltip {
+        opacity: 1;
+      }
+    }
 }
 
 .cardTabs__body {