Fix style regression on responsive queries..

Author: koculu

frontend/theme/ecosystemStyles.ts

@@ -1,5 +1,5 @@
 import type { Style } from '@purestack/ts-css'
-import { BREAKPOINTS, mediaBelow, type ThemePalette } from '@purestack/ts-style'
+import type { ThemePalette } from '@purestack/ts-style'
 import { studioTypography } from './studioSkin'
 
 export function registerEcosystemStyles(root: Style, palette: ThemePalette) {
@@ -54,13 +54,6 @@ function registerRegorHighlightStyles(root: Style, palette: ThemePalette) {
     marginTop: '24px',
   })
   registerRegorConnectionStyles(root, palette)
-  root
-    .media(mediaBelow(BREAKPOINTS.sm))
-    .select('.studio .regor-highlight')
-    .css({
-      gap: '24px',
-      padding: '24px',
-    })
 }
 
 function registerRegorConnectionStyles(root: Style, palette: ThemePalette) {

frontend/theme/responsiveStyles.ts

@@ -488,6 +488,13 @@ export function registerResponsiveStyles(root: Style, palette: ThemePalette) {
   root.media(mediaBelow(BREAKPOINTS.sm)).select('.studio .feature-grid').css({
     gap: '13px',
   })
+  root
+    .media(mediaBelow(BREAKPOINTS.sm))
+    .select('.studio .regor-highlight')
+    .css({
+      gap: '24px',
+      padding: '24px',
+    })
   root
     .media(mediaBelow(BREAKPOINTS.sm))
     .select('.studio .feature-card, .studio .feature-small')

frontend/theme/studioStyles.test.ts

@@ -0,0 +1,24 @@
+import { BREAKPOINTS, mediaBelow, styleBuilder } from '@purestack/ts-style'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { registerStudioStyles } from './studioStyles'
+
+describe('Studio responsive styles', () => {
+  beforeEach(() => {
+    styleBuilder.reset()
+  })
+
+  it.each(['light', 'dark'] as const)(
+    'keeps mobile overrides after tablet rules in the %s theme',
+    (theme) => {
+      registerStudioStyles()
+      const css = styleBuilder.get(theme).toCSS()
+      const mobile = css.indexOf(`@media(${mediaBelow(BREAKPOINTS.sm)})`)
+      const tablet = css.indexOf(`@media(${mediaBelow(BREAKPOINTS.md)})`)
+      const laptop = css.indexOf(`@media(${mediaBelow(BREAKPOINTS.lg)})`)
+
+      expect(laptop).toBeGreaterThanOrEqual(0)
+      expect(tablet).toBeGreaterThan(laptop)
+      expect(mobile).toBeGreaterThan(tablet)
+    },
+  )
+})