To customize the breakpoint for the AutoComplete detached mode, you will need to either override the CSS variable's in your own .scss file or alternatively copy the Autocomplete classic theme:
The classic theme is designed as a neutral and clean starter. You can use it as a base and customize it with CSS variables. You can see the full theme in the repo below:
- https://github.com/algolia/autocomplete/blob/next/packages/autocomplete-theme-classic/src/theme.scss
This is an example StackBlitz in which we override the values for the following variable to be 800px instead of 680px. This changes the width at which detached mode is triggered.
--aa-detached-media-query: (max-width: 800px);
--aa-detached-modal-media-query: (min-width: 800px);
--aa-detached-modal-max-width: 800px;