How to expand search field for web version

Hello everyone, can anyone give me a tip and how to change the font so that the search field also expands to the web version and not just the mobile version as it is today? Thanks

What are you missing ? Show a screenshot.

I can see a search field on the web version.

My guess is that the question is about settings menu. You can use the standard browser search functionality, but in mobile version we have a search field there.

In the WEB version, the search field is not displayed.

In the MOBILE version, the search field is displayed.

Yes Anton, that would be exactly it. In the web view the field is shown perfectly, however, when I expand the screen the field disappears.

use the conventional Ctrl+F to search in browser. works perfectly....
search bar is only available on mobile

Indeed CTRL+F is the best option for that settings menu.
But you can also use the Search Field above device details on the Map.
Then when you click on the device, you can click on edit in the Popup window which leads to the same device details to edit.

A search field would hurt no one though on the settings page / devices
you can do a feature request for it: https://github.com/traccar/traccar-web/issues

you can make the changes in SearchHeader.js file

https://ibb.co/8xZRJGV

Thanks for the tip Christian. However, even changing the style to XL, the field is still hidden on 1920p monitors. Could you share your configuration? Thanks

SearchHeader.js

  const phone = useMediaQuery(theme.breakpoints.down('sm'));
  const notphone = useMediaQuery(theme.breakpoints.down('xl'));

  return (phone || notphone) ? (

I made that change. I don't know if it's the best for the code but it shows the search bar.

change affects all searches (devices, users, calendars, etc.)

if someone can improve it, it would be appreciated

It stayed the same for me, it shows the field up to 1535px, after that, the field is hidden. It should show normal as the XL option goes up to 1920px

Apply this

return phone ? (
    <div className={classes.header}>
      <TextField
        variant="outlined"
        placeholder={t('sharedSearch')}
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
      />
    </div>
  ) :
    (
      <div className={classes.header}>
        <TextField
          variant="outlined"
          placeholder={t('sharedSearch')}
          value={keyword}
          onChange={(e) => setKeyword(e.target.value)}
        />
      </div>
    );

I don't really like this solution because it repeats the code, but it should work in any resolution.

I did it another way, it worked perfectly on Full HD monitors

const phone = useMediaQuery(theme.breakpoints.down('sm'));
const notphone = useMediaQuery('(max-width:1920px)');

return (phone || notphone) ? (

Thank you Cristian, your help was of great value.