Skip to content

UI: Align Albums detail page header with AI Tagging collection layout #1455

Description

@coderabbitai

Summary

Update the Albums detail-page layout so that it is consistent with the AI Tagging face-collection detail page.

This request was made by @rohan-pandeyy in the discussion for PR #610. This issue is intentionally unassigned.

Required changes

  • Replace the current Albums detail-page back control with the outlined Back to Albums button style used by the AI Tagging face-collection detail page.
  • Position the back button at the top left of the page content.
  • Position the album name and description below the back button.
  • Align Select Images and Add Images to the top-right area, on the same row as the back button.
  • Move the image count to the right-side action area. The exact position can follow the implementation's responsive layout requirements.
  • Keep the layout usable on mobile and desktop screens.

Affected area

  • Albums detail page UI, likely frontend/src/pages/Album/AlbumDetail.tsx and its related styles/components.

Acceptance criteria

  • The Albums detail page uses the same visual back-button pattern as the AI Tagging face-collection detail page.
  • The header structure matches the annotated reference: back button first, album title and description below it, actions aligned on the right.
  • The image count is no longer shown as a separate left-side line above the gallery.
  • Existing album actions continue to work.
  • The layout remains responsive.

References

Current Albums detail page

Image

Existing AI Tagging reference

Image

Annotated target layout

Image

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    Status
    Todo

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions