[FIX]: Buttons Moving Out of Container on Task Detail Page #3577
Conversation
|
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
apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsxOops! 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. WalkthroughThis change adjusts the UI styling of several components within the TaskSecondaryInfo module. The updates modify the class names to update width constraints on multiple dropdown components, adjust the button padding, and replace a max-width style with a min-width style in the TaskLabels component. These changes refine spacing and layout without altering underlying functionality. Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx (1)
89-232: Consider extracting dropdown components for better maintainability.The TaskSecondaryInfo component contains multiple similar dropdown sections. Consider extracting these into a reusable component to reduce code duplication and improve maintainability.
Example refactor:
interface TaskDropdownProps { labelTitle: string; component: React.ReactElement; wrapperClassName?: string; } const TaskDropdownRow: React.FC<TaskDropdownProps> = ({ labelTitle, component, wrapperClassName }) => ( <TaskRow labelTitle={labelTitle} wrapperClassName={wrapperClassName}> {component} </TaskRow> );Then use it like:
-<TaskRow labelTitle={t('pages.taskDetails.VERSION')}> - <ActiveTaskVersionDropdown - task={task} - className="lg:min-w-[130px] text-black" - forDetails={true} - sidebarUI={true} - taskStatusClassName="text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs" - > - <Button - className="w-full py-1 px-2 text-[0.625rem] mt-3 dark:text-white dark:border-white" - variant="outline" - onClick={openModalEditionHandle('version')} - > - <PlusIcon className="w-4 h-4" /> - </Button> - </ActiveTaskVersionDropdown> -</TaskRow> +<TaskDropdownRow + labelTitle={t('pages.taskDetails.VERSION')} + component={ + <ActiveTaskVersionDropdown + task={task} + className="lg:min-w-[130px] text-black" + forDetails={true} + sidebarUI={true} + taskStatusClassName="text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs" + > + <Button + className="w-full py-1 px-2 text-[0.625rem] mt-3 dark:text-white dark:border-white" + variant="outline" + onClick={openModalEditionHandle('version')} + > + <PlusIcon className="w-4 h-4" /> + </Button> + </ActiveTaskVersionDropdown> + } +/>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx(6 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Codacy Static Code Analysis
- GitHub Check: deploy
🔇 Additional comments (4)
apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx (4)
95-95: LGTM! Width constraints adjusted to prevent overflow.The change from
min-w-[170px]tomin-w-[130px]across all dropdown components helps prevent buttons from moving out of their container when the sidebar expands.Also applies to: 134-134, 153-153, 182-182, 201-201
155-155: LGTM! Fixed width constraint type.Changed from
max-w-[7.6875rem]tomin-w-[7.6875rem]to maintain consistent width and prevent content from shrinking below the desired width.
363-363: LGTM! Adjusted button padding.Reduced horizontal padding from
px-4topx-2to ensure button content stays within the container bounds.
370-370: LGTM! Added margin for icon alignment.Added
mx-1margin to the ProjectIcon wrapper to maintain proper spacing within the button.
Issue No: #3575
closes #3575
Description
The issue where buttons were moving out of their container on the Task Detail page when the sidebar was expanded has been fixed. The buttons now remain properly aligned within their container.
Type of Change
Checklist
Previous screenshots
Current screenshots
Summary by CodeRabbit