Fix/layout size and scroll effect

[NdekoCode]

#Fix layout size, some empty spaces scroll effect

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

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation update

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• 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

Screen.Recording.2024-11-19.at.22.17.36.mov

Current screenshots

Screen.Recording.2024-11-20.at.23.19.59.mov

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]

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
• 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 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.

[NdekoCode]

@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]

👍 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↗︎

[socket-security]

Report too large to display inline

View full report↗︎