Gandalf/sofarr
Public Access
0
0
Fork 0
Code Issues 1 Pull Requests Actions 1 Packages Projects Releases 59 Wiki Activity

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

New Issue
Closed
opened 2026-05-28 17:29:30 +01:00 by Gandalf · 1 comment
Gandalf commented 2026-05-28 17:29:30 +01:00
Owner
Copy Link
Copy Source

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
Gandalf commented 2026-05-28 17:42:14 +01:00
Author
Owner
Copy Link
Copy Source

Resolved in commit af33e4e.

Resolved in commit af33e4e.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Area/Docker
Docker image and container packaging
 Area/Download Clients
Download client integrations
 Area/Frontend
Client-side UI and build tooling
 Area/History
History and completed downloads views
 Area/Logging
Log streaming, file handling, and debug infrastructure
 Area/Matching
Matching and correlation logic
 Area/Proxy
Upstream service proxy routes
 Area/SSE
Server-Sent Events and real-time streaming
 Area/Webhooks
Webhook processing and reliability
 Compat/Breaking
Breaking change that won't be backward compatible
 Compat/Non-Breaking
Non-breaking compatibility change
 Kind/Bug
Something is not working
 Kind/Documentation
Documentation changes
 Kind/Enhancement
Improve existing functionality
 Kind/Feature
New functionality
 Kind/Security
This is security issue
 Kind/Testing
Issue or pull request related to testing
Priority
Critical
1
The priority is critical
Priority
High
2
The priority is high
Priority
Low
4
The priority is low
Priority
Medium
3
The priority is medium
Reviewed
Confirmed
1
Issue has been confirmed
Reviewed
Duplicate
2
This issue or pull request already exists
Reviewed
Invalid
3
Invalid issue
Reviewed
Won't Fix
3
This issue won't be fixed
Status
Abandoned
3
Somebody has started to work on this but abandoned work
Status
Blocked
1
Something is blocking this issue or pull request
Status
Need More Info
2
Feedback is required to reproduce issue or to continue work
No labels Kind/Enhancement
Priority
Low
4
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
Gandalf
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Gandalf/sofarr#69