Fix glitches in symbol palette after switching to Bootstrap 5

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>
   )
 }
-

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>

services/web/frontend/js/features/symbol-palette/components/symbol-palette-info-link.js

@@ -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>
-  )
-}

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({

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 & {