FKB Pro - Social theme

Customization Theme
523

Hey Don,

Just a quick heads-up about a z-index glitch with the category dropdown.

It happens specifically at transition viewport widths—right above the mobile breakpoint (roughly in the 640px to 767px range). When you open the category dropdown there, the menu gets covered by the topic cards below it instead of floating on top.

Seems like the navigation container just needs a small z-index bump for that specific media query to fix the stacking context.

Thanks

2026-10-15 12_45_11-Theme Creator and 3 more pages - Profile 1 - Microsoft​ Edge
2026-10-15 12_45_11-Theme Creator and 3 more pages - Profile 1 - Microsoft​ Edge1043×1150 95.9 KB

1 Like
524

Hi @Don, since the very latest update, the right block is narrower than before. I’m not sure if this is a theme issue or a component issue :sweat_smile:

Am I the only one?

Before the update

image
image720×804 150 KB

After the update

image
image767×796 152 KB

525

Hello :waving_hand: Yeah, the new upcoming change called Enable main outlet grid layout change changes probably changes the sidebar width. Disable this for now I’ll check this later if we can do something with it.

1 Like
526

Hi @Don,

Thanks as always for your great work on the FKB Pro theme!

I came across a minor CSS bug on mobile viewports (width < 40rem / < 640px) where Markdown percentage-scaled images (e.g., ![image|420x420, 40%](upload://...)) fail to scale down and instead stretch to 100% width. I have tested this with all theme components and custom CSS disabled (running only pure FKB Pro), and confirmed the issue persists.

The Cause

When Discourse parses a scaled image that triggers a lightbox wrapper, it outputs the scaled dimensions as HTML attributes (Presentational Hints with 0 specificity):

<a class="lightbox" ...>
  <img src="..." width="168" height="168" style="aspect-ratio: 168 / 168;">
</a>

However, on viewports under 40rem, FKB Pro applies the following rule:

@media (width < 40rem) {
  .post-stream .topic-post article .cooked .lightbox img {
    width: 100%;
  }
}

Because width: 100% overrides the HTML width="168" attribute, any smaller portrait or avatar images wrapped in .lightbox are forced to stretch to the full width of the post/blockquote container on mobile. (Images that don’t trigger the .lightbox wrapper scale down normally.)

Furthermore, because HTML width attributes have 0 specificity, users cannot easily override this in custom CSS using width: auto or width: revert, as the browser will discard the HTML width="168" attribute and fall back to the image’s intrinsic size (420px).

Suggested Fix

Could you consider removing width: 100% from .cooked .lightbox img under 40rem (since Discourse core already handles responsive bounding via max-width: 100%; height: auto;), or scoping it so it doesn’t override images that have explicit width attributes set via Markdown scaling?

Thanks for looking into this!