Feat/search bar misalignment #3561
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/app/[locale]/kanban/page.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. apps/web/app/[locale]/page-component.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. apps/web/components/pages/kanban/search-bar.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. WalkthroughThe pull request involves minor layout and styling modifications across three files in the web application. Changes primarily focus on adjusting flex properties, padding, and container classes in the Kanban page, main page component, and search bar. These updates aim to refine the visual presentation and spacing of UI elements without altering core functionality or logic. 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: 1
🧹 Nitpick comments (1)
apps/web/components/pages/kanban/search-bar.tsx (1)
43-43: LGTM! Consider adding a min-width for better UX.The width reduction in collapsed state helps prevent viewport overflow. The transition-all class ensures smooth animation between states.
Consider adding a min-width to prevent the search bar from becoming too small on very narrow screens:
- className={`mb-0 h-10 transition-all ${isExpanded ? 'w-64' : 'w-24'} !bg-transparent`} + className={`mb-0 h-10 transition-all min-w-[5rem] ${isExpanded ? 'w-64' : 'w-24'} !bg-transparent`}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/web/app/[locale]/kanban/page.tsx(3 hunks)apps/web/app/[locale]/page-component.tsx(2 hunks)apps/web/components/pages/kanban/search-bar.tsx(1 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/app/[locale]/page-component.tsx (1)
66-66: LGTM! Code cleanup.Removed extra space in clsxm class string for better code cleanliness.
apps/web/app/[locale]/kanban/page.tsx (3)
159-160: LGTM! Improved flex layout.The changes from flex-col-reverse to flex-col with centered justification help maintain proper vertical alignment of the search bar and other elements.
165-165: LGTM! Consistent spacing.Reduced bottom padding from 30px to 20px creates more balanced spacing between elements.
182-182: LGTM! Standardized padding.Changed padding-top from pt-[3px] to pt-1 for consistent spacing across dropdown components.
Also applies to: 232-232, 239-239, 246-246
| @@ -76,7 +76,7 @@ function MainPage() { | |||
| </div> | |||
| </div> | |||
|
|
|||
| <div className="mx-8-container"> | |||
| <div className="container"> | |||
There was a problem hiding this comment.
💡 Codebase verification
Container class change will affect layout behavior
The change from mx-8-container to container removes dynamic width behavior and introduces fixed constraints:
- Loses responsive full-width capability controlled by application state
- Applies fixed 2rem padding and max-width limits
- May cause unexpected layout shifts
🔗 Analysis chain
Verify container width impact.
The change from mx-8-container to container class could affect the layout width. Please ensure this doesn't cause any unintended side effects on other components.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for other usages of mx-8-container to ensure we're not breaking existing layouts
rg -l "mx-8-container" --type css --type tsx
Length of output: 72
Script:
#!/bin/bash
# Search for both class names and tailwind config
echo "=== Searching for mx-8-container ==="
rg "mx-8-container"
echo -e "\n=== Searching for tailwind.config ==="
fd "tailwind.config"
echo -e "\n=== Checking container styles in CSS files ==="
rg "container" --type css
echo -e "\n=== Checking for container class in TSX/JSX files ==="
find . -type f \( -name "*.tsx" -o -name "*.jsx" \) -exec grep -l "container" {} \;
Length of output: 10528
Script:
#!/bin/bash
# Check the container class definitions
echo "=== AppContainer.tsx content ==="
cat apps/web/lib/layout/AppContainer.tsx
echo -e "\n=== Tailwind container configuration ==="
cat apps/web/tailwind.config.js
Length of output: 6276
Issue No #3560
Description
This PR fixes the misalignment issue of the search bar on the Kanban page. The search bar was moving out of the viewport due to incorrect styling. Adjustments have been made to ensure proper positioning and responsiveness.
Type of Change
Checklist
Previous screenshots
Current screenshots
Please add here videos or images of the current (new) status
Summary by CodeRabbit
Style
Chores