fix(css): eliminate double @media in blog visual float layout by wesleyboar · Pull Request #1157 · TACC/Core-CMS

wesleyboar · 2026-05-20T03:24:09Z

Overview

A mixin calling another mixin that already contained @media (--medium-and-above) produced duplicate nested at-rules in compiled CSS.

Changes

fixed double @media in compiled output for .blog-visual float layout
restructured .blog-visual rule block for consistent nesting convention

Testing

make start
Open a blog post with a banner image and one with a portrait image.
At ≥992 px, banner centers, portrait floats right.
At <992 px, both center.
Confirm no duplicate @media (min-width: 992px) nesting in compiled CSS.

UI

…

news-article-page__media--layout-float delegated to news-article-page__media--offset-right, which already guards offset-content--offset-right behind @media (--medium-and-above). Wrapping the mixin call in a second @media (--medium-and-above) produced nested duplicate at-rules in compiled output. Inline the offset-content mixins directly inside layout-float with a single guard, and restructure the blog-visual rule block to nest @media inside selectors (not selectors inside @media). Co-authored-by: Cursor <cursoragent@cursor.com>

qodo-code-review · 2026-05-20T03:24:22Z

Review Summary by Qodo

Eliminate double @media in blog visual float layout

🐞 Bug fix

Walkthroughs

Description

• Eliminate duplicate nested @media queries in blog visual layout
• Inline offset-content mixins directly in layout-float mixin
• Restructure selectors to nest @media inside instead of outside
• Prevent compiled CSS from generating redundant media query nesting

Diagram

flowchart LR
  A["news-article-page__media--layout-float<br/>delegated to offset-right"] -->|"Remove delegation"| B["Inline offset-content<br/>mixins directly"]
  B -->|"Single @media guard"| C["Restructured CSS<br/>output"]
  D["Selectors inside @media"] -->|"Refactor to"| E["@media inside<br/>selectors"]
  C -->|"Result"| F["No duplicate<br/>@media nesting"]

File Changes

1. taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css 🐞 Bug fix +0/-0

Restructure media queries inside selectors

• Restructured .blog-visual rule block to nest @media queries inside selectors
• Moved @media (--medium-and-below) guard inside the & selector
• Moved @media (--medium-and-above) guard inside the &:has([data-width="0"]) selector
• Removed nested @media wrapping from &:not(:has([data-width="0"])) selector

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css

2. taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css 🐞 Bug fix +7/-1

Inline offset-content mixins with single media guard

• Refactored news-article-page__media--layout-float mixin to inline offset-content mixins directly
• Removed delegation to news-article-page__media--offset-right mixin
• Added single @media (--medium-and-above) guard wrapping all offset-content mixins
• Included offset-content--offset-right and figcaption mixin within the media query

taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css

3. taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css Additional files +7/-7

...

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css

ⓘ You are approaching your monthly quota for Qodo. Upgrade your plan

qodo-code-review · 2026-05-20T03:24:24Z

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0)

1. Unscoped figcaption padding 🐞 Bug ≡ Correctness

Description

.blog-visual:not(:has([data-width="0"])) now always includes
news-article-page__media--layout-float, and that mixin emits
news-article-page__media--offset__figcaption (padding-right: 125px) outside its `@media
(--medium-and-above)` block. This can apply the caption right-padding on narrow viewports where the
media is intended to be centered, causing visible misalignment/layout distortion.

Code

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css[R95-97]
+  &:not(:has([data-width="0"])) {
+    @mixin news-article-page__media--layout-float;
  }

Evidence

The .blog-visual:not(:has([data-width="0"])) selector now mixes in
news-article-page__media--layout-float without any surrounding @media, while
news-article-page__media--layout-float includes news-article-page__media--offset__figcaption
outside its internal @media (--medium-and-above); news-article-page__media--offset__figcaption
adds padding-right: 125px. This combination necessarily emits the padding rule unconditionally
with respect to viewport width.

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css[82-98]
taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css[386-427]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`news-article-page__media--layout-float` is now invoked outside any `@media` in `django.cms.blog.app.page.css`, but it emits the figcaption offset styles outside its internal `@media (--medium-and-above)` guard. This changes the compiled CSS so the `padding-right: 125px` rule can apply at all viewport widths for `.blog-visual:not(:has([data-width="0"]))`, even though the float/offset layout is only meant for `--medium-and-above`.

### Issue Context
Previously, `.blog-visual:not(:has([data-width="0"]))` was under an outer `@media (--medium-and-above)` wrapper, so the figcaption padding from the delegated mixin was also effectively `--medium-and-above` scoped. After the refactor, that outer wrapper is gone, and the figcaption mixin is the only unguarded output.

### Fix Focus Areas
- taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css[386-427]
- taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css[85-97]

### Suggested change
Move `@mixin news-article-page__media--offset__figcaption;` inside the same `@media (--medium-and-above)` block within `@define-mixin news-article-page__media--layout-float`, so caption padding is applied only when the float/offset layout is active (and you avoid reintroducing nested duplicate media rules).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

ⓘ You are approaching your monthly quota for Qodo. Upgrade your plan

wesleyboar

