NdekoCode commented 5 days ago

Fix layout size, some empty spaces scroll effect

Please include a summary of the changes and the related issue.

Type of Change

[x] Bug fix
[ ] New feature
[ ] Breaking change
[x] Documentation update

Checklist

[x] My code follows the style guidelines of this project
[x] I have performed a self-review of my code
[x] I have commented my code, particularly in hard-to-understand areas
[ ] I have made corresponding changes to the documentation
[ ] My changes generate no new warnings

Previous screenshots

https://github.com/user-attachments/assets/9d9fb35b-f7c9-45f2-91b9-dbab01e298ae

Current screenshots

https://github.com/user-attachments/assets/8f57cb3b-31a6-44fb-8330-7d3e5f9968d3

Summary by CodeRabbit

New Features
- Introduced a new environment variable to allow production builds to complete despite ESLint errors.
- Added pagination functionality to the task management interface.
- Enhanced the Kanban component with improved responsiveness and usability.
- Integrated a new AppContainer component for layout management.
- Added GlobalHeader and GlobalFooter components for consistent header/footer layout.
Bug Fixes
- Adjusted layout behavior to ensure better handling of overflow content in various components.
Style
- Improved styling and layout across multiple components for better responsiveness and visual consistency.
Chores
- Updated dependencies in package.json for improved package management.
- Refactored various components for better code readability and maintainability.

coderabbitai[bot] commented 5 days ago

[!CAUTION]

Review failed

The pull request is closed.

Walkthrough

The pull request introduces several changes across multiple files in the web application. A new environment variable NEXT_IGNORE_ESLINT_ERROR_ON_BUILD is added to facilitate production builds despite ESLint errors. Various components, including layout and UI elements, have been refactored for improved readability, maintainability, and responsiveness. New features such as pagination in task management and enhanced styling for user interface elements have been implemented. Additionally, new components for global header and footer have been introduced, along with updates to existing styles and configurations.

Changes

File Path	Change Summary
`apps/web/.env`	Added new variable `NEXT_IGNORE_ESLINT_ERROR_ON_BUILD=true`.
`apps/web/.env.sample`	Added new variable `NEXT_IGNORE_ESLINT_ERROR_ON_BUILD=true`.
`apps/web/app/[locale]/kanban/page.tsx`	Restructured imports and component organization; refined control flow and readability.
`apps/web/app/[locale]/layout.tsx`	Updated `body` class for styling; modified dark mode background application.
`apps/web/app/[locale]/page-component.tsx`	Removed resizable panels; introduced `mainHeaderSlot` prop for header content.
`apps/web/app/[locale]/profile/[memberId]/page.tsx`	Simplified layout structure; removed resizable components.
`apps/web/app/[locale]/settings/layout.tsx`	Changed utility function for class name management; improved JSX structure.
`apps/web/app/[locale]/settings/personal/page.tsx`	Minor adjustments to JSX structure and class names.
`apps/web/app/[locale]/task/[id]/component.tsx`	Adjusted class names for layout; no changes to functionality.
`apps/web/app/[locale]/task/[id]/page.tsx`	Reformatted code for readability; logic remains unchanged.
`apps/web/app/[locale]/team/tasks/page.tsx`	Added pagination functionality and improved task management interface.
`apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx`	Refactored for readability; logic remains unchanged.
`apps/web/app/[locale]/timesheet/[memberId]/components/FilterWithStatus.tsx`	Updated type declaration and function signature for immutability.
`apps/web/app/[locale]/timesheet/[memberId]/components/RejectSelectedModal.tsx`	Cosmetic changes to formatting; functionality unchanged.
`apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx`	Formatting improvements; logic remains unchanged.
`apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx`	Updated interface and function signatures for consistency.
`apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx`	Added minimum height class for layout consistency.
`apps/web/app/[locale]/timesheet/[memberId]/page.tsx`	Focused on formatting and structural adjustments; logic remains intact.
`apps/web/app/hooks/features/useKanban.ts`	Refactored filtering logic; added new function for column collapse checking.
`apps/web/app/layout.tsx`	Changed `children` prop type to enforce immutability.
`apps/web/components/pages/team/tasks/TaskTable.tsx`	Simplified data handling by accepting `currentItems` as a prop.
`apps/web/components/pages/team/tasks/tasks-data-table.tsx`	Removed unnecessary imports and simplified rendering logic.
`apps/web/components/ui/data-table.tsx`	Added `isScrollable` property; updated class names for consistency.
`apps/web/components/ui/scroll-area.tsx`	Formatting adjustments; functionality unchanged.
`apps/web/lib/components/Kanban.tsx`	Introduced new function for dynamic column height calculation; updated styling.
`apps/web/lib/components/accordian.tsx`	Modified shadow property syntax; initialized `isOpen` state differently.
`apps/web/lib/components/container.tsx`	Changed class name logic based on `fullWidth` prop.
`apps/web/lib/components/sidebar-accordian.tsx`	Updated shadow property syntax; no changes to functionality.
`apps/web/lib/features/all-teams-members-card-view.tsx`	Added CSS classes for improved layout.
`apps/web/lib/features/all-teams/users-teams-card/member-infos.tsx`	Added optional `className` prop for styling flexibility.
`apps/web/lib/features/all-teams/users-teams-card/user-card.tsx`	Updated to accept `className` prop; refined layout structure.
`apps/web/lib/features/all-teams/users-teams-card/user-team-active-task-times.tsx`	Added optional `className` prop for styling flexibility.
`apps/web/lib/features/all-teams/users-teams-card/user-team-active-task.tsx`	Added optional `className` prop for styling flexibility.
`apps/web/lib/features/all-teams/users-teams-card/user-team-active-task-estimate.tsx`	Added optional `className` prop for styling flexibility.
`apps/web/lib/features/all-teams/users-teams-card/user-team-today-worked.tsx`	Added optional `className` prop for styling flexibility.
`apps/web/lib/features/integrations/activity-calendar/index.tsx`	Formatting adjustments; logic remains unchanged.
`apps/web/lib/features/integrations/calendar/table-time-sheet.tsx`	Standardized string delimiters and improved readability.
`apps/web/lib/features/task/daily-plan/future-tasks.tsx`	Integrated `AlertPopup` for task deletion confirmation.
`apps/web/lib/features/task/daily-plan/outstanding-all.tsx`	Added `flex-wrap` class for task item layout.
`apps/web/lib/features/task/daily-plan/outstanding-date.tsx`	Adjusted class names for layout; added `flex-wrap` class.
`apps/web/lib/features/task/daily-plan/past-tasks.tsx`	Added `flex-wrap` class for task item layout.
`apps/web/lib/features/task/task-card.tsx`	Updated layout for task planning options; refined responsiveness.
`apps/web/lib/features/task/task-filters.tsx`	Enhanced filtering logic and state management.
`apps/web/lib/features/task/task-status.tsx`	Updated spacing classes for consistency; refined dropdown logic.
`apps/web/lib/features/team-member-cell.tsx`	Adjusted maximum width properties for responsiveness.
`apps/web/lib/features/team-member-header.tsx`	Formatting adjustments; logic remains unchanged.
`apps/web/lib/features/team-members-card-view.tsx`	Added `overflow-y-auto` class for improved scroll behavior.
`apps/web/lib/features/team-members-kanban-view.tsx`	Introduced `ScrollArea` for improved UI handling; updated layout structure.
`apps/web/lib/features/team-members-table-view.tsx`	Added `isScrollable` and `noResultsMessage` props for enhanced functionality.
`apps/web/lib/features/team/user-team-block/user-team-block-header.tsx`	Formatting adjustments; logic remains unchanged.
`apps/web/lib/features/team/user-team-card/index.tsx`	Adjusted layout for task information; refined rendering logic.
`apps/web/lib/features/team/user-team-card/task-skeleton.tsx`	Adjusted layout and styling for improved alignment.
`apps/web/lib/features/team/user-team-table/user-team-table-header.tsx`	Modified padding classes for header.
`apps/web/lib/features/unverified-email.tsx`	Adjusted margin and verification logic; streamlined UI.
`apps/web/lib/features/user-nav-menu.tsx`	Adjusted layout and class names for consistency.
`apps/web/lib/features/user-profile-plans.tsx`	Updated rendering logic and layout for improved responsiveness.
`apps/web/lib/features/user-profile-tasks.tsx`	Enhanced layout and presentation of task-related UI elements.
`apps/web/lib/layout/AppContainer.tsx`	New component introduced for layout management.
`apps/web/lib/layout/GlobalFooter.tsx`	New component introduced for footer management.
`apps/web/lib/layout/GlobalHeader.tsx`	New component introduced for header management.
`apps/web/lib/layout/footer.tsx`	Formatting adjustments and layout modifications.
`apps/web/lib/layout/main-layout.tsx`	Significant restructuring for responsive layout; integrated new components.
`apps/web/lib/utils.ts`	Introduced `getStatusColor` function for task status management.
`apps/web/next.config.js`	Added ESLint configuration to bypass errors during production builds.
`apps/web/package.json`	Updated `@radix-ui/react-scroll-area` dependency version.
`apps/web/styles/globals.css`	Added new `@font-face` declarations and updated CSS rules for styling.

Suggested labels

Bug fix, WEB, UI/UX

Suggested reviewers

evereq
Cedric921

🐰 In the meadow where changes bloom,
New features sprout, dispelling gloom.
With every line and every tweak,
Our app grows stronger, sleek and chic.
So hop along, let's celebrate,
For progress made, we elevate! 🌼✨

[!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/app/[locale]/kanban/page.tsx
Oops! Something went wrong! :( ESLint: 8.46.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/apps/web/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.

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](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

🪧 Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , 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 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](https://docs.coderabbit.ai/guides/configure-coderabbit) 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](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

NdekoCode commented 5 days ago

@Cedrick can you please take a close look at this PR? I've stabilised the layout and even documented the MainLayout component to make it easier to use in the future. Before this PR is merged, please also have a look at your site to see if anything is broken. If something is broken, please do the following

check if it's the layout that's the problem, or if it's the component it contains that has a fixed size instead of an adaptive size
Try disabling blocks using the Google Inspector to see and identify problem blocks, and locate the component that needs fixing.
Git lens can also help you see who has been working primarily on the component and can fix it quickly. For minor display issues, I'm available to fix them. Keep me posted!

socket-security[bot] commented 4 days ago

👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report↗︎