fix(web): move instance status bar back to bottom of screen

[OlziYT]

Fixes #2023

Description

This PR addresses an issue where the global instance status bar was moved inside the torrent table area during the SSE migration. Because of this, when a user selects a torrent and the torrent-details ResizablePanel opens, the status bar is pushed upwards, sitting uncomfortably between the list and the details panel instead of staying fixed at the bottom.

Technical Solution

Instead of heavily refactoring the TorrentTableOptimized component to lift dozens of state variables (SSE streams, selected counts, speeds, view modes) up to a parent component or into a massive React Context, this PR uses a React Portal.

• Added a fixed #qui-status-bar-container div at the very bottom of the Torrents.tsx layout (outside the ResizablePanelGroup).
• The TorrentTableOptimized component still handles all the complex logic, but it now renders the status bar into the bottom portal.
• This ensures the status bar remains visually locked to the absolute bottom of the screen regardless of the details panel being open, while keeping the component logic tightly encapsulated and performant (no flickering, no unnecessary re-renders).

Visual Changes

• The status bar now stays strictly at the bottom of the screen.

How to Test

1. Select any instance with torrents.
2. Note the status bar at the bottom.
3. Click on a torrent to open the details panel.
4. The status bar should remain fixed at the very bottom of the screen, below the details panel.

Summary by CodeRabbit

• Refactor
  • Improved status bar rendering and placement for more consistent behavior across desktop and mobile, including a reliable fallback when the dedicated container isn’t present.
  • Fixed desktop panel sizing to ensure proper resizing and smoother scrolling/layout behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 36b947e5-08cb-4870-8e9c-5230ebef9245

📥 Commits

Reviewing files that changed from the base of the PR and between dc918ec and 3fcfbeb.

📒 Files selected for processing (2)

• web/src/components/torrents/TorrentTableOptimized.tsx
• web/src/pages/Torrents.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• web/src/components/torrents/TorrentTableOptimized.tsx

---

Walkthrough

Adds a DOM target and layout tweaks in Torrents.tsx, and updates TorrentTableOptimized.tsx to detect that target and render the status bar via React portal when available, falling back to inline rendering.

Changes

Status Bar Portal Rendering

Layer / File(s)	Summary
Layout container and flex wrappers web/src/pages/Torrents.tsx	Adds className="flex-1 min-h-0" to the desktop ResizablePanelGroup and renders a div#qui-status-bar-container beneath it for portal targets.
Portal detection and conditional rendering web/src/components/torrents/TorrentTableOptimized.tsx	Moves createPortal import, adds statusBarContainer state initialized in useLayoutEffect, builds statusBarContent and conditionally uses createPortal(statusBarContent, statusBarContainer) or inline rendering when the container is absent.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• autobrr/qui#522: Related status-bar/UI restructuring in TorrentTableOptimized.tsx.
• autobrr/qui#760: Related desktop resizable-panel layout changes affecting Torrents.tsx.

Suggested labels

web, torrent, bugfix, area/frontend

Suggested reviewers

• s0up4200

Poem

🐇 A little rabbit hops to see,
A portal planted by the tree,
Status bar drifts to its new place,
Falls back kindly if no space,
Layout snug, the view feels free.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title clearly and specifically summarizes the main change: moving the instance status bar back to the bottom of the screen, which is the core objective of the pull request.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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