Notes for human reviewers.

wesleyboar · 2026-05-20T03:30:59Z

-  @media (--medium-and-below) {
-    & {
+  & {
+    @media (--medium-and-below) {
      @mixin news-article-page__media--layout-center;
    }
  }
-  @media (--medium-and-above) {
-    &:has([data-width="0"]) {
+  &:has([data-width="0"]) {
+    @media (--medium-and-above) {


These first two changes are just cosmetic no-op refactor solely to mirror syntax of the functional change below.

wesleyboar · 2026-05-20T03:32:24Z

-    &:not(:has([data-width="0"])) {
-      @mixin news-article-page__media--layout-float;
-    }
+  }
+  &:not(:has([data-width="0"])) {
+    @mixin news-article-page__media--layout-float;


This is a functional change. I take mixin out of the @media (--medium-and-above) { in the code above where it had been a parent ruleset.

That @media (--medium-and-above) { will be inserted isntead into the news-article-page__media--layout-float mixin in the other file I changed.

wesleyboar · 2026-05-20T03:35:44Z

 @define-mixin news-article-page__media--layout-float {
-  @mixin news-article-page__media--offset-right;
+  @media (--medium-and-above) {
+    @mixin offset-content;
+    @mixin offset-content--float-right;
+    @mixin offset-content--terminate-offset-right;
+    @mixin offset-content--offset-right;
+  }
+  @mixin news-article-page__media--offset__figcaption;
 }


Instead of (A) having a @media both outside the rule that uses this mixin and inside the mixin that this mixin includes, I now (B) have the @media only directly inside this mixin.

This prevents nested the @media.

Co-authored-by: Cursor <cursoragent@cursor.com>

qodo-code-review · 2026-05-20T03:47:01Z

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

## Overview `news-article-page__media--offset__figcaption` applied `padding-right: 125px` to `.figure .figure-caption` but: - its selector can never match in practice - if matched, causes unwanted style[^1] [^1]: Seems to be cruft from older version of Texascale. I reproduced the style in Core-CMS, where it looks like a bug. New and old Texascale don't have markup that will be affected by this change. ## Related - noticed during #1157 ## Changes - **deleted** `news-article-page__media--offset__figcaption` mixin ## Testing No visible change expected — the selector never matched reachable markup. ## UI N/A ## Notes The selector `&.figure .figure-caption` requires an element to simultaneously carry a CMS align class (`.align-right` / `.align-left`) and Bootstrap's `.figure` class, with a `.figure-caption` descendant. This combination cannot be produced through the Text plugin, which is how article body content is authored. Older Texascale editions that did use Bootstrap figures predated this code. Newer websites work exclusively inside the Text plugin, which cannot produce Bootstrap figure markup. The original `???:` comment in the mixin already signaled uncertainty about whether it ever applied. And if the code appeared, it would have unwanted padding because of this code (I tested manually). Made with [Cursor](https://cursor.com). Co-authored-by: Cursor <cursoragent@cursor.com>

qodo-code-review Bot reviewed May 20, 2026

View reviewed changes

Comment thread taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css

wesleyboar commented May 20, 2026

View reviewed changes

fix(css): scope figcaption padding to medium-and-above in layout-float

859f78d

Co-authored-by: Cursor <cursoragent@cursor.com>

wesleyboar merged commit e7b2354 into main May 20, 2026

wesleyboar deleted the fix/blog-visual-double-media-query branch May 20, 2026 04:16

wesleyboar mentioned this pull request May 20, 2026

fix(css): remove dead figcaption offset style #1158

Merged

Navigation Menu

Uh oh!

fix(css): eliminate double @media in blog visual float layout - #1157

fix(css): eliminate double @media in blog visual float layout#1157
wesleyboar merged 2 commits into
mainfrom
fix/blog-visual-double-media-query

wesleyboar commented May 20, 2026 •

edited

Loading

Uh oh!

qodo-code-review Bot commented May 20, 2026

Uh oh!

qodo-code-review Bot commented May 20, 2026 •

edited

Loading

Uh oh!

Uh oh!

wesleyboar left a comment

Uh oh!

wesleyboar May 20, 2026

Uh oh!

wesleyboar May 20, 2026

Uh oh!

wesleyboar May 20, 2026

Uh oh!

qodo-code-review Bot commented May 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

wesleyboar commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Related

Changes

Testing

UI

Uh oh!

qodo-code-review Bot commented May 20, 2026

Review Summary by Qodo

Walkthroughs

File Changes

Uh oh!

qodo-code-review Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review by Qodo

Uh oh!

Uh oh!

wesleyboar left a comment

Choose a reason for hiding this comment

Uh oh!

wesleyboar May 20, 2026

Choose a reason for hiding this comment

Uh oh!

wesleyboar May 20, 2026

Choose a reason for hiding this comment

Uh oh!

wesleyboar May 20, 2026

Choose a reason for hiding this comment

Uh oh!

qodo-code-review Bot commented May 20, 2026

Qodo reviews are paused for this user.

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

wesleyboar commented May 20, 2026 •

edited

Loading

qodo-code-review Bot commented May 20, 2026 •

edited

Loading