ENHANCE: Align requests card layout and container styling with downloads and history tabs #69

Closed
opened 2026-05-28 17:29:30 +01:00 by Gandalf · 1 comment
Owner

Visual Discrepancy

The Requests tab has visual inconsistencies compared to the Active Downloads and Recently Completed tabs:

  1. Container is transparent instead of using a card-like themed background (background: var(--surface); box-shadow: 0 2px 4px var(--shadow); border-radius: 8px; padding: 16px 20px;).
  2. List uses display: grid; gap: 12px instead of standard display: flex; flex-direction: column; gap: 8px.
  3. Cards use taller padding (16px), centered content (align-items: center), lack colored indicator borders, and use a small centered emoji icon instead of a poster-dimensioned left anchor card.

Scoped Fix Action Plan (Requests Tab Only):

  1. Upgrade .requests-container styling to match .downloads-container.
  2. Convert .requests-list flow to flexbox column matching downloads.
  3. Update .request-card padding (10px 14px), border-radius (6px), and top-alignment (align-items: flex-start).
  4. Style .request-type-icon with 48px width and 68px height as a cover-art placeholder.
  5. Add left borders for tv and movie media types by injecting tv or movie class names into the card element.
### Visual Discrepancy The Requests tab has visual inconsistencies compared to the Active Downloads and Recently Completed tabs: 1. Container is transparent instead of using a card-like themed background (`background: var(--surface); box-shadow: 0 2px 4px var(--shadow); border-radius: 8px; padding: 16px 20px;`). 2. List uses `display: grid; gap: 12px` instead of standard `display: flex; flex-direction: column; gap: 8px`. 3. Cards use taller padding (`16px`), centered content (`align-items: center`), lack colored indicator borders, and use a small centered emoji icon instead of a poster-dimensioned left anchor card. ### Scoped Fix Action Plan (Requests Tab Only): 1. Upgrade `.requests-container` styling to match `.downloads-container`. 2. Convert `.requests-list` flow to `flexbox` column matching downloads. 3. Update `.request-card` padding (`10px 14px`), border-radius (`6px`), and top-alignment (`align-items: flex-start`). 4. Style `.request-type-icon` with `48px` width and `68px` height as a cover-art placeholder. 5. Add left borders for `tv` and `movie` media types by injecting `tv` or `movie` class names into the card element.
Gandalf added the Kind/Enhancement
Priority
Low
4
labels 2026-05-28 17:29:30 +01:00
Author
Owner

Resolved in commit af33e4e.

Resolved in commit af33e4e.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Gandalf/sofarr#69