Skip to content

fix: navegación anterior/siguiente compacta en mobile - #249

Open
mgaitan wants to merge 1 commit into
mainfrom
fix/mobile-nav-129
Open

fix: navegación anterior/siguiente compacta en mobile#249
mgaitan wants to merge 1 commit into
mainfrom
fix/mobile-nav-129

Conversation

@mgaitan

@mgaitan mgaitan commented May 9, 2026

Copy link
Copy Markdown
Owner

Cierra #129

En mobile, el kicker ("← Anterior" / "Siguiente →") y el título del artículo prev/next se mostraban en dos líneas separadas, quedando visualmente mal.

Cambios

src/styles/site.css

  • .article-nav-prev, .article-nav-next: agrega flex items-baseline gap-1 en mobile y sm:block para revertir a layout vertical en desktop.

templates/article.html

  • Kicker: agrega shrink-0 para que nunca se comprima.
  • Link del título: reemplaza block mt-1 por sm:block sm:mt-1 min-w-0 truncate — inline en mobile (una sola línea), block con margen en desktop; truncación para títulos largos.

Resultado

  • Mobile: kicker + título en una sola línea compacta.
  • Desktop (≥640px): dos columnas, kicker arriba y título abajo, Siguiente → alineado a la derecha. Sin cambios de diseño.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 22491eb1c5

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread templates/article.html
<span class="story-kicker shrink-0">← Anterior</span>
<a
href="{{ page.lower.permalink }}"
class="story-title-xs sm:block sm:mt-1 min-w-0 truncate"

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Limit truncation to mobile navigation only

When the previous/next title is longer than the nav column, this unconditional truncate also applies at sm and wider breakpoints, so desktop article navigation now hides most of the title with an ellipsis instead of wrapping as it did before. Since the change is for compact mobile navigation and the parent switches back to sm:block, make the truncation mobile-only or undo it at the sm breakpoint so full titles remain visible on desktop.

Useful? React with 👍 / 👎.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant