chore(new-channels): restyle attachments tab

[synoet]

No description provided.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 4861e1bc-cb6e-411d-8229-114956925232

📥 Commits

Reviewing files that changed from the base of the PR and between daab084 and 973cd93.

📒 Files selected for processing (3)

• js/app/packages/channel/Attachments/ChannelAttachmentsTab.tsx
• js/app/packages/channel/Attachments/MediaGallery.tsx
• js/app/packages/channel/Attachments/Skeletons.tsx

---

📝 Walkthrough

Summary by CodeRabbit

• Refactor
  • Unified attachment and media sections to a new shared section component for consistent layout, padding, and header styling.
  • Updated skeletons and gallery/content composition to use the new section wrapper and simplified internal spacing.
• Bug Fixes
  • Adjusted scrolling/height behavior and load-more rendering so lists and galleries size and paginate more reliably, with improved expand/collapse attributes for assistive tech.

Walkthrough

Replaced SectionHeader with a new AttachmentSection component and updated all attachments UI to use it; adjusted layout/overflow handling in ChannelAttachmentsTab; introduced stable IDs and accessibility attributes in MediaGallery; moved conditional rendering for empty states and "Load more" into the new section structure.

Changes

Cohort / File(s)	Summary
AttachmentSection component js/app/packages/channel/Attachments/SectionHeader.tsx	Renamed SectionHeader → AttachmentSection; prop signature changed to require children, add optional class and contentClass, and an action wrapper. Render structure changed to a bordered/card container with header, divider, and content area.
AttachmentSection adoption & list logic js/app/packages/channel/Attachments/AttachmentEntityList.tsx	Replaced outer flex flex-col + SectionHeader with AttachmentSection (uses label, class, contentClass); reorganized empty-state vs list rendering; scroll container gets md:h-[420px] overflow-y-auto when documents exist; "Load more" moved inside the hasDocuments() branch and gated by Show when={props.hasNextPage}.
Media gallery updates js/app/packages/channel/Attachments/MediaGallery.tsx	Switched to AttachmentSection; added stable galleryId via createUniqueId() and wired id, aria-label, data-expanded, and aria-controls; collapsed max-height calc adjusted (removed previous +12px padding); minor class changes (removed pt-3).
Layout, overflow and container sizing js/app/packages/channel/Attachments/ChannelAttachmentsTab.tsx	Inner container classes changed to flex h-full min-h-0 w-full flex-col gap-6 py-4 (was w-full py-4 flex flex-col gap-6) to constrain height and improve scroll/overflow behavior.
Skeletons updated to use AttachmentSection js/app/packages/channel/Attachments/Skeletons.tsx	Replaced SectionHeader + wrapper divs with AttachmentSection for MediaGallerySkeleton and AttachmentEntityListSkeleton; removed extra flex flex-col and inner pt-3 wrappers.

Possibly related PRs

• feat(new-channels): attachment tab in channels #2279: Prior PR that introduced/refactored the attachments UI components (SectionHeader → AttachmentSection, MediaGallery, AttachmentEntityList, ChannelAttachmentsTab, Skeletons), directly related at the code level.

🚥 Pre-merge checks | ✅ 1 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	No pull request description was provided by the author, making it impossible to assess relevance to the changeset.	Add a pull request description explaining the styling changes, rationale for introducing AttachmentSection, and any impacts on the attachments tab UI.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title follows conventional commits format with 'chore:' prefix and is under 72 characters (44 chars), accurately summarizing the styling changes to the attachments tab.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Preview: https://synoet-new-channels-attachment-7178si.preview.macro.com/app (e7cc483)

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@js/app/packages/channel/Attachments/ChannelAttachmentsTab.tsx`:
- Around line 11-12: In ChannelAttachmentsTab.tsx the outer container uses the
class string "relative flex-1 min-h-0 overflow-hidden" which prevents vertical
scrolling and can clip expanded media; change that to allow scrolling (e.g.,
replace "overflow-hidden" with "overflow-auto" or "overflow-y-auto") so the
outer div (the one with class "relative flex-1 min-h-0 overflow-hidden")
provides a vertical scroll path for oversized attachments.

In `@js/app/packages/channel/Attachments/MediaGallery.tsx`:
- Around line 39-49: The toggle button (onClick using setExpanded and reading
expanded) doesn't expose its state to assistive tech; update the button element
to include aria-expanded={expanded()} and add an aria-controls pointing to the
gallery/container element's id (create a stable id on the gallery component if
missing) so screen readers can associate the control with the content, and mark
the decorative ChevronDownIcon as aria-hidden="true" (or remove it from the
accessibility tree) to avoid redundant announcements; ensure the referenced
container (the media gallery) has the matching id and appropriate hidden/visible
attributes when expanded() changes.

In `@js/app/packages/channel/Attachments/Skeletons.tsx`:
- Around line 27-33: The skeleton media grid has duplicate top padding because
AttachmentSection already applies top padding; remove the extra pt-3 class on
the container div that wraps the ThumbnailSkeleton instances so spacing is
consistent in the skeleton state—update the div inside AttachmentSection (where
MEDIA_SKELETON_COUNT drives the For loop rendering ThumbnailSkeleton) to omit or
replace pt-3 with the appropriate class (or none) so you only rely on
AttachmentSection's padding.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: ed0f5225-ae1a-438d-b06f-ea8893ea5f02

📥 Commits

Reviewing files that changed from the base of the PR and between 60b99c8 and daab084.

📒 Files selected for processing (5)

• js/app/packages/channel/Attachments/AttachmentEntityList.tsx
• js/app/packages/channel/Attachments/ChannelAttachmentsTab.tsx
• js/app/packages/channel/Attachments/MediaGallery.tsx
• js/app/packages/channel/Attachments/SectionHeader.tsx
• js/app/packages/channel/Attachments/Skeletons.tsx