[CL-672] update mobile design of dialog (#14828)

---------

Co-authored-by: Vicki League <vleague@bitwarden.com>

libs/components/src/utils/responsive-utils.ts

@@ -0,0 +1,27 @@
+/**
+ * Breakpoint definitions in pixels matching Tailwind CSS default breakpoints.
+ * These values must stay in sync with tailwind.config.base.js theme.extend configuration.
+ *
+ * @see {@link https://tailwindcss.com/docs/responsive-design} for tailwind default breakpoints
+ * @see {@link /libs/components/src/stories/responsive-design.mdx} for design system usage
+ */
+export const BREAKPOINTS = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536,
+};
+
+/**
+ * Checks if the current viewport is at or larger than the specified breakpoint.
+ * @param size The breakpoint to check.
+ * @returns True if the viewport is at or larger than the breakpoint, false otherwise.
+ */
+export const isAtOrLargerThanBreakpoint = (size: keyof typeof BREAKPOINTS): boolean => {
+  if (typeof window === "undefined" || !window.matchMedia) {
+    return false;
+  }
+  const query = `(min-width: ${BREAKPOINTS[size]}px)`;
+  return window.matchMedia(query).matches;
+};