Fix layout issues and align with Discourse core CSS conventions

[jrgong420]

Summary

This PR fixes several layout issues and aligns the theme component with Discourse core CSS variable naming conventions and patterns.

Changes Made

1. Discourse Core CSS Variable Alignment

• ✅ Adopted Discourse core CSS variables:
  • --category-header-logo-size (maps from size_logo setting)
  • --category-description-width (760px, Discourse default)
  • --category-header-border (uses --content-border-color)
• ✅ Replaced hardcoded spacing with Discourse tokens:
  • --space-2, --space-4, --space-6
• ✅ Implemented core's aspect-image pattern for responsive logo sizing
• ✅ Removed non-standard --category-bg-image variable

2. Layout Fixes

• ✅ Fixed desktop layout: Description now appears below title (not beside it)
• ✅ Fixed stacking issue: When "Inline read more" is disabled, elements no longer stack vertically
  • Introduced .category-title-text-wrapper to group title, description, and read-more link
  • Simplified grid from 2×2 to 2×1 with text wrapper handling vertical stacking
• ✅ Moved category-about-url inside text wrapper for consistent layout

3. Mobile Improvements

• ✅ Changed force_mobile_alignment default to false (maintains left-right layout on mobile by default)
• ✅ Added responsive mobile logo sizing with clamp(48px, 18vw, 96px)
• ✅ Updated mobile stacked mode to work with new wrapper structure

Layout Structure

Before:

.category-title-contents (flex with wrap)
  ├── .category-logo
  ├── .category-title-name
  └── .category-title-description

.category-about-url (outside, causes stacking)

After:

.category-title-contents (grid: 2 columns)
  ├── .category-logo (column 1)
  └── .category-title-text-wrapper (column 2, flex column)
      ├── .category-title-name
      ├── .category-title-description
      └── .category-about-url (when not inline)

Visual Result

Desktop (logo left):

┌─────────────────────────────────────┐
│ [Logo]  Category Title              │
│         Category Description...     │
│         Read more link              │
└─────────────────────────────────────┘

Benefits

1. Standards Compliance: Uses Discourse core CSS variables and patterns
2. Robust Layout: Grid structure is stable regardless of settings
3. Better Maintainability: Cleaner CSS with semantic grouping
4. Mobile-Friendly: Responsive logo sizing and optional stacked mode
5. Future-Proof: Aligned with Discourse theming best practices

Files Changed

• common/common.scss - Core styling updates
• mobile/mobile.scss - Mobile responsive behavior
• settings.yml - Default setting change for force_mobile_alignment
• javascripts/discourse/components/category-header.gjs - Template structure with wrapper

Testing

Please test:

• ✅ Desktop layout with logo left/right/top
• ✅ Mobile layout (both default and stacked mode)
• ✅ "Inline read more" enabled/disabled
• ✅ Different logo sizes (standard/small/original)
• ✅ Categories with/without logos
• ✅ Long descriptions and titles

---

Pull Request opened by Augment Code with guidance from the PR author