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

BUG: Request cards overflow viewport on mobile browsers #49

New Issue
Closed
opened 2026-05-24 23:18:14 +01:00 by Gandalf · 4 comments
Gandalf commented 2026-05-24 23:18:14 +01:00
Owner
Copy Link
Copy Source

Summary

Request cards on the Requests tab extend off the right-hand side of the screen on mobile browsers, causing a horizontal scroll and broken layout. The desktop view is unaffected.

Steps to Reproduce

  1. Open the app in a mobile browser (or use DevTools responsive mode at ≤ 480px width).
  2. Log in and navigate to the Requests tab.
  3. Observe cards overflowing beyond the right edge of the viewport.

Root Cause Analysis

Multiple compounding CSS issues in public/style.css:

  1. Cumulative horizontal padding — .requests-container has padding: 20px nested inside .main-tabs { padding: 0 16px }, consuming 72px+ of horizontal space that is not accounted for on narrow screens.
  2. white-space: nowrap on .request-title (line ~2276) — prevents long titles from wrapping, forcing cards to grow beyond the viewport width.
  3. flex-shrink: 0 on .request-actions (line ~2344) — the action icon area never shrinks, compounding the overflow.
  4. No mobile media query for the Requests section — unlike the Downloads and History tabs which have @media (max-width: 768px) overrides, the Requests tab has zero responsive CSS rules.

Proposed Fix

All changes confined to public/style.css:

  • Remove white-space: nowrap from .request-title (allow wrapping with overflow ellipsis via min-width: 0 on the flex parent).
  • Add min-width: 0 to .request-content to enable flex child shrinking.
  • Add a @media (max-width: 768px) block for the requests section:
    • Reduce .requests-container padding to 12px.
    • Allow .request-meta to wrap.
    • Optionally reduce or hide .request-actions on very small screens.
  • Add overflow-x: hidden to .requests-list as a safety net.
## Summary Request cards on the **Requests** tab extend off the right-hand side of the screen on mobile browsers, causing a horizontal scroll and broken layout. The desktop view is unaffected. ## Steps to Reproduce 1. Open the app in a mobile browser (or use DevTools responsive mode at ≤ 480px width). 2. Log in and navigate to the **Requests** tab. 3. Observe cards overflowing beyond the right edge of the viewport. ## Root Cause Analysis Multiple compounding CSS issues in `public/style.css`: 1. **Cumulative horizontal padding** — `.requests-container` has `padding: 20px` nested inside `.main-tabs { padding: 0 16px }`, consuming 72px+ of horizontal space that is not accounted for on narrow screens. 2. **`white-space: nowrap` on `.request-title`** (line ~2276) — prevents long titles from wrapping, forcing cards to grow beyond the viewport width. 3. **`flex-shrink: 0` on `.request-actions`** (line ~2344) — the action icon area never shrinks, compounding the overflow. 4. **No mobile media query for the Requests section** — unlike the Downloads and History tabs which have `@media (max-width: 768px)` overrides, the Requests tab has zero responsive CSS rules. ## Proposed Fix All changes confined to `public/style.css`: - Remove `white-space: nowrap` from `.request-title` (allow wrapping with overflow ellipsis via `min-width: 0` on the flex parent). - Add `min-width: 0` to `.request-content` to enable flex child shrinking. - Add a `@media (max-width: 768px)` block for the requests section: - Reduce `.requests-container` padding to `12px`. - Allow `.request-meta` to wrap. - Optionally reduce or hide `.request-actions` on very small screens. - Add `overflow-x: hidden` to `.requests-list` as a safety net.
Gandalf added the Kind/Bug
Priority
Medium
3
 labels 2026-05-24 23:18:14 +01:00
Gandalf commented 2026-05-24 23:18:31 +01:00
Author
Owner
Copy Link
Copy Source

Plan to Resolve

All changes are confined to public/style.css. No JavaScript or HTML changes are needed.

Step 1 — Fix .request-content flex shrinking

Add min-width: 0 to .request-content. Without this, a flex child will not shrink below its intrinsic content size, so long titles blow out the card width regardless of other rules.

.request-content {
  flex: 1;
  min-width: 0;  /* ← add this */
}

Step 2 — Fix .request-title text overflow

Replace white-space: nowrap with wrapping behaviour so long titles do not force horizontal expansion:

.request-title {
  /* remove: white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;
  /* On mobile this will wrap or truncate instead of overflowing */
}

Step 3 — Add mobile media query for the Requests section

Append to the existing @media (max-width: 768px) block (or add a new one) covering:

@media (max-width: 768px) {
  .requests-container {
    padding: 12px;   /* was 20px — reduces cumulative padding */
  }

  .request-card {
    gap: 8px;
  }

  .request-meta {
    gap: 4px;
  }
}

Step 4 — Safety net overflow containment

Add overflow-x: hidden to .requests-list to prevent any residual overflow propagating to the page and causing the horizontal scrollbar:

.requests-list {
  display: grid;
  gap: 12px;
  overflow-x: hidden;  /* ← add this */
}

Testing

Verify at 320px, 375px (iPhone SE/14), and 414px widths using browser DevTools responsive mode. Check all three themes (Light, Dark, Mono). Confirm no horizontal scroll on the Requests tab, and that titles truncate/wrap cleanly on small screens.

## Plan to Resolve All changes are confined to `public/style.css`. No JavaScript or HTML changes are needed. ### Step 1 — Fix `.request-content` flex shrinking Add `min-width: 0` to `.request-content`. Without this, a flex child will not shrink below its intrinsic content size, so long titles blow out the card width regardless of other rules. ```css .request-content { flex: 1; min-width: 0; /* ← add this */ } ``` ### Step 2 — Fix `.request-title` text overflow Replace `white-space: nowrap` with wrapping behaviour so long titles do not force horizontal expansion: ```css .request-title { /* remove: white-space: nowrap; */ overflow: hidden; text-overflow: ellipsis; /* On mobile this will wrap or truncate instead of overflowing */ } ``` ### Step 3 — Add mobile media query for the Requests section Append to the existing `@media (max-width: 768px)` block (or add a new one) covering: ```css @media (max-width: 768px) { .requests-container { padding: 12px; /* was 20px — reduces cumulative padding */ } .request-card { gap: 8px; } .request-meta { gap: 4px; } } ``` ### Step 4 — Safety net overflow containment Add `overflow-x: hidden` to `.requests-list` to prevent any residual overflow propagating to the page and causing the horizontal scrollbar: ```css .requests-list { display: grid; gap: 12px; overflow-x: hidden; /* ← add this */ } ``` ### Testing Verify at 320px, 375px (iPhone SE/14), and 414px widths using browser DevTools responsive mode. Check all three themes (Light, Dark, Mono). Confirm no horizontal scroll on the Requests tab, and that titles truncate/wrap cleanly on small screens.
Gandalf commented 2026-05-24 23:19:25 +01:00
Author
Owner
Copy Link
Copy Source

Resolved in commit 90837f6.

Resolved in commit 90837f6.
Gandalf commented 2026-05-24 23:46:28 +01:00
Author
Owner
Copy Link
Copy Source

Issue remains, not fixed.

Issue remains, not fixed.
Gandalf reopened this issue 2026-05-24 23:46:28 +01:00
Gandalf commented 2026-05-25 08:29:14 +01:00
Author
Owner
Copy Link
Copy Source

Resolved in commit d87ad9f1c7.

Resolved in commit d87ad9f1c78c9009f5707218d2e6d007540001eb.
Gandalf added the Area/Frontend label 2026-05-28 11:57:51 +01:00
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
Medium
3
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#49