From 29c2c40e0650d692d6a65b3e0a0c4381d0012712 Mon Sep 17 00:00:00 2001
From: Liana Husikyan <liana@ethereum.org>
Date: Fri, 10 May 2024 13:49:12 +0200
Subject: [PATCH] Update remix-ui-tabs.tsx

---
 libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx | 127 +++++++++----------
 1 file changed, 63 insertions(+), 64 deletions(-)

diff --git a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
index 16458381a0..9838bf5ca1 100644
--- a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
+++ b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
@@ -208,72 +208,71 @@ export const TabsUI = (props: TabsUIProps) => {
               <i className="fas fa-play"></i>
             </button>
           </CustomTooltip>
-          <div className= "border-left ml-2" style={{ height: "3em" }}></div>
-          <CustomTooltip
-            placement="bottom"
-            tooltipId="overlay-tooltip-explaination"
-            tooltipText={
-              <span>
-                {tabsState.currentExt === 'sol'? (
-                  <FormattedMessage id="remixUiTabs.tooltipText5" />
-                ) : (
-                  <FormattedMessage id="remixUiTabs.tooltipText4" />
-                )}
-              </span>
-            }
-          >
-            <button
-              data-id="explain-editor"
-              id='explain_btn'
-              className='btn text-ai pl-2 pr-0 py-0 d-flex'
-              disabled={!(tabsState.currentExt === 'sol') || explaining}
-              onClick={async () => {
-                const path = active().substr(active().indexOf('/') + 1, active().length)
-                const content = await props.plugin.call('fileManager', 'readFile', path)
-                if (tabsState.currentExt === 'sol') {
-                  setExplaining(true)
-                  await props.plugin.call('solcoder', 'code_explaining', content)
-                  setExplaining(false)
-                  _paq.push(['trackEvent', 'ai', 'solcoder', 'explain_file'])
-                }
-              }}
+          <div className= "d-flex"
+            <CustomTooltip
+              placement="bottom"
+              tooltipId="overlay-tooltip-explaination"
+              tooltipText={
+                <span>
+                  {tabsState.currentExt === 'sol'? (
+                    <FormattedMessage id="remixUiTabs.tooltipText5" />
+                  ) : (
+                    <FormattedMessage id="remixUiTabs.tooltipText4" />
+                  )}
+                </span>
+              }
             >
-              <i className={`fas fa-user-robot ${explaining ? 'loadingExplanation' : ''}`}></i>
-            </button>
-          </CustomTooltip>
-          <CustomTooltip
-            placement="bottom"
-            tooltipId="overlay-tooltip-copilot"
-            tooltipText={
-              <span>
-                { tabsState.currentExt === 'sol'? (
-                  !ai_switch ? (
-                    <FormattedMessage id="remixUiTabs.tooltipText6" />
-                  ) : (<FormattedMessage id="remixUiTabs.tooltipText7" />)
-                ) : (
-                  <FormattedMessage id="remixUiTabs.tooltipTextDisabledCopilot" />
-                )}
-              </span>
-            }
-          >
-            <button
-              data-id="remix_ai_switch"
-              id='remix_ai_switch'
-              className="btn ai-switch text-ai pl-2 pr-0 py-0 d-flex"
-              disabled={!(tabsState.currentExt === 'sol' )}
-              onClick={async () => {
-                await props.plugin.call('settings', 'updateCopilotChoice', !ai_switch)
-                setAI_switch(!ai_switch)
-                ai_switch ? _paq.push(['trackEvent', 'ai', 'solcoder', 'copilot_enabled']) : _paq.push(['trackEvent', 'ai', 'solcoder', 'copilot_disabled'])
-              }}
+              <button
+                data-id="explain-editor"
+                id='explain_btn'
+                className='btn text-ai pl-2 pr-0 py-0 d-flex'
+                disabled={!(tabsState.currentExt === 'sol') || explaining}
+                onClick={async () => {
+                  const path = active().substr(active().indexOf('/') + 1, active().length)
+                  const content = await props.plugin.call('fileManager', 'readFile', path)
+                  if (tabsState.currentExt === 'sol') {
+                    setExplaining(true)
+                    await props.plugin.call('solcoder', 'code_explaining', content)
+                    setExplaining(false)
+                    _paq.push(['trackEvent', 'ai', 'solcoder', 'explain_file'])
+                  }
+                }}
+              >
+                <i className={`fas fa-user-robot ${explaining ? 'loadingExplanation' : ''}`}></i>
+              </button>
+            </CustomTooltip>
+            <CustomTooltip
+              placement="bottom"
+              tooltipId="overlay-tooltip-copilot"
+              tooltipText={
+                <span>
+                  { tabsState.currentExt === 'sol'? (
+                    !ai_switch ? (
+                      <FormattedMessage id="remixUiTabs.tooltipText6" />
+                    ) : (<FormattedMessage id="remixUiTabs.tooltipText7" />)
+                  ) : (
+                    <FormattedMessage id="remixUiTabs.tooltipTextDisabledCopilot" />
+                  )}
+                </span>
+              }
             >
-              <i
-                className={ai_switch ? "fas fa-toggle-on" : "fas fa-toggle-off"}
-              ></i>
-            </button>
-          </CustomTooltip>
-
-          <div className= "border-left ml-2" style={{ height: "3em" }}></div>
+              <button
+                data-id="remix_ai_switch"
+                id='remix_ai_switch'
+                className="btn ai-switch text-ai pl-2 pr-0 py-0 d-flex"
+                disabled={!(tabsState.currentExt === 'sol' )}
+                onClick={async () => {
+                  await props.plugin.call('settings', 'updateCopilotChoice', !ai_switch)
+                  setAI_switch(!ai_switch)
+                  ai_switch ? _paq.push(['trackEvent', 'ai', 'solcoder', 'copilot_enabled']) : _paq.push(['trackEvent', 'ai', 'solcoder', 'copilot_disabled'])
+                }}
+              >
+                <i
+                  className={ai_switch ? "fas fa-toggle-on" : "fas fa-toggle-off"}
+                ></i>
+              </button>
+            </CustomTooltip>
+          </div>
 
           <CustomTooltip placement="bottom" tooltipId="overlay-tooltip-zoom-out" tooltipText={<FormattedMessage id="remixUiTabs.zoomOut" />}>
             <span data-id="tabProxyZoomOut" className="btn fas fa-search-minus text-dark pl-2 pr-0 py-0 d-flex" onClick={() => props.onZoomOut()}></span>