Fix resize handler positioning & add full screen by default in mail

[RicSala]

This pull request includes changes to the EmailList component in the apps/web/components/email-list/EmailList.tsx file. The main focus of these changes is:

• Make full screen by default (keeping the handler of the resizable group)

• Fix the positoning of the handler (it was being centered to the whole liste of emails instead of the ones in viewport, which made it not obvious). Now is centered.

• Make the resizeable pannels to scroll independently

Comment: Had to set the height of the wrapper around ActionButtonsBulk explicitly. Otherwise the app layout managed the scroll instead.

Enhancements to EmailList component:

• Adjusted the height of the action bar container to h-12 for consistent sizing.
• Added a conditional onlyRight prop to the ResizeGroup component to control the visibility and size of the left and right panels based on whether a thread is open. [1] [2]
• Modified the ResizeGroup component to dynamically set the sizes of the left and right panels, ensuring that the right panel takes up the full width when onlyRight is true.

Summary by CodeRabbit

• New Features

  • Introduced a new option to control panel display, allowing for dynamic adjustment between two panels for a more flexible layout.

• Style

  • Updated the email list action bar with a fixed height for a consistent, refined visual experience.
  • Improved container styling to ensure content remains neatly contained during panel resizing.

[vercel[bot]]

@RicSala is attempting to deploy a commit to the Inbox Zero Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai[bot]]

Walkthrough

This update adjusts the layout and panel sizing in the EmailList component. A fixed height (h-12) was applied to the main container, and the ResizeGroup component now accepts a new onlyRight prop. This prop controls the sizing behavior of the left and right panels, setting them to either a 0/100 or 50/50 split. Additionally, the rendering logic now wraps the ResizablePanelGroup in a div with a maximum height and overflow hidden, ensuring proper containment and consistent layout behavior.

Changes

File	Change Summary
apps/.../EmailList.tsx	• Added fixed height (h-12) to EmailList container. • Introduced new onlyRight prop to ResizeGroup with conditional panel sizing (0/100 vs. 50/50). • Wrapped ResizablePanelGroup in a max-height, overflow-hidden container. • Updated function signature accordingly.

Sequence Diagram(s)

sequenceDiagram
    participant EL as EmailList
    participant RG as ResizeGroup
    participant RPP as ResizablePanelGroup

    EL->>RG: Render with {left, right, onlyRight}
    alt onlyRight is true
        RG->>RPP: Set panel sizes (left: 0, right: 100)
    else
        RG->>RPP: Set panel sizes (left: 50, right: 50)
    end
    RG->>EL: Render layout with fixed height container

Possibly related PRs

• elie222/inbox-zero#211: Involves similar modifications to EmailList and ResizeGroup components, focusing on prop updates and rendering logic.

Poem

I’m a coding rabbit with a joyful stride,
Hopping through changes with fixed height as my guide.
With “onlyRight” tuning panel views just fine,
My code rightfully prances like a line of rhyme.
Cheers and hops for a layout divine! 🐇

[!WARNING] There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

apps/web/components/email-list/EmailList.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

Error: Failed to load parser '@typescript-eslint/parser' declared in 'apps/web/.eslintrc.json': Cannot find module '@typescript-eslint/parser' Require stack:

• /apps/web/.eslintrc.json at Module._resolveFilename (node:internal/modules/cjs/loader:1248:15) at Function.resolve (node:internal/modules/helpers:145:19) at Object.resolve (/node_modules/.pnpm/@[email protected]/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2346:46) at ConfigArrayFactory._loadParser (/node_modules/.pnpm/@[email protected]/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3325:39) at ConfigArrayFactory._normalizeObjectConfigDataBody (/node_modules/.pnpm/@[email protected]/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3099:43) at _normalizeObjectConfigDataBody.next () at ConfigArrayFactory._normalizeObjectConfigData (/node_modules/.pnpm/@[email protected]/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3040:20) at _normalizeObjectConfigData.next () at ConfigArrayFactory.loadInDirectory (/node_modules/.pnpm/@[email protected]/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2886:28) at CascadingConfigArrayFactory._loadConfigInAncestors (/node_modules/.pnpm/@[email protected]/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3871:46)

---

📜 Recent review details

Configuration used: CodeRabbit UI Review profile: CHILL Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 63608cf987e83e177bcda4aa84539d3a9d27b92f and e9b9705522f017467e20236462ce4ec302d1164c.

📒 Files selected for processing (1)

• apps/web/components/email-list/EmailList.tsx (3 hunks)

🔇 Additional comments (2)

apps/web/components/email-list/EmailList.tsx (2)

370-370: LGTM! Fixed height for consistent action bar sizing.

The change to use a fixed height class h-12 ensures consistent sizing of the action bar container across the interface.

---

510-543: LGTM! Improved panel resizing and scroll behavior.

The changes effectively address the PR objectives:

1. The onlyRight prop enables dynamic panel sizing (0/100 or 50/50 split)
2. Independent scrolling is implemented for both panels
3. The resize handler is properly contained within the viewport

The implementation is clean and maintainable.

✨ Finishing Touches

• [ ] 📝 Generate Docstrings (Beta)

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[elie222]

Thanks! For PRs like this, attaching a Loom video or even just a screenshot would be helpful!