Improve responsive layouts for course/UC/topic content

[marcelo-m7]

Motivation

• Fix mobile and small-screen rendering issues where synced Markdown content, images, tables or iframes could overflow or be clipped.
• Make course and UC detail areas more readable on narrow screens by stacking definition list terms and values.
• Ensure dynamically-loaded synced content uses the same responsive rules as regular page content.

Description

• Added responsive content styles in assets/scss/common/_custom.scss to constrain images, SVGs, videos, iframes, tables and pre blocks and enable safe overflow scrolling for tables and code blocks.
• Applied a .facodi-rich-content helper and included it alongside existing .content so synced Markdown blocks render responsively in templates.
• Updated templates layouts/course/single.html, layouts/uc/single.html and layouts/topic/single.html to add the facodi-rich-content class to synced content containers and to use col-12 col-sm-5 / col-12 col-sm-7 grid classes for definition lists to stack on small screens.
• Updated static/js/loaders.js to emit the same responsive grid classes when populating course and UC detail dl elements so client-rendered content matches the templates.

Testing

• Attempted to run the local site with hugo server -D --bind 0.0.0.0 --port 1313, but the command failed with hugo: command not found, so a local build/visual verification could not be performed in this environment.
• No automated unit or CI tests were executed as part of this change in the current run.

---

Codex Task

[monynha-online]

The preview deployment for FACODI is ready. 🟢

Open Preview | Open Build Logs

Last updated at: 2026-01-14 19:55:59 CET

[Copilot]

Pull request overview

This PR improves responsive behavior for course, UC (curricular unit), and topic pages by ensuring that synced Markdown content and definition lists adapt properly to small screens. The changes fix overflow issues with images, tables, iframes, and code blocks on mobile devices and improve layout readability on narrow screens.

Changes:

• Added responsive CSS rules for content containers that constrain media elements and enable horizontal scrolling for tables and code blocks
• Added facodi-rich-content class to synced content containers in templates to apply responsive styles
• Updated Bootstrap grid classes in definition lists from col-5/col-7 to col-12 col-sm-5/col-12 col-sm-7 to stack on mobile devices

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
assets/scss/common/_custom.scss	Added responsive content styles that constrain images, videos, iframes, tables, and code blocks within .content and .facodi-rich-content classes
layouts/course/single.html	Added facodi-rich-content class to synced content container and updated grid classes in definition list to support mobile stacking
layouts/uc/single.html	Added facodi-rich-content class to synced content container and updated grid classes in definition list to support mobile stacking
layouts/topic/single.html	Added facodi-rich-content class to synced content container
static/js/loaders.js	Updated dynamically generated definition list grid classes to match the responsive template changes

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Setting display: block on tables changes their layout behavior and may cause issues with table cell alignment and borders. Consider wrapping tables in a container div with overflow properties instead, or use display: table with overflow-x: auto on a wrapper element to preserve table semantics.

[Copilot]

The grid classes col-12 col-sm-5 / col-12 col-sm-7 will cause the definition list terms and values to stack vertically below the sm breakpoint (576px). However, the parent column has col-lg-4, which means on medium screens (768px-991px) the aside is already narrow. Consider using col-md-* breakpoints instead of col-sm-* to better align with the aside column's breakpoint, or test thoroughly on medium-sized screens where the aside is narrow but the sm breakpoint is already active.

Suggested change

	<dt class="col-12 col-sm-5">{{ i18n "course_details_institution" }}</dt>
	<dd class="col-12 col-sm-7 text-muted">—</dd>
	<dt class="col-12 col-sm-5">{{ i18n "course_details_school" }}</dt>
	<dd class="col-12 col-sm-7 text-muted">—</dd>
	<dt class="col-12 col-sm-5">{{ i18n "course_details_ects" }}</dt>
	<dd class="col-12 col-sm-7 text-muted">—</dd>
	<dt class="col-12 col-sm-5">{{ i18n "course_details_duration" }}</dt>
	<dd class="col-12 col-sm-7 text-muted">—</dd>
	<dt class="col-12 col-sm-5">{{ i18n "course_details_language" }}</dt>
	<dd class="col-12 col-sm-7 text-muted">—</dd>
	<dt class="col-12 col-md-5">{{ i18n "course_details_institution" }}</dt>
	<dd class="col-12 col-md-7 text-muted">—</dd>
	<dt class="col-12 col-md-5">{{ i18n "course_details_school" }}</dt>
	<dd class="col-12 col-md-7 text-muted">—</dd>
	<dt class="col-12 col-md-5">{{ i18n "course_details_ects" }}</dt>
	<dd class="col-12 col-md-7 text-muted">—</dd>
	<dt class="col-12 col-md-5">{{ i18n "course_details_duration" }}</dt>
	<dd class="col-12 col-md-7 text-muted">—</dd>
	<dt class="col-12 col-md-5">{{ i18n "course_details_language" }}</dt>
	<dd class="col-12 col-md-7 text-muted">—</dd>

[Copilot]

The grid classes col-12 col-sm-5 / col-12 col-sm-7 will cause the definition list terms and values to stack vertically below the sm breakpoint (576px). However, the parent column has col-xl-4, which means on large and medium screens the aside is already narrow. Consider using col-lg-* or col-md-* breakpoints instead of col-sm-* to better align with the aside column's breakpoint at xl, or test thoroughly on screens where the aside is narrow but the sm breakpoint is already active.

Suggested change

	<dt class="col-12 col-sm-5">{{ i18n "uc_details_course" }}</dt>
	<dd class="col-12 col-sm-7 text-muted">—</dd>
	<dt class="col-12 col-sm-5">{{ i18n "uc_details_ects" }}</dt>
	<dd class="col-12 col-sm-7 text-muted">—</dd>
	<dt class="col-12 col-sm-5">{{ i18n "uc_details_semester" }}</dt>
	<dd class="col-12 col-sm-7 text-muted">—</dd>
	<dt class="col-12 col-sm-5">{{ i18n "uc_details_language" }}</dt>
	<dd class="col-12 col-sm-7 text-muted">—</dd>
	<dt class="col-12 col-sm-5">{{ i18n "uc_details_prerequisites" }}</dt>
	<dd class="col-12 col-sm-7 text-muted">—</dd>
	<dt class="col-12 col-md-5">{{ i18n "uc_details_course" }}</dt>
	<dd class="col-12 col-md-7 text-muted">—</dd>
	<dt class="col-12 col-md-5">{{ i18n "uc_details_ects" }}</dt>
	<dd class="col-12 col-md-7 text-muted">—</dd>
	<dt class="col-12 col-md-5">{{ i18n "uc_details_semester" }}</dt>
	<dd class="col-12 col-md-7 text-muted">—</dd>
	<dt class="col-12 col-md-5">{{ i18n "uc_details_language" }}</dt>
	<dd class="col-12 col-md-7 text-muted">—</dd>
	<dt class="col-12 col-md-5">{{ i18n "uc_details_prerequisites" }}</dt>
	<dd class="col-12 col-md-7 text-muted">—</dd>

[marcelo-m7]

@codex open a new pull request to apply changes based on the comments in this thread

[chatgpt-codex-connector]

To use Codex here, create an environment for this repo.