Override javascript method from web

Question

I am editing a website in odoo 16 and I have issue with media queries.

Odoo by js dynamically adds css when the size of the screen changes. That means that if I add css style on a custom module is not going to override the dynamic css (I did it).

I searched the js function that is responsible for add the media queries and I found it in the backend assets:

const MEDIAS_BREAKPOINTS=__exports.MEDIAS_BREAKPOINTS=[{maxWidth:474},{minWidth:475,maxWidth:575},{minWidth:576,maxWidth:767},{minWidth:768,maxWidth:991},{minWidth:992,maxWidth:1199},{minWidth:1200,maxWidth:1533},{minWidth:1534},];__exports.getMediaQueryLists=getMediaQueryLists;function getMediaQueryLists(){return MEDIAS_BREAKPOINTS.map(({minWidth,maxWidth})=>{if(!maxWidth){return window.matchMedia(`(min-width: ${minWidth}px)`);}
if(!minWidth){return window.matchMedia(`(max-width: ${maxWidth}px)`);}
return window.matchMedia(`(min-width: ${minWidth}px) and (max-width: ${maxWidth}px)`);});}

Odoo have a variable called MEDIAS_BREAKPOINTS with all the sizes and getMediaQueryLists function that create the media queries.

I want to remove the transition of { minWidth: 768, maxWidth: 991 } size because I don't like it.

To do that I tried to override the MEDIA_BREAKPOINTS variable and the getMediaQueryLists function but Is not working fine, does anybody know how to achieve my goal? Every help is very welcome. Here is my code:

odoo.define('visitante_mailing', function(require){
    ​"use strict";
    ​var config=require('web.config');
    ​config.MEDIAS_BREAKPOINTS=[
    ​   ​{maxWidth:474},
    ​   ​{minWidth:475, maxWidth:575},
    ​   ​{minWidth:576, maxWidth:991},
    ​   ​{minWidth:992, maxWidth:1199},
    ​   ​{minWidth:1200, maxWidth:1533},
    ​   ​{minWidth:1534},
    ​];
    ​config.getMediaQueryLists = function(){
    ​   ​return config.MEDIAS_BREAKPOINTS.map(({minWidth,maxWidth})=>{
    ​   ​   ​if(!maxWidth){
    ​   ​   ​   ​return window.matchMedia(`(min-width: ${minWidth}px`);
    ​   ​   ​if(!minWidth){
    ​   ​   ​   ​​return window.matchMedia(`(max-width: ${maxWidth}px`);
    ​   ​   ​}
    ​   ​   ​​return window.matchMedia(`(min-width: ${minWidth}px and (max-width: ${maxWidth}px)`);
    ​   ​}).filter((mediaQuery) => mediaQuery !== undefined
    ​};
});

Answer 1

MEDIAS_BREAKPOINTS are defined in ui_service.js in web module. Here is the link to that line. You need to inherit that js and override that variable. web.config does not have that variable set.