fix: lrc searchbox layout

package.json

@@ -23,7 +23,7 @@
     "@babel/preset-typescript": "^7.26.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@types/base-64": "^1.0.2",
-    "@types/chrome": "^0.0.280",
+    "@types/chrome": "^0.0.287",
     "@types/he": "^1.2.3",
     "@types/js-base64": "^3.3.1",
     "@types/md5": "^2.3.5",
@@ -53,13 +53,13 @@
     "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^2.9.2",
     "node-sass": "^9.0.0",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.1",
     "progress-bar-webpack-plugin": "^2.1.0",
     "react-refresh": "^0.14.2",
     "sass-loader": "^16.0.3",
     "style-loader": "^4.0.0",
-    "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "typescript": "^5.6.3",
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
+    "typescript": "^5.7.2",
     "webpack": "^5.96.1",
     "webpack-cli": "^5.1.4",
     "webpack-config-utils": "^2.3.1",
@@ -70,20 +70,20 @@
     "not dead"
   ],
   "dependencies": {
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
     "@ffmpeg/core": "^0.12.6",
     "@ffmpeg/ffmpeg": "^0.12.10",
     "@ffmpeg/util": "^0.12.1",
     "@fontsource/roboto": "^5.1.0",
-    "@fortawesome/fontawesome-free": "^6.6.0",
-    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/fontawesome-free": "^6.7.1",
+    "@fortawesome/free-brands-svg-icons": "^6.7.1",
     "@hello-pangea/dnd": "^17.0.0",
-    "@mui/icons-material": "^6.1.6",
-    "@mui/lab": "6.0.0-beta.14",
-    "@mui/material": "^6.1.6",
-    "@mui/styles": "^6.1.6",
-    "axios": "^1.7.7",
+    "@mui/icons-material": "^6.1.8",
+    "@mui/lab": "6.0.0-dev.240424162023-9968b4889d",
+    "@mui/material": "^6.1.8",
+    "@mui/styles": "^6.1.8",
+    "axios": "^1.7.8",
     "base-64": "^1.0.0",
     "base64-js": "^1.5.1",
     "big-integer": "^1.6.52",
@@ -101,7 +101,7 @@
     "file-saver": "^2.0.5",
     "fs": "^0.0.1-security",
     "he": "^1.2.0",
-    "i18next": "^23.16.5",
+    "i18next": "^23.16.8",
     "libmuse": "https://github.com/lovegaoshi/muse.git#commit=0bffe2319baf825037bece6869d360d6d307eb72",
     "material-ui-confirm": "^3.0.16",
     "md5": "^2.3.0",
@@ -115,7 +115,7 @@
     "react-contexify": "^6.0.0",
     "react-dom": "^18.3.1",
     "react-hotkeys-hook": "^4.6.1",
-    "react-i18next": "^15.1.1",
+    "react-i18next": "^15.1.2",
     "react-jinke-music-player": "git+https://[email protected]/lovegaoshi/react-music-player.git",
     "react-lrc": "^3.2.1",
     "react-swipeable": "^7.0.2",

src/components/lyric/Lyric.tsx

@@ -10,21 +10,6 @@ import useApp from '@stores/useApp';
 import useLyric from '@hooks/useLyric';
 import LyricSearchBar from './LyricSearchBar';
 
-const styles = () => ({
-  inputOffset: {
-    height: 40,
-    width: 123,
-  },
-  inputLrc: {
-    height: 40,
-    width: 375,
-  },
-  inputSelect: {
-    height: 40,
-    width: 500,
-  },
-});
-
 interface Props {
   currentAudio: NoxMediaChrome.RJKMAudio;
 }
@@ -81,7 +66,7 @@ function LrcView({ lyricOffset, lrc, className }: LrcViewProps) {
   );
 }
 
