fix(cdk/layout): decrease breakpoint upper bounds (#20866)

The previous breakpoint upper bounds use `.99` for the
fractional components of upper bounds. However, this seems
to cause browser to round up to the next pixel, creating an overlap
for these values. Changing to `.98` fixes this.

Fixes #20850

(cherry picked from commit 16576e4)

Author: tomrlq

src/cdk/layout/breakpoints.ts

@@ -8,24 +8,24 @@
 // PascalCase is being used as Breakpoints is used like an enum.
 // tslint:disable-next-line:variable-name
 export const Breakpoints = {
-  XSmall: '(max-width: 599.99px)',
-  Small: '(min-width: 600px) and (max-width: 959.99px)',
-  Medium: '(min-width: 960px) and (max-width: 1279.99px)',
-  Large: '(min-width: 1280px) and (max-width: 1919.99px)',
+  XSmall: '(max-width: 599.98px)',
+  Small: '(min-width: 600px) and (max-width: 959.98px)',
+  Medium: '(min-width: 960px) and (max-width: 1279.98px)',
+  Large: '(min-width: 1280px) and (max-width: 1919.98px)',
   XLarge: '(min-width: 1920px)',
 
-  Handset: '(max-width: 599.99px) and (orientation: portrait), ' +
-           '(max-width: 959.99px) and (orientation: landscape)',
-  Tablet: '(min-width: 600px) and (max-width: 839.99px) and (orientation: portrait), ' +
-          '(min-width: 960px) and (max-width: 1279.99px) and (orientation: landscape)',
+  Handset: '(max-width: 599.98px) and (orientation: portrait), ' +
+           '(max-width: 959.98px) and (orientation: landscape)',
+  Tablet: '(min-width: 600px) and (max-width: 839.98px) and (orientation: portrait), ' +
+          '(min-width: 960px) and (max-width: 1279.98px) and (orientation: landscape)',
   Web: '(min-width: 840px) and (orientation: portrait), ' +
        '(min-width: 1280px) and (orientation: landscape)',
 
-  HandsetPortrait: '(max-width: 599.99px) and (orientation: portrait)',
-  TabletPortrait: '(min-width: 600px) and (max-width: 839.99px) and (orientation: portrait)',
+  HandsetPortrait: '(max-width: 599.98px) and (orientation: portrait)',
+  TabletPortrait: '(min-width: 600px) and (max-width: 839.98px) and (orientation: portrait)',
   WebPortrait: '(min-width: 840px) and (orientation: portrait)',
 
-  HandsetLandscape: '(max-width: 959.99px) and (orientation: landscape)',
-  TabletLandscape: '(min-width: 960px) and (max-width: 1279.99px) and (orientation: landscape)',
+  HandsetLandscape: '(max-width: 959.98px) and (orientation: landscape)',
+  TabletLandscape: '(min-width: 960px) and (max-width: 1279.98px) and (orientation: landscape)',
   WebLandscape: '(min-width: 1280px) and (orientation: landscape)',
 };