Use Box instead of div

src/components/Language/LanguageSelector.tsx

@@ -2,6 +2,8 @@ import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { supportedLanguages } from '../../i18n/i18n';
 import {
+  Box,
+  Button,
   FormControl,
   MenuItem,
   Select,
@@ -26,16 +28,7 @@ const LanguageSelector = () => {
     supportedLanguages[currentLang] || supportedLanguages['en'];
 
   return (
-    <div
-      ref={selectorRef}
-      style={{
-        bottom: '5%',
-        display: 'flex',
-        gap: '12px',
-        left: '1.5vh',
-        position: 'absolute',
-      }}
-    >
+    <Box ref={selectorRef}>
       {!showSelect && (
         <Tooltip
           key={currentLang}
@@ -43,13 +36,10 @@ const LanguageSelector = () => {
             postProcess: 'capitalizeFirstChar',
           })}
         >
-          <button
+          <Button
             onClick={() => setShowSelect(true)}
             style={{
-              fontSize: '1.5rem',
-              border: 'none',
-              background: 'none',
-              cursor: 'pointer',
+              fontSize: '1.3rem',
             }}
             aria-label={t('core:current_language', {
               language: name,
@@ -57,7 +47,7 @@ const LanguageSelector = () => {
             })}
           >
             {flag}
-          </button>
+          </Button>
         </Tooltip>
       )}
 
@@ -70,13 +60,13 @@ const LanguageSelector = () => {
           }}
         >
           <Select
-            open
-            labelId="language-select-label"
-            id="language-select"
-            value={currentLang}
-            onChange={handleChange}
             autoFocus
+            id="language-select"
+            labelId="language-select-label"
+            onChange={handleChange}
             onClose={() => setShowSelect(false)}
+            open
+            value={currentLang}
           >
             {Object.entries(supportedLanguages).map(([code, { name }]) => (
               <MenuItem key={code} value={code}>
@@ -86,7 +76,7 @@ const LanguageSelector = () => {
           </Select>
         </FormControl>
       )}
-    </div>
+    </Box>
   );
 };
 

src/components/Theme/ThemeSelector.tsx

@@ -1,8 +1,9 @@
 import { useThemeContext } from './ThemeContext';
-import { IconButton, Tooltip } from '@mui/material';
+import { Box, IconButton, Tooltip } from '@mui/material';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import { useTranslation } from 'react-i18next';
+import { useRef } from 'react';
 
 const ThemeSelector = () => {
   const { t } = useTranslation([
@@ -13,17 +14,10 @@ const ThemeSelector = () => {
     'tutorial',
   ]);
   const { themeMode, toggleTheme } = useThemeContext();
+  const selectorRef = useRef(null);
 
   return (
-    <div
-      style={{
-        bottom: '1%',
-        display: 'flex',
-        gap: '12px',
-        left: '1.2vh',
-        position: 'absolute',
-      }}
-    >
+    <Box ref={selectorRef}>
       <Tooltip
         title={
           themeMode === 'dark'
@@ -39,7 +33,7 @@ const ThemeSelector = () => {
           {themeMode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
         </IconButton>
       </Tooltip>
-    </div>
+    </Box>
   );
 };