fix: fixed case page layout

[chesterkmr]

User description

Description

• Non shrinkable tabs menu at entity page produced vertical scroll and broken layout.

• Tabs menu now shrink at smaller screens
  

---

PR Type

Bug fix, Enhancement

---

Description

• Enhanced the tabs layout in DefaultBlocks.tsx by making the tabs container sticky and improving responsiveness.
• Adjusted layout and styling in Case.Actions.tsx to improve visual spacing and text handling.
• Organized imports and components in CaseManagement.page.tsx and Case.tsx for better code consistency.
• Improved UI elements in DefaultActions.tsx to enhance user interaction and visual layout.

---

Changes walkthrough 📝

	Relevant files
Enhancement	DefaultBlocks.tsx Enhance Tabs Layout and Responsiveness in DefaultBlocks    apps/backoffice-v2/src/lib/blocks/variants/DefaultBlocks/DefaultBlocks.tsx Changed the tabs container from fixed to sticky for better layout management. Updated TabsList to have a responsive design with flex properties. +3/-3      Case.Actions.tsx Layout and Styling Adjustments in Case Actions                      apps/backoffice-v2/src/pages/Entity/components/Case/Case.Actions.tsx Removed sticky positioning from the main container. Added gap-4 to the layout for better spacing. Improved text wrapping and layout in various components. +5/-5      DefaultActions.tsx Code Cleanup and UI Enhancement in DefaultActions                apps/backoffice-v2/src/pages/Entity/components/Case/actions-variants/DefaultActions/DefaultActions.tsx Reordered some imports and components for better organization. Enhanced button layout with flex-wrap and gap-4. +7/-8
Miscellaneous	CaseManagement.page.tsx Reorder Imports in CaseManagement Page                                      apps/backoffice-v2/src/pages/CaseManagement/CaseManagement.page.tsx Reordered imports for better consistency. +1/-1      Case.tsx Reorder Imports in Case Component                                                apps/backoffice-v2/src/pages/Entity/components/Case/Case.tsx Reordered imports to follow a consistent structure. +2/-2

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

Summary by CodeRabbit

• New Features

  • Enhanced visual presentation and layout of components across multiple sections of the app, improving user interface consistency and responsiveness.

• Style

  • Updated CSS classes and layouts in various components for better alignment and visibility.

• Refactor

  • Reordered import statements in several files for improved code maintainability and readability.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 198354d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Walkthrough

The recent updates primarily focus on enhancing the UI components across multiple files in the backoffice-v2 application. These modifications include rearranging import orders for better organization, updating CSS for improved layout and aesthetics, and adjusting JSX elements for better component structuring. The changes aim to refine user interface consistency and maintainability.

Changes

File Path	Change Summary
.../DefaultBlocks/DefaultBlocks.tsx	Updated styling and structure of tabs.
.../CaseManagement/CaseManagement.page.tsx	Reordered import statements.
.../Case/Case.Actions.tsx	Adjusted CSS classes for layout and appearance.
.../Case/Case.tsx	Swapped import order of Content and FaceMatch.
.../Case/actions-variants/DefaultActions.tsx	Reordered imports and updated classNames in JSX elements.

🐰✨
In the code garden, amidst the lines and loops,
A rabbit hops, tweaking groups and troops.
Tabs align, styles refine,
With each commit, the code does shine.
Celebrate the changes, for they are divine! 🌟

(\__/) ||
(•ㅅ•) ||
/ 　 づ

---

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>.
  • 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 generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @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.

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 as 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 full the 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 help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration 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.

[github-actions]

PR Description updated to latest commit (ad858d2)

[github-actions]

PR Description updated to latest commit (ad858d2)

[github-actions]

PR Review 🔍

(Review updated until commit ad858d2)

⏱️ Estimated effort to review [1-5]	3, because the PR involves multiple files and changes related to UI layout adjustments, which require careful review to ensure they meet design specifications and do not introduce layout issues on different screen sizes.
🧪 Relevant tests	No
⚡ Possible issues	Possible Layout Issue: The change from a fixed to a sticky position in DefaultBlocks.tsx might cause unexpected layout shifts or overlaps in some scenarios, especially when combined with other UI elements.
	Responsive Design Concern: The use of flex-wrap and justify-center in DefaultBlocks.tsx needs to be tested across various devices to ensure that it does not break the layout on smaller screens.
