fix(MegaMenu): fix MegaMenuDropdown position#1666
fix(MegaMenu): fix MegaMenuDropdown position#1666Perajit wants to merge 1 commit intothemesberg:mainfrom
Conversation
|
📝 WalkthroughWalkthroughThis PR updates the MegaMenu theme's dropdown floating base class composition to include an explicit Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related issues
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
@Perajit is attempting to deploy a commit to the Bergside Team on Vercel. A member of the Team first needs to authorize it. |
![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
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/ui/src/components/MegaMenu/theme.ts`:
- Line 15: The theme string uses v3 important-prefix syntax "!ml-0" in the
expression base: twMerge(dropdownTheme.floating.base, "!ml-0 mt-2 block"), which
will be left unchanged by convertUtilitiesToV4() and fail under Tailwind v4;
change the class to the v4-compatible important-suffix form "ml-0!" (i.e.,
update the string passed into twMerge) and also audit other theme files (e.g.,
drag-scroll.tsx) or enhance the convertUtilitiesToV4() helper to translate v3
"!..." prefixes into v4 "...!" suffixes so important modifiers are handled
globally.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c3fc7529-dfba-4d24-bbf1-e116b9b08887
📒 Files selected for processing (1)
packages/ui/src/components/MegaMenu/theme.ts
| floating: { | ||
| ...dropdownTheme.floating, | ||
| base: twMerge(dropdownTheme.floating.base, "mt-2 block"), | ||
| base: twMerge(dropdownTheme.floating.base, "!ml-0 mt-2 block"), |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify Tailwind major version and current important syntax usage.
set -euo pipefail
echo "== Tailwind dependency versions =="
rg -n --glob 'package.json' '"tailwindcss"\s*:' -C1
echo
echo "== Important modifier usage in source =="
rg -n --type=ts --type=tsx --type=js --type=jsx --type=css --type=html '(^|[[:space:]])![a-z0-9-]+' -C1
rg -n --type=ts --type=tsx --type=js --type=jsx --type=css --type=html '[a-z0-9-]+!' -C1Repository: themesberg/flowbite-react
Length of output: 678
🏁 Script executed:
# Check for lockfiles to determine actual pinned version
ls -la | grep -E "(package-lock|yarn.lock|pnpm-lock)"Repository: themesberg/flowbite-react
Length of output: 51
🏁 Script executed:
# Read the actual file to see full context
cat -n packages/ui/src/components/MegaMenu/theme.ts | head -30Repository: themesberg/flowbite-react
Length of output: 1322
🏁 Script executed:
# Search for important modifiers more broadly without file type restrictions
rg '\s![a-z0-9-]+\s' packages/ui/src/ || echo "No prefix important modifiers found"
rg '[a-z0-9-]+!' packages/ui/src/ || echo "No postfix important modifiers found"Repository: themesberg/flowbite-react
Length of output: 5229
🏁 Script executed:
# Check if there's a tsconfig or build config in the packages/ui directory
cat -n packages/ui/package.json | head -50Repository: themesberg/flowbite-react
Length of output: 1648
🏁 Script executed:
# Check for monorepo lockfiles at the root
ls -la | grep -E "(pnpm-lock|yarn.lock|package-lock)" | head -5
cat pnpm-lock.yaml 2>/dev/null | grep -A 5 "tailwindcss:" | head -20 || \
cat yarn.lock 2>/dev/null | grep -A 5 "tailwindcss@" | head -20 || \
cat package-lock.json 2>/dev/null | jq '.packages["node_modules/tailwindcss"] | {version}' || \
echo "No standard lockfile found at root"Repository: themesberg/flowbite-react
Length of output: 51
🏁 Script executed:
# Check if tailwind.config exists and what it references
find . -maxdepth 3 -name "tailwind.config.*" -type f | head -5Repository: themesberg/flowbite-react
Length of output: 170
🏁 Script executed:
# Search for any v4-specific syntax or compatibility flags in config/build
rg -i "version\s*['\"]4" packages/ui/src/ --max-count=3 || echo "No v4 references found"Repository: themesberg/flowbite-react
Length of output: 91
🏁 Script executed:
cat packages/ui/tailwind.config.cjsRepository: themesberg/flowbite-react
Length of output: 258
🏁 Script executed:
cat tailwind.config.cjs 2>/dev/null || echo "No root config"Repository: themesberg/flowbite-react
Length of output: 83
🏁 Script executed:
# Check if there's a pnpm-lock.yaml to see actual resolved versions
head -200 pnpm-lock.yaml | grep -A 3 "tailwindcss"Repository: themesberg/flowbite-react
Length of output: 142
🏁 Script executed:
# Find CI configuration to see if v4 is tested
find . -name ".github" -o -name ".gitlab-ci.yml" -o -name "*.yml" -o -name "*.yaml" -type f | grep -E "(workflow|ci|test)" | head -10Repository: themesberg/flowbite-react
Length of output: 127
🏁 Script executed:
# Check for any v4 compatibility handling in the code
rg "tailwindcss.*4|v4|version.*4" packages/ui/ -iRepository: themesberg/flowbite-react
Length of output: 11290
🏁 Script executed:
# List root directory to understand monorepo structure
ls -la | head -30Repository: themesberg/flowbite-react
Length of output: 1128
🏁 Script executed:
cat packages/ui/src/helpers/convert-utilities-to-v4.tsRepository: themesberg/flowbite-react
Length of output: 2033
🏁 Script executed:
# Check if the convert function handles important modifiers
rg "!" packages/ui/src/helpers/convert-utilities-to-v4.ts -A 2 -B 2Repository: themesberg/flowbite-react
Length of output: 201
🏁 Script executed:
# Check where convertUtilitiesToV4 is called
rg "convertUtilitiesToV4" packages/ui/src/ -B 2 -A 2Repository: themesberg/flowbite-react
Length of output: 10443
🏁 Script executed:
# Check if theme strings from MegaMenu go through this conversion
grep -n "dropdownTheme\|megaMenuTheme" packages/ui/src/helpers/resolve-theme.ts -A 3 -B 3Repository: themesberg/flowbite-react
Length of output: 51
🏁 Script executed:
# Check the full resolve-theme.ts to understand how themes are converted
cat packages/ui/src/helpers/resolve-theme.ts | head -80Repository: themesberg/flowbite-react
Length of output: 3602
🏁 Script executed:
# Test if the conversion function would preserve !ml-0
cd packages/ui && npm test -- convert-utilities-to-v4.test 2>/dev/null || echo "Tests not directly runnable"Repository: themesberg/flowbite-react
Length of output: 206
🏁 Script executed:
# Check if there's any handling for important modifiers in the codebase
rg "important|!\w+|ml-0!" packages/ui/src/helpers/ -iRepository: themesberg/flowbite-react
Length of output: 2543
Important modifier syntax !ml-0 will fail in Tailwind v4
This library supports both Tailwind v3 and v4. When v4 is used, theme class strings are converted via convertUtilitiesToV4(), but that function does not handle important modifier syntax. The v3 prefix syntax !ml-0 is invalid in v4 (which requires ml-0!), and the current conversion system will leave it unchanged, causing the margin override to be silently ignored.
Fix by updating the string to v4-compatible syntax:
Suggested fix
- base: twMerge(dropdownTheme.floating.base, "!ml-0 mt-2 block"),
+ base: twMerge(dropdownTheme.floating.base, "ml-0! mt-2 block"),Note: This affects other theme files too (e.g., drag-scroll.tsx uses !overflow-x-hidden). Consider updating the convertUtilitiesToV4() helper to handle important modifier conversion system-wide.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| base: twMerge(dropdownTheme.floating.base, "!ml-0 mt-2 block"), | |
| base: twMerge(dropdownTheme.floating.base, "ml-0! mt-2 block"), |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/ui/src/components/MegaMenu/theme.ts` at line 15, The theme string
uses v3 important-prefix syntax "!ml-0" in the expression base:
twMerge(dropdownTheme.floating.base, "!ml-0 mt-2 block"), which will be left
unchanged by convertUtilitiesToV4() and fail under Tailwind v4; change the class
to the v4-compatible important-suffix form "ml-0!" (i.e., update the string
passed into twMerge) and also audit other theme files (e.g., drag-scroll.tsx) or
enhance the convertUtilitiesToV4() helper to translate v3 "!..." prefixes into
v4 "...!" suffixes so important modifiers are handled globally.
1 participant
Summary
I am submitting this PR to fix some styling issues in the MegaMenu component.
Summarize the changes made and the motivation behind them.
Regarding #1610, I noticed the UI discrepancies mentioned there. While I'm not entirely sure if my findings perfectly align with the reporter's case, the styling seems related. I have attached screenshots below to show the specific areas I've addressed.
Screenshot
Before
After
Change
!ml-0fordropdown.toggle.floating.basein/packages/ui/src/components/MegaMenu/theme.tsto prevent unwanted margin-left.Summary by CodeRabbit