Skip to content

fix(MegaMenu): fix MegaMenuDropdown position #1666

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Perajit wants to merge 1 commit into
base: main
Choose a base branch
from
+1 −1
Open

fix(MegaMenu): fix MegaMenuDropdown position #1666

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/ui/src/components/MegaMenu/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const megaMenuTheme = createTheme<MegaMenuTheme>({
...dropdownTheme,
floating: {
...dropdownTheme.floating,
base: twMerge(dropdownTheme.floating.base, "mt-2 block"),
base: twMerge(dropdownTheme.floating.base, "!ml-0 mt-2 block"),
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 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-]+!' -C1

Repository: 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 -30

Repository: 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 -50

Repository: 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 -5

Repository: 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.cjs

Repository: 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 -10

Repository: 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/ -i

Repository: themesberg/flowbite-react

Length of output: 11290

🏁 Script executed:

# List root directory to understand monorepo structure
ls -la | head -30

Repository: themesberg/flowbite-react

Length of output: 1128

🏁 Script executed:

cat packages/ui/src/helpers/convert-utilities-to-v4.ts

Repository: 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 2

Repository: themesberg/flowbite-react

Length of output: 201

🏁 Script executed:

# Check where convertUtilitiesToV4 is called
rg "convertUtilitiesToV4" packages/ui/src/ -B 2 -A 2

Repository: 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 3

Repository: 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 -80

Repository: 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/ -i

Repository: 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.

Suggested change
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.

content: twMerge(dropdownTheme.floating.content, "text-gray-500 dark:text-gray-400"),
style: {
...dropdownTheme.floating.style,
Expand Down
Loading