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

Bug: Inconsistent header styling across Active Downloads, Recently Completed, and Requests tabs #72

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

Related Issue: #69 (Requests tab layout alignment)

Priority: Low
Status: Open

Description

After the layout improvements in #69, the card and list styling in the Requests tab now matches the Active Downloads and Recently Completed tabs. However, the tab headers remain visually inconsistent.

Current Inconsistencies:

  • Active Downloads header uses a specific font size, weight, color, and spacing.
  • Recently Completed header uses different styling (likely smaller or different color/weight).
  • Requests header has yet another style, creating a disjointed user experience.

This makes the interface feel less polished and professional, especially when switching between tabs.

Goal

Make the header styling (title, subtitle, icon, spacing, and typography) consistent across all three tabs:

  1. Active Downloads
  2. Recently Completed
  3. Requests

Suggested Approach

  1. Identify the common header component or styles used in:

    • .downloads-header
    • .history-header
    • .requests-header

  2. Create or update a shared header style (e.g., .tab-header or .section-header) that includes:

    • Consistent font size and weight
    • Consistent text color (using CSS variables)
    • Consistent bottom margin/padding
    • Optional icon or badge alignment

  3. Apply the unified header style to all three tabs.

Impact

  • Improves overall UI consistency and professionalism.
  • Reduces visual noise when navigating between tabs.
  • Small but noticeable polish improvement for users.

Suggested Labels

  • Kind/Enhancement
  • Priority: Low
  • Area/UI
  • Good First Issue

Cross-References

  • Follow-up to #69 (Requests tab layout alignment)
  • Part of ongoing UI consistency improvements

This is a low-effort, high-visibility polish task. It would be a good candidate for a quick win in the next minor release.

# **Related Issue:** #69 (Requests tab layout alignment) **Priority:** Low **Status:** Open --- ## Description After the layout improvements in **#69**, the **card and list styling** in the Requests tab now matches the Active Downloads and Recently Completed tabs. However, the **tab headers** remain visually inconsistent. ### Current Inconsistencies: - **Active Downloads** header uses a specific font size, weight, color, and spacing. - **Recently Completed** header uses different styling (likely smaller or different color/weight). - **Requests** header has yet another style, creating a disjointed user experience. This makes the interface feel less polished and professional, especially when switching between tabs. --- ## Goal Make the **header styling** (title, subtitle, icon, spacing, and typography) **consistent** across all three tabs: 1. Active Downloads 2. Recently Completed 3. Requests --- ## Suggested Approach 1. Identify the common header component or styles used in: - `.downloads-header` - `.history-header` - `.requests-header` 2. Create or update a shared header style (e.g., `.tab-header` or `.section-header`) that includes: - Consistent font size and weight - Consistent text color (using CSS variables) - Consistent bottom margin/padding - Optional icon or badge alignment 3. Apply the unified header style to all three tabs. --- ## Impact - Improves overall UI consistency and professionalism. - Reduces visual noise when navigating between tabs. - Small but noticeable polish improvement for users. --- ## Suggested Labels - `Kind/Enhancement` - `Priority: Low` - `Area/UI` - `Good First Issue` --- ## Cross-References - Follow-up to **#69** (Requests tab layout alignment) - Part of ongoing UI consistency improvements --- **This is a low-effort, high-visibility polish task.** It would be a good candidate for a quick win in the next minor release.
Gandalf added the Kind/BugArea/Frontend
Priority
Low
4
 labels 2026-05-28 18:00:17 +01:00
Gandalf commented 2026-05-28 18:13:10 +01:00
Author
Owner
Copy Link
Copy Source

Resolved in commit b9c8c0b.

Resolved in commit b9c8c0b.
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 Area/Frontend Kind/Bug
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#72