-export default withStyles(styles)((props: Props) => {
+export default (props: Props) => {
   const { colorTheme, ScrollBar } = useApp((state) => state.playerStyle);
   const [songTitle, setSongTitle] = useState('');
   const debouncedSongTitle = useDebouncedValue(songTitle, 1000);
@@ -124,35 +109,34 @@ export default withStyles(styles)((props: Props) => {
               }}
             />
           </Grid>
-          <Grid sx={mStyles.lrcInputGrid} size={12} container spacing={0}>
-            <TextField
-              sx={mStyles.lrcOffsetGrid}
-              type='number'
-              variant='outlined'
-              label='歌词补偿(毫秒)'
-              InputProps={{
-                className: classes.inputOffset,
-              }}
-              value={usedLyric.currentTimeOffset}
-              onChange={onLrcOffsetChange}
-            />
-            <TextField
-              variant='outlined'
-              label='歌词搜索'
-              InputProps={{
-                className: classes.inputLrc,
-              }}
-              InputLabelProps={{
-                shrink: true,
-              }}
-              placeholder={songTitle}
-              value={songTitle}
-              onChange={(e) => setSongTitle(e.target.value)}
-            />
-          </Grid>
-
-          <Grid sx={mStyles.lrcSearchBarGrid} size={12}>
-            <LyricSearchBar currentAudio={currentAudio} usedLyric={usedLyric} />
+          <Grid sx={mStyles.lrcInputGrid} size={12} container spacing={1}>
+            <Grid size={3}>
+              <TextField
+                sx={mStyles.lrcOffsetGrid}
+                type='number'
+                inputProps={mStyles.lrcOffsetInput}
+                variant='outlined'
+                label='歌词补偿(毫秒)'
+                value={usedLyric.currentTimeOffset}
+                onChange={onLrcOffsetChange}
+              />
+            </Grid>
+            <Grid size={'grow'}>
+              <TextField
+                sx={mStyles.lrcSearchGrid}
+                variant='outlined'
+                label='歌词搜索'
+                placeholder={songTitle}
+                value={songTitle}
+                onChange={(e) => setSongTitle(e.target.value)}
+              />
+            </Grid>
+            <Grid sx={mStyles.lrcSearchBarGrid} size={12}>
+              <LyricSearchBar
+                currentAudio={currentAudio}
+                usedLyric={usedLyric}
+              />
+            </Grid>
           </Grid>
         </Grid>
       </Grid>
@@ -165,7 +149,7 @@ export default withStyles(styles)((props: Props) => {
       </Grid>
     </Grid>
   );
-});
+};
 
 const mStyles = {
   mainContainer: { maxHeight: '100vh', minHeight: '100vh', overflow: 'hidden' },
@@ -184,29 +168,24 @@ const mStyles = {
     overflow: 'hidden',
   },
   lrcInputGrid: {
+    paddingTop: '12px',
     align: 'center',
-    paddingTop: '8px',
     paddingLeft: '2px',
     overflow: 'hidden',
     width: '500px',
   },
   lrcOffsetGrid: {
     align: 'right',
-    paddingTop: '8px',
     paddingRight: '2px',
-    overflow: 'hidden',
   },
+  lrcOffsetInput: { step: '500' },
   lrcSearchGrid: {
-    align: 'center',
-    paddingTop: '8px',
-    overflow: 'hidden',
-    maxWidth: 'fit-content',
+    width: '-webkit-fill-available',
   },
   lrcSearchBarGrid: {
     align: 'center',
     paddingTop: '8px',
     paddingLeft: '2px',
-    overflow: 'hidden',
   },
   lrcGrid: {
     paddingBottom: 10,

src/components/lyric/LyricSearchBar.tsx

@@ -26,7 +26,7 @@ export default function LyricSearchBar({ currentAudio, usedLyric }: Props) {
         onChange={onOptionSet}
         id='LyricSearchBar'
         options={lrcOptions}
-        sx={{ width: 500 }}
+        sx={style}
         size='small'
         renderInput={(params) => <TextField {...params} label='歌词选择' />}
         renderOption={(props, option) => (
@@ -41,3 +41,7 @@ export default function LyricSearchBar({ currentAudio, usedLyric }: Props) {
     </div>
   );
 }
+
+const style = {
+  width: '-webkit-fill-available',
+};