fix(web): normalize model detail tabs layout#4938
Open
yyhhyyyyyy wants to merge 1 commit into
Open
Conversation
Contributor
WalkthroughFive feature pages update tab component styling to use responsive group-based height variants and improve layout handling. Dashboard, models, profile settings, and usage-logs swap static height classes for responsive ChangesTab UI Responsive Styling
🎯 2 (Simple) | ⏱️ ~8 minutes
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsGit: Failed to clone repository. Please run the 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@web/default/src/features/pricing/components/model-details.tsx`:
- Line 923: The Tabs component currently emits data-orientation which doesn't
match the Tailwind selectors; update the Tabs implementation (where props like
orientation are handled) to set data-horizontal="true" when orientation ===
"horizontal" and data-vertical="true" when orientation === "vertical" (or set
both attributes accordingly for backward compatibility) so selectors like
group-data-horizontal/tabs:... and group-data-vertical/tabs:... will match;
ensure this change affects the Tabs root (used by TabsList and related
components such as the TabsList class in model-details.tsx) so all files using
group-data-horizontal/tabs: selectors work.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 39376428-0ac0-48cc-bc48-60689be515cc
📒 Files selected for processing (5)
web/default/src/features/dashboard/index.tsxweb/default/src/features/models/index.tsxweb/default/src/features/pricing/components/model-details.tsxweb/default/src/features/profile/components/profile-settings-card.tsxweb/default/src/features/usage-logs/index.tsx
|
|
||
| <Tabs defaultValue='overview' className='gap-4'> | ||
| <TabsList className='bg-muted/60 h-auto w-full justify-start gap-1 overflow-x-auto rounded-lg p-1'> | ||
| <TabsList className='bg-muted/60 grid w-full grid-cols-3 gap-1 rounded-lg p-1 group-data-horizontal/tabs:h-auto'> |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify Tabs component has group/tabs class and data-horizontal attribute support
echo "=== Searching for Tabs component definition ==="
rg -n -A 20 "export.*Tabs.*=" web/default/src/components/ui/ --type tsx
echo ""
echo "=== Checking for group/tabs class in Tabs component ==="
rg -n "group/tabs" web/default/src/components/ui/ --type tsx
echo ""
echo "=== Checking for data-horizontal attribute ==="
rg -n "data-horizontal" web/default/src/components/ui/ --type tsx
echo ""
echo "=== Verifying TabsList receives orientation context ==="
ast-grep --pattern $'const TabsList = $$$' web/default/src/components/ui/Repository: QuantumNous/new-api
Length of output: 375
🏁 Script executed:
#!/bin/bash
# Find Tabs component files
echo "=== Finding Tabs-related component files ==="
fd -e ts -e tsx "tabs" web/default/src/components/ui/ 2>/dev/null | head -20
echo ""
echo "=== Listing all files in components/ui ==="
ls -la web/default/src/components/ui/ 2>/dev/null | grep -i tabRepository: QuantumNous/new-api
Length of output: 310
🏁 Script executed:
#!/bin/bash
# Search for Tabs component definition without --type flag
echo "=== Searching for Tabs export ==="
rg -n "export.*Tabs" web/default/src/components/ui/ -A 5
echo ""
echo "=== Searching for group/tabs usage in codebase ==="
rg "group/tabs" web/default/src/
echo ""
echo "=== Searching for data-horizontal attribute ==="
rg "data-horizontal" web/default/src/Repository: QuantumNous/new-api
Length of output: 4596
🏁 Script executed:
#!/bin/bash
# Read the actual Tabs component if found
echo "=== Checking tabs.tsx or similar ==="
find web/default/src/components/ui -name "*tabs*" -o -name "*Tabs*" | head -5 | xargs -I {} sh -c 'echo "File: {}"; wc -l {}'Repository: QuantumNous/new-api
Length of output: 187
🏁 Script executed:
#!/bin/bash
# Read the Tabs component implementation
cat -n web/default/src/components/ui/tabs.tsxRepository: QuantumNous/new-api
Length of output: 4965
🏁 Script executed:
#!/bin/bash
# Check Tailwind configuration for custom data attribute handling
echo "=== Looking for tailwind config ==="
find web/default -name "tailwind.config.*" -o -name "tailwind.ts" -o -name "tailwind.js" | head -5
echo ""
echo "=== Checking if there's a cva or class generation for orientation ==="
rg "data-orientation" web/default/src/components/ui/tabs.tsx -B 5 -A 5
echo ""
echo "=== Check for any preprocessor or transformer ==="
rg "data-horizontal|data-vertical" web/default -l | head -10Repository: QuantumNous/new-api
Length of output: 960
🏁 Script executed:
#!/bin/bash
# Search more broadly for tailwind config
echo "=== Find tailwind config files ==="
find web/default -name "*tailwind*" -type f 2>/dev/null
echo ""
echo "=== Check root directory for config ==="
ls -la web/default/*.config.* 2>/dev/null || echo "No config files in root"
echo ""
echo "=== Check package.json for tailwind config location ==="
rg '"tailwind"' web/default/package.json -B 2 -A 2
echo ""
echo "=== Check for CSS files that might contain tailwind directives ==="
find web/default/src -name "*.css" | head -5Repository: QuantumNous/new-api
Length of output: 684
🏁 Script executed:
#!/bin/bash
# Check rsbuild config for Tailwind configuration
echo "=== Reading rsbuild.config.ts ==="
cat -n web/default/rsbuild.config.ts
echo ""
echo "=== Reading postcss.config.mjs ==="
cat web/default/postcss.config.mjs
echo ""
echo "=== Check for Tailwind config in plugin options ==="
rg "tailwind|data-orientation|data-horizontal" web/default/rsbuild.config.tsRepository: QuantumNous/new-api
Length of output: 4058
🏁 Script executed:
#!/bin/bash
# Check if there's a tailwind config in package.json or tsconfig
echo "=== Search package.json for tailwind ==="
rg "tailwind" web/default/package.json -B 2 -A 2
echo ""
echo "=== Check if data-orientation attribute matches Tailwind selectors ==="
rg "`@tailwindcss/postcss`" web/default -r --type json
echo ""
echo "=== Look for tsconfig or other config files ==="
cat -n web/default/tsconfig.json 2>/dev/null | head -30
echo ""
echo "=== Search for any custom Tailwind theme config ==="
rg "theme:|corePlugins:|matchVariant" web/default/src -lRepository: QuantumNous/new-api
Length of output: 2270
🏁 Script executed:
#!/bin/bash
# Search for any custom Tailwind CSS configuration or plugin
echo "=== Check main CSS file ==="
cat web/default/src/styles/index.css
echo ""
echo "=== Check theme CSS ==="
head -50 web/default/src/styles/theme.css
echo ""
echo "=== Look for any `@layer` or theme customization ==="
rg "`@layer`|`@tailwind`|matchVariant" web/default/src/styles/ -A 3Repository: QuantumNous/new-api
Length of output: 16232
🏁 Script executed:
#!/bin/bash
# Check what Base UI Tabs renders - look at node_modules or understand how data-orientation works
echo "=== Check if `@base-ui/react/tabs` might be setting data-horizontal ==="
rg "data-horizontal" web/default/node_modules/@base-ui 2>/dev/null | head -5 || echo "Node modules not available or no match"
echo ""
echo "=== Check actual usage in model-details to understand context ==="
head -100 web/default/src/features/pricing/components/model-details.tsx | tail -50
echo ""
echo "=== Look at lines around 923 in model-details ==="
sed -n '910,935p' web/default/src/features/pricing/components/model-details.tsxRepository: QuantumNous/new-api
Length of output: 3072
🏁 Script executed:
#!/bin/bash
# Verify how other components use data-horizontal/data-vertical
echo "=== Check toggle-group for data-horizontal pattern ==="
head -60 web/default/src/components/ui/toggle-group.tsx | tail -30
echo ""
echo "=== Check slider component ==="
sed -n '1,80p' web/default/src/components/ui/slider.tsx | tail -50Repository: QuantumNous/new-api
Length of output: 2762
🏁 Script executed:
#!/bin/bash
# Check if there's any transformation from data-orientation to data-horizontal
echo "=== Search for any middleware/wrapper that might transform attributes ==="
rg "data-orientation|data-horizontal" web/default/src/lib/ -B 2 -A 2
echo ""
echo "=== Check how toggle-group actual renders in built output ==="
rg -A 10 "ToggleGroupPrimitive" web/default/src/components/ui/toggle-group.tsx | head -30
echo ""
echo "=== Verify Base UI doesn't automatically set data-horizontal ==="
rg "`@base-ui`" web/default/package.jsonRepository: QuantumNous/new-api
Length of output: 1317
🏁 Script executed:
#!/bin/bash
# Final verification: Does Base UI's Tabs primitive automatically transform data-orientation?
echo "=== Check `@base-ui/react/tabs` implementation in node_modules ==="
find web/default/node_modules/@base-ui/react -name "*.d.ts" -path "*/tabs*" 2>/dev/null | head -3 | xargs -I {} sh -c 'echo "=== {} ==="; head -50 {}'
echo ""
echo "=== Look for transform or data attribute handling in TabsPrimitive ==="
rg "data-orientation|data-horizontal" web/default/node_modules/@base-ui 2>/dev/null | head -5Repository: QuantumNous/new-api
Length of output: 200
🏁 Script executed:
#!/bin/bash
# Since we can't access node_modules reliably, let's verify the actual impact
# Check if there are any issues or TODOs related to this
echo "=== Look for any comments about attribute or styling issues ==="
rg "TODO|FIXME|BUG|data-orientation|data-horizontal" web/default/src/components/ui/tabs.tsx
echo ""
echo "=== Count how many places use group-data-horizontal/tabs styling ==="
rg "group-data-horizontal/tabs" web/default/src --count-matches
echo ""
echo "=== Verify the actual attribute that gets rendered ==="
echo "Looking at the Tabs wrapper code again:"
sed -n '23,39p' web/default/src/components/ui/tabs.tsxRepository: QuantumNous/new-api
Length of output: 1673
Fix attribute mismatch: Tabs component sets data-orientation but CSS selectors expect data-horizontal/data-vertical.
The Tabs component correctly applies the group/tabs class for grouping context, but it sets the data-orientation attribute instead of data-horizontal/data-vertical. Tailwind selectors like group-data-horizontal/tabs:h-8 and group-data-vertical/tabs:h-fit won't match because they look for data-horizontal or data-vertical attributes, not data-orientation.
Update the Tabs component to set the appropriate data attribute:
Fix for tabs.tsx
function Tabs({
className,
orientation = 'horizontal',
...props
}: TabsPrimitive.Root.Props) {
return (
<TabsPrimitive.Root
data-slot='tabs'
- data-orientation={orientation}
+ data-horizontal={orientation === 'horizontal'}
+ data-vertical={orientation === 'vertical'}
className={cn(
'group/tabs flex gap-2 data-horizontal:flex-col',
className
)}
{...props}
/>
)
}This affects all five files using group-data-horizontal/tabs: selectors (model-details.tsx lines 923, profile-settings-card.tsx line 239, usage-logs/index.tsx line 145, models/index.tsx line 72, dashboard/index.tsx line 130).
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@web/default/src/features/pricing/components/model-details.tsx` at line 923,
The Tabs component currently emits data-orientation which doesn't match the
Tailwind selectors; update the Tabs implementation (where props like orientation
are handled) to set data-horizontal="true" when orientation === "horizontal" and
data-vertical="true" when orientation === "vertical" (or set both attributes
accordingly for backward compatibility) so selectors like
group-data-horizontal/tabs:... and group-data-vertical/tabs:... will match;
ensure this change affects the Tabs root (used by TabsList and related
components such as the TabsList class in model-details.tsx) so all files using
group-data-horizontal/tabs: selectors work.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Important
📝 变更描述 / Description
(简述：做了什么？为什么这样改能生效？请基于你对代码逻辑的理解来写，避免粘贴未经整理的内容)
修复模型详情页 Tabs 使用满宽 flex 滚动容器导致的布局异常，改为 grid 三等分并使用方向态高度覆盖，避免撑高或出现滚动条。
🚀 变更类型 / Type of change
🔗 关联任务 / Related Issue
✅ 提交前检查项 / Checklist
Bug fix，我已提交或关联对应 Issue，且不会将设计取舍、预期不一致或理解偏差直接归类为 bug。📸 运行证明 / Proof of Work
(请在此粘贴截图、关键日志或测试报告，以证明变更生效)
未修改前：
修改后：
Summary by CodeRabbit