Spotlight renders out to the left of the screen in Production using Remix (express server)

[ihpannu]

What package has an issue

@mantine/spotlight

Describe the bug

Spotlight renders out to the left of the screen in Production using Remix (express server). Works perfectly well using in Dev environment. I had the same issue with modals but solved using within portal props and facing problems on the latest @remix and "@mantine/hooks": "^5.1.5",

Please suggest

What version of @mantine/hooks page do you have in package.json?

5.1.5

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Possible fix

No response

[rtivital]

Hi @ihpannu, you can set withinPortal prop on SpotlightProvider the same way as on Modal component. If that does not help, please provide a repository with minimal reproduction, use mantine remix template as base for your repository.

[ihpannu]

-I will submit today also having few other issues such as

• rightSection icon in input renders out of the box on initial page load
• 404 doesn't render styles. After a refresh styles load back.
• Spotlight renders under the navbar to the left

Attached some screenshots for now will push an repo to show live results

[rtivital]

@ihpannu are you using mantine-remix-template?

[ihpannu]

@rtivital Yes this started happening since I switched to mantine 5 and react 18 using the template provided on the website

[ihpannu]

@rtivital another example of spotlight it's still in the dom tree

[rtivital]

React 18 is not supported with Remix template, downgrade to react 17 to solve these issues.

[ihpannu]

@rtivital Rolled back to React 17 and Mantine 5.1.6 all same issues still persist. This app is running in production on Railway using remix/express server

[rtivital]

Well, I cannot help much, if you can reproduce an issue in mantine-remix-template and send the repo I can have a look

[ihpannu]

@rtivital attached is the link to the repo using mantine-remix-template on GitHub https://github.com/ihpannu/mantine-remix-template
and link to the live site reproducing the error https://mantine-remix-template-production.up.railway.app/

[andremonteiro95]

React 18 is not supported with Remix template, downgrade to react 17 to solve these issues.

Is supporting React 18 w/ Remix on the roadmap?

[rtivital]

In a long term – maybe, in short term – no. With current remix direction (server streaming as default) I doubt that it will worth the effort to support remix at all. As for current state – remix feels very unstable – we've already had to change ssr logic twice in the past 6 months, so I'm not planning to work on it any time soon until remix becomes at least a little more mature (in terms of css-in-js handling).

[ihpannu]

@rtivital do you recommend porting over to Next.js? we cannot afford to change the UI lib at the moment and given the mantine/remix plan it doesn't seem ideal to continue using the broken framework on the production level

[rtivital]

Well, it's up to you, I have several next.js app running in production without any issues built with Mantine.

[ihpannu]

@rtivital Thank you for advice

[alukach]

Possibly related to #2311

[rtivital]

This issue is closed for one of these reasons:

• It was fixed in 7.0
• It is no longer reproducible in 7.0
• It is no longer applicable in 7.0
• It does not have a reproduction

If you think that this issue was closed by mistake, and it is still an issue in version 7.0, please reopen it.