From 2e6eccba29290609dacd23bd95d8273f6ee09ae5 Mon Sep 17 00:00:00 2001
From: yu-i-i <kla9555@gmail.com>
Date: Sat, 8 Mar 2025 18:23:19 +0100
Subject: [PATCH] Fix glitches in symbol palette after switching to Bootstrap 5

---
 .../components/symbol-palette-close-button.js |  8 ++---
 .../components/symbol-palette-content.js      |  5 +---
 .../components/symbol-palette-info-link.js    | 29 -------------------
 .../components/symbol-palette-item.js         |  2 +-
 .../stylesheets/modules/symbol-palette.scss   |  4 +--
 5 files changed, 7 insertions(+), 41 deletions(-)
 delete mode 100644 services/web/frontend/js/features/symbol-palette/components/symbol-palette-info-link.js

diff --git a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-close-button.js b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-close-button.js
index c472c31586..6c776d1e24 100644
--- a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-close-button.js
+++ b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-close-button.js
@@ -5,14 +5,12 @@ export default function SymbolPaletteCloseButton() {
   const { toggleSymbolPalette } = useEditorContext()
 
   return (
+    <div className="symbol-palette-header-outer">
       <Button
-        bsStyle="link"
-        bsSize="small"
-        className="symbol-palette-close-button"
+        className="btn-close symbol-palette-close-button"
         onClick={toggleSymbolPalette} // Trigger closePanel on click
       >
-        &times;
       </Button>
+    </div>
   )
 }
-
diff --git a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js
index 8537e14585..a170987793 100644
--- a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js
+++ b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js
@@ -9,7 +9,6 @@ import { buildCategorisedSymbols, createCategories } from '../utils/categories'
 import SymbolPaletteSearch from './symbol-palette-search'
 import SymbolPaletteBody from './symbol-palette-body'
 import SymbolPaletteTabs from './symbol-palette-tabs'
-// import SymbolPaletteInfoLink from './symbol-palette-info-link'
 import SymbolPaletteCloseButton from './symbol-palette-close-button'
 
 import '@reach/tabs/styles.css'
@@ -68,9 +67,7 @@ export default function SymbolPaletteContent({ handleSelect }) {
         <div className="symbol-palette-header-outer">
           <div className="symbol-palette-header">
             <SymbolPaletteTabs categories={categories} />
-            <div className="symbol-palette-header-group">
-              {/* Useless button (uncomment if you see any sense in it) */}
-              {/* <SymbolPaletteInfoLink /> */}
+            <div className="symbol-palette-header-group"> 
               <SymbolPaletteSearch setInput={setInput} inputRef={inputRef} />
             </div>
           </div>
diff --git a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-info-link.js b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-info-link.js
deleted file mode 100644
index ba56cf2b10..0000000000
--- a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-info-link.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap'
-import { useTranslation } from 'react-i18next'
-
-export default function SymbolPaletteInfoLink() {
-  const { t } = useTranslation()
-
-  return (
-    <OverlayTrigger
-      placement="top"
-      trigger={['hover', 'focus']}
-      overlay={
-        <Tooltip id="tooltip-symbol-palette-info">
-          {t('find_out_more_about_latex_symbols')}
-        </Tooltip>
-      }
-    >
-      <Button
-        bsStyle="link"
-        bsSize="small"
-        className="symbol-palette-info-link"
-        href="https://www.overleaf.com/learn/latex/List_of_Greek_letters_and_math_symbols"
-        target="_blank"
-        rel="noopener noreferer"
-      >
-        <span className="info-badge" />
-      </Button>
-    </OverlayTrigger>
-  )
-}
diff --git a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-item.js b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-item.js
index a892f33cf8..e1fca8c434 100644
--- a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-item.js
+++ b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-item.js
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react'
-import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap-5'
 import PropTypes from 'prop-types'
 
 export default function SymbolPaletteItem({
diff --git a/services/web/frontend/stylesheets/modules/symbol-palette.scss b/services/web/frontend/stylesheets/modules/symbol-palette.scss
index a0a1d4b716..03c55419bf 100644
--- a/services/web/frontend/stylesheets/modules/symbol-palette.scss
+++ b/services/web/frontend/stylesheets/modules/symbol-palette.scss
@@ -163,8 +163,8 @@
     filter: var(--bs-btn-close-white-filter);
   }
 
-  margin-top: var(--spacing-04);
-  margin-left: var(--spacing-05);
+  margin-top: var(--spacing-05);
+  margin-left: var(--spacing-02);
   margin-right: var(--spacing-03);
 
   .symbol-palette-unavailable & {