Merge pull request #1209 from PR0M3TH3AN/codex/add-and-use-breakpoint-token-and-helpers

Add --breakpoint-lg token and helpers for media-query usage

css/tokens.css

@@ -200,6 +200,8 @@
   --space-sidebar-subnav-padding-block: 0.55rem;
   --space-sidebar-nav-translate: 0.35rem;
   --grid-card-min-width: 20rem;
+  /* Breakpoints (sync with Tailwind screen settings) */
+  --breakpoint-lg: 64rem;
   --popover-backdrop-blur: 12px;
   --overlay-panel-radius: var(--radius-lg);
   --overlay-panel-shadow: var(--shadow-lg);

js/designSystem/metrics.js

@@ -5,6 +5,7 @@ import {
 } from "./dynamicStyles.js";
 
 const TOKEN_FALLBACKS = {
+  "--breakpoint-lg": "64rem",
   "--grid-card-min-width": "20rem",
   "--popover-backdrop-blur": "12px",
   "--toast-translate": "0.75rem",
@@ -180,6 +181,14 @@ export function getGridCardMinWidthPx(options = {}) {
   return readDesignTokenAsPixels("--grid-card-min-width", options);
 }
 
+export function getBreakpointLg(options = {}) {
+  return readDesignToken("--breakpoint-lg", options);
+}
+
+export function getBreakpointLgPx(options = {}) {
+  return readDesignTokenAsPixels("--breakpoint-lg", options);
+}
+
 export function getPopoverBackdropBlur(options = {}) {
   return readDesignToken("--popover-backdrop-blur", options);
 }
@@ -244,4 +253,3 @@ export const designMetrics = {
 };
 
 export default designMetrics;
-

js/ui/components/VideoModal.js

@@ -35,6 +35,7 @@ import {
   formatShortNpub as defaultFormatShortNpub,
 } from "../../utils/formatters.js";
 import { sanitizeProfileMediaUrl } from "../../utils/profileMedia.js";
+import { getBreakpointLg } from "../../designSystem/metrics.js";
 
 const HEX64_REGEX = /^[0-9a-f]{64}$/i;
 const SIMILAR_CONTENT_LIMIT = 10;
@@ -5086,8 +5087,9 @@ export class VideoModal {
       return true;
     }
 
+    const breakpointLg = getBreakpointLg({ documentRef: this.document });
     try {
-      return win.matchMedia("(min-width: 1024px)").matches;
+      return win.matchMedia(`(min-width: ${breakpointLg})`).matches;
     } catch (error) {
       this.log(
         "[VideoModal] Failed to evaluate similar content media query",
@@ -5105,7 +5107,8 @@ export class VideoModal {
       return;
     }
 
-    const query = win.matchMedia("(min-width: 1024px)");
+    const breakpointLg = getBreakpointLg({ documentRef: this.document });
+    const query = win.matchMedia(`(min-width: ${breakpointLg})`);
     if (this.similarContentMediaQuery === query) {
       this.refreshSimilarContentVisibility();
       return;

js/ui/profileModalController.js

@@ -13,6 +13,7 @@ import {
   DEFAULT_TRUSTED_SPAM_HIDE_THRESHOLD,
   RUNTIME_FLAGS,
 } from "../constants.js";
+import { getBreakpointLg } from "../designSystem/metrics.js";
 import { getProviderMetadata } from "../services/authProviders/index.js";
 import { devLogger, userLogger } from "../utils/logger.js";
 
@@ -3683,7 +3684,8 @@ export class ProfileModalController {
     }
 
     try {
-      const query = window.matchMedia("(min-width: 1024px)");
+      const breakpointLg = getBreakpointLg();
+      const query = window.matchMedia(`(min-width: ${breakpointLg})`);
       const handler = (event) => {
         const matches =
           typeof event?.matches === "boolean" ? event.matches : query.matches;