Skip to content

fix: always show PDF viewer toolbar with back button#3269

Merged
jeanfbrito merged 1 commit intodevfrom
fix/pdf-viewer-back-button
Mar 23, 2026
Merged

fix: always show PDF viewer toolbar with back button#3269
jeanfbrito merged 1 commit intodevfrom
fix/pdf-viewer-back-button

Conversation

@jeanfbrito
Copy link
Copy Markdown
Member

@jeanfbrito jeanfbrito commented Mar 19, 2026 •
edited by coderabbitai bot
Loading

Summary

Fixes CORE-1241 — PDF viewer always shows the Back button toolbar.

When opening a PDF from a channel's Files tab, the PDF viewer toolbar (with the Back button) was not visible, leaving the user stuck with no way to navigate back.

Changes

  • Add absolute positioning to DocumentViewerWrapper so it properly fills the parent container
  • Change DocumentViewer layout from absolute-positioned to column flex, ensuring the toolbar stacks above the PDF content
  • Set the content area to flexGrow: 1 with relative positioning so the webview fills the remaining space

Test plan

  • Open a channel > Files tab > select a PDF — verify the Back button toolbar is visible
  • Open a PDF directly from a conversation message — verify the Back button toolbar is still visible
  • Click the Back button — verify it closes the PDF viewer and returns to the channel
  • Test with sidebar visible and sidebar hidden — toolbar should show in both cases

Summary by CodeRabbit

  • Style
    • Restructured document viewer layout to use flexbox architecture for improved responsiveness and flexible content sizing.
    • Refined container positioning and overlay styling for enhanced visual display behavior and rendering.
    • Optimized header styling with improved padding and alignment for better visual consistency.

@jeanfbrito
CORE-1241 fix: always show PDF viewer toolbar with back button
b085137 
Fix DocumentViewer layout so the toolbar with the Back button is always
visible regardless of sidebar state. The wrapper now properly fills its
parent with absolute positioning, and the viewer uses a column flex
layout to stack the toolbar above the PDF content.
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Mar 19, 2026 •
edited
Loading

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 13ff2cbe-feff-436c-a250-00397d4520db

📥 Commits

Reviewing files that changed from the base of the PR and between 0790d9f and b085137.

📒 Files selected for processing (2)
  • src/ui/components/ServersView/DocumentViewer.tsx
  • src/ui/components/ServersView/styles.tsx
📜 Recent review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
  • GitHub Check: check (ubuntu-latest)
  • GitHub Check: check (macos-latest)
  • GitHub Check: check (windows-latest)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Use TypeScript strict mode enabled in TypeScript configuration
Use React functional components with hooks instead of class components
Follow FSA (Flux Standard Action) pattern for Redux actions
Use camelCase for file names and PascalCase for component file names
All code must pass ESLint and TypeScript checks
Write self-documenting code with clear naming; avoid unnecessary comments except for complex business logic or non-obvious decisions
Use Fuselage components from @rocket.chat/fuselage for all UI work and only create custom components when Fuselage doesn't provide what's needed
Check Theme.d.ts for valid color tokens when using Fuselage components
Use defensive coding with optional chaining and fallbacks for Linux-only APIs (process.getuid(), process.getgid(), process.geteuid(), process.getegid()) to ensure cross-platform compatibility across Windows, macOS, and Linux

Files:

  • src/ui/components/ServersView/styles.tsx
  • src/ui/components/ServersView/DocumentViewer.tsx
🔇 Additional comments (3)
src/ui/components/ServersView/styles.tsx (1)

26-30: Good overlay sizing change for DocumentViewerWrapper.

Pinning the wrapper to all sides (Line 26–Line 30) cleanly makes it fill its parent and supports consistent viewer visibility behavior.

src/ui/components/ServersView/DocumentViewer.tsx (2)

73-88: Flex-column layout correctly preserves the toolbar region.

Line 73–Line 88 now enforce a header + content split, so the toolbar stays visible while the document pane consumes remaining space.

105-108: webview fill behavior is now aligned with the content container.

Setting height: '100%' and top: 0 (Line 105, Line 108) makes the viewer fill the intended pane without the previous vertical offset behavior.

Walkthrough

Layout modifications applied to the DocumentViewer component and its wrapper styling. The outer container now uses flex column layout instead of absolute positioning with centered alignment. The DocumentViewerWrapper styled component received absolute positioning properties to fully overlay its parent container.

Changes

Cohort / File(s) Summary
Layout restructuring
src/ui/components/ServersView/DocumentViewer.tsx		 Changed outer container from centered absolute positioning to flex column layout; header explicitly sets flex display with alignment and padding; main content wrapper now uses position='relative' with flexGrow={1}; embedded webview adjusted to use height: '100%' with top: 0 positioning.
Component overlay styling
src/ui/components/ServersView/styles.tsx		 Added absolute positioning (position: absolute; left: 0; top: 0; right: 0; bottom: 0;) to DocumentViewerWrapper styled component to enable full container overlay while maintaining existing display conditionals.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

type: bug

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: fixing PDF viewer toolbar visibility with back button, which aligns with the core objective of the PR.
Linked Issues check ✅ Passed The changes directly address CORE-1241 by repositioning DocumentViewerWrapper absolutely and refactoring DocumentViewer's layout to ensure the toolbar is always visible above PDF content.
Out of Scope Changes check ✅ Passed All changes focus on fixing PDF viewer toolbar visibility and layout; no unrelated modifications or scope creep detected in the modified files.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

📝 Coding Plan
  • Generate coding plan for human review comments

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

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

@jeanfbrito jeanfbrito merged commit 3216fdb into dev Mar 23, 2026
6 checks passed
@jeanfbrito jeanfbrito deleted the fix/pdf-viewer-back-button branch March 23, 2026 16:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

type: bug

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@jeanfbrito