fix(layoutSider): dimensionMap for max-width media query

According to visibility problem (on viewport breakpoints) with Sider menu in our App
And according to Bootstrap responsive breakpoints https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints

We should use different values for `min-width` and `max-width`. For example, if we construct query with `min-width: 768px` then we MUST use `max-width: 767.98px` for proper breakpoint determination otherwise they conflict with each other when have similar values.

components/layout/Sider.tsx

@@ -23,13 +23,13 @@ if (typeof window !== 'undefined') {
   window.matchMedia = window.matchMedia || matchMediaPolyfill;
 }
 
-const dimensionMap = {
-  xs: '480px',
-  sm: '576px',
-  md: '768px',
-  lg: '992px',
-  xl: '1200px',
-  xxl: '1600px',
+const dimensionMaxMap = {
+  xs: '479.98px',
+  sm: '575.98px',
+  md: '767.98px',
+  lg: '991.98px',
+  xl: '1199.98px',
+  xxl: '1599.98px',
 };
 
 export interface SiderContextProps {
@@ -105,8 +105,8 @@ class InternalSider extends React.Component<InternalSideProps, SiderState> {
     if (typeof window !== 'undefined') {
       matchMedia = window.matchMedia;
     }
-    if (matchMedia && props.breakpoint && props.breakpoint in dimensionMap) {
-      this.mql = matchMedia(`(max-width: ${dimensionMap[props.breakpoint]})`);
+    if (matchMedia && props.breakpoint && props.breakpoint in dimensionMaxMap) {
+      this.mql = matchMedia(`(max-width: ${dimensionMaxMap[props.breakpoint]})`);
     }
     let collapsed;
     if ('collapsed' in props) {