🔒 Security concerns	No

Code feedback:

---

relevant file	apps/backoffice-v2/src/lib/blocks/variants/DefaultBlocks/DefaultBlocks.tsx
suggestion	Consider adding a min-width or max-width to the TabsList to prevent tabs from becoming too narrow or too wide on extremely small or large screens, which could lead to usability issues. [important]
relevant line

---

relevant file	apps/backoffice-v2/src/pages/Entity/components/Case/Case.Actions.tsx
suggestion	Ensure that the removal of sticky positioning from the Actions div does not affect the expected behavior of the UI on scroll. If sticky behavior is required, consider reintroducing it or handling it through alternative means. [important]
relevant line

---

relevant file	apps/backoffice-v2/src/pages/Entity/components/Case/actions-variants/DefaultActions/DefaultActions.tsx
suggestion	Adding flex-wrap to the container might cause buttons to wrap in an undesired manner on smaller screens. Consider testing this behavior or providing additional styling to control the wrapping. [medium]
relevant line

---

relevant file	apps/backoffice-v2/src/pages/Entity/components/Case/Case.Actions.tsx
suggestion	The addition of gap-4 in the flex container might introduce spacing issues on smaller screens. It's recommended to test this change under various screen sizes and potentially adjust the gap size responsively. [medium]
relevant line

---

[github-actions]

Persistent review updated to latest commit ad858d2

[github-actions]

PR Code Suggestions ✨

Category	Suggestion	Score
Enhancement	Handle potential text overflow more gracefully in UI components The addition of whitespace-nowrap might cause text overflow issues on smaller screens or when unexpected long content is displayed. Consider handling overflow with ellipsis or other responsive techniques. apps/backoffice-v2/src/pages/Entity/components/Case/Case.Actions.tsx [69] -className={ctw(`whitespace-nowrap text-sm font-bold`, { +className={ctw(`text-sm font-bold overflow-hidden text-ellipsis`, { Suggestion importance[1-10]: 7 Why: This suggestion is valid and addresses a real concern about text overflow on smaller screens, which is a common issue in responsive design. The suggested improvement to handle overflow with ellipsis is a practical enhancement.	7
Possible issue	Ensure flex-wrap does not cause unintended layout or overflow issues The flex-wrap property has been added to the container. If the intention is to handle overflow by wrapping, verify that all child components correctly adapt to this change without UI issues. apps/backoffice-v2/src/pages/Entity/components/Case/actions-variants/DefaultActions/DefaultActions.tsx [31] -<div className={`flex flex-wrap items-center gap-4 self-start pe-[3.35rem]`}> +<div className={`flex items-center gap-4 self-start pe-[3.35rem]`}> Suggestion importance[1-10]: 6 Why: The suggestion is relevant as flex-wrap can indeed affect layout and overflow. The suggestion correctly identifies a change in the PR that could impact the UI, although the existing and improved code snippets are incorrectly swapped.	6
Best practice	Adjust the z-index to a more appropriate value to avoid layering issues Consider using a more specific z-index value instead of a very high arbitrary value like '50'. If '50' is indeed necessary, ensure it does not conflict with other layers in your application. apps/backoffice-v2/src/lib/blocks/variants/DefaultBlocks/DefaultBlocks.tsx [14] -<div className="sticky top-0 z-50 flex flex-row bg-white py-2"> +<div className="sticky top-0 z-10 flex flex-row bg-white py-2"> Suggestion importance[1-10]: 5 Why: The suggestion to adjust the z-index is valid as arbitrary high values can cause layering issues. However, without specific context on the necessity of '50', the suggestion to change it to '10' is somewhat arbitrary.	5

[coderabbitai]

Actionable comments posted: 0

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between f645eb0 and ad858d2.

Files selected for processing (5)

• apps/backoffice-v2/src/lib/blocks/variants/DefaultBlocks/DefaultBlocks.tsx (1 hunks)
• apps/backoffice-v2/src/pages/CaseManagement/CaseManagement.page.tsx (1 hunks)
• apps/backoffice-v2/src/pages/Entity/components/Case/Case.Actions.tsx (3 hunks)
• apps/backoffice-v2/src/pages/Entity/components/Case/Case.tsx (1 hunks)
• apps/backoffice-v2/src/pages/Entity/components/Case/actions-variants/DefaultActions/DefaultActions.tsx (2 hunks)

Files not reviewed due to errors (1)

• apps/backoffice-v2/src/pages/Entity/components/Case/actions-variants/DefaultActions/DefaultActions.tsx (no review received)

Files skipped from review due to trivial changes (3)

• apps/backoffice-v2/src/pages/CaseManagement/CaseManagement.page.tsx
• apps/backoffice-v2/src/pages/Entity/components/Case/Case.Actions.tsx
• apps/backoffice-v2/src/pages/Entity/components/Case/Case.tsx

Additional comments not posted (1)

apps/backoffice-v2/src/lib/blocks/variants/DefaultBlocks/DefaultBlocks.tsx (1)

14-17: Sticky positioning and layout adjustments in the tabs component look good and align with the PR objectives.

[github-actions]

PR Code Suggestions ✨

Category	Suggestion	Score
Accessibility	Improve accessibility by adding descriptive labels to interactive elements Add a tooltip or aria-label to the button to enhance accessibility, providing context about the button's function, especially when it is disabled. apps/backoffice-v2/src/pages/Entity/components/Case/actions-variants/DefaultActions/DefaultActions.tsx [34-38] <Button size="md" variant="warning" disabled={isLoadingActions || !canRevision} className={ctw({ loading: debouncedIsLoadingRejectCase }, 'whitespace-nowrap')} + aria-label="Ask for all re-uploads" > Ask for all re-uploads {canRevision && `(${documentsToReviseCount})`} </Button> Suggestion importance[1-10]: 8 Why: Adding aria-labels to interactive elements is crucial for accessibility, especially for users relying on screen readers. This suggestion significantly enhances the accessibility of the application.	8
Best practice	Use a more manageable z-index value for better stacking context control Consider using a more specific z-index value instead of a very high arbitrary number. Using a predefined set of z-index values can help manage the stacking context more predictably across the application. apps/backoffice-v2/src/lib/blocks/variants/DefaultBlocks/DefaultBlocks.tsx [14] -<div className="sticky top-0 z-50 flex flex-row bg-white py-2"> +<div className="sticky top-0 z-10 flex flex-row bg-white py-2"> # Assuming z-10 is defined in your z-index management system Suggestion importance[1-10]: 7 Why: The suggestion to use a more manageable z-index value is valid and improves maintainability and predictability of the CSS. It's a good practice to have a controlled range of z-index values.	7
Maintainability	Simplify JSX by using a function to generate conditional class names Consider using a utility function to dynamically generate class names based on the isLoadingCase state to simplify the JSX markup. apps/backoffice-v2/src/pages/Entity/components/Case/Case.Actions.tsx [57-59] -className={ctw(`w-full max-w-[35ch] break-all text-4xl font-semibold leading-9`, { - 'h-8 w-full max-w-[24ch] animate-pulse rounded-md bg-gray-200 theme-dark:bg-neutral-focus': - isLoadingCase, -})} +className={generateHeaderClass(isLoadingCase)} Suggestion importance[1-10]: 7 Why: Using a utility function to generate class names based on state can simplify the JSX and improve maintainability. This is a good suggestion for cleaner code.	7
Enhancement	Enhance responsive design by adjusting padding based on screen size Ensure that the className for the div element includes responsive design considerations or specific class handling for different screen sizes, especially if the design is intended to be responsive. apps/backoffice-v2/src/pages/Entity/components/Case/Case.Actions.tsx [42] -<div className={`col-span-2 space-y-2 bg-base-100 px-4 pt-4`}> +<div className={`col-span-2 space-y-2 bg-base-100 px-4 pt-4 md:px-6 lg:px-8`}> # Adjust padding for different screen sizes Suggestion importance[1-10]: 6 Why: The suggestion to adjust padding based on screen size is relevant and improves the responsive design of the application. However, it's a relatively minor enhancement.	6