Skip to content

feat: redesign mod detail page layout - #1002

Open
ruxwez wants to merge 1 commit into
zen-browser:mainfrom
ruxwez:main
Open

feat: redesign mod detail page layout#1002
ruxwez wants to merge 1 commit into
zen-browser:mainfrom
ruxwez:main

Conversation

@ruxwez

@ruxwez ruxwez commented Jul 2, 2026

Copy link
Copy Markdown

Description

This PR redesigns the mod detail page to address the issues reported in #806:

  • Smaller image: image max height is now constrained with max-h-80 (up to max-h-112 on larger screens) and an aspect-ratio is applied to maintain proportions, preventing images from taking up the entire viewport.
  • Install button repositioned: the install button now lives in the same column as the mod title and description, making it far more visible and accessible without needing to scroll past the image.

Changes

  • ✅ Redesigned layout to 2 columns (lg:grid-cols-[3fr_2fr]) on large screens: image on the left, info on the right.
  • ✅ Image now has a constrained max height (max-h-80/96/112) and aspect-[1.85/1] for a much more contained size.
  • ✅ Install/Uninstall buttons moved to the info column, right alongside the mod title.
  • ✅ Improved author section: badge with GitHub icon + mod version (v{version}).
  • ✅ Creation/update dates now use calendar icons (CalendarIcon, CalendarClockIcon).
  • ✅ New SVG icon components: CalendarIcon.astro and CalendarClockIcon.astro.

Before / After

Before

image

After

image

How to test

  1. Navigate to any mod detail page, e.g.: /mods/906c6915-5677-48ff-9bfc-096a02a72379/
  2. Verify the image is smaller and no longer takes up the full width.
  3. Verify the "Install" button appears next to the title and is easily visible.
  4. Check that the 2-column layout kicks in at lg breakpoint (≥1024px).
  5. Verify the calendar icons and author/version badge render correctly.

Related issues

Closes #806

- Add CalendarIcon and CalendarClockIcon components
- Redesign mod page with 2-column grid on large screens
- Style author section with GitHub icon and version badge
- Replace plain date text with icon-based display
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.

Feature Request: Improve Mod Page Image/Install Button Layout

1 participant