Fix desktop mode: lock card-body to 364px and scale template content#46
Conversation
In Desktop mode, set .platform-desktop .card-body to a fixed height of 364px with overflow:hidden so all 7 templates respect the layout math (77+70+364+52+77=640px). Add per-template font-size and padding overrides so content fits within the fixed body zone without pushing the footer off-screen. https://claude.ai/code/session_01NEbt6KjVPvt3o5jFVgCgCv
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 4 minutes and 18 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ✨ 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 |
AI Analysis SummaryThe CSS changes introduce new styles for desktop mode, affecting the layout and design of the templates. The changes seem to be intentional and part of the design update. No action is required, but it's essential to review the changes to ensure they meet the design requirements. Severity: Full details: #47 |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 15c38157a2
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| } | ||
|
|
||
| /* Timeline in desktop */ | ||
| .platform-desktop .template-timeline .card-body { |
There was a problem hiding this comment.
The desktop template-specific rules are written as descendant selectors (for example .platform-desktop .template-timeline .card-body), but platform-desktop and template-* are both applied to the same .card element in applyTemplate/applyPlatform, so these selectors never match. As a result, all per-template desktop scaling for Timeline/Spotlight/Minimal/Compact/Terminal/Masonry is ignored and only the generic .platform-desktop rules take effect, which reintroduces the overflow/layout issues this commit is trying to fix.
Useful? React with 👍 / 👎.
…late overrides .platform-desktop and .template-* are both applied to the same .card element, so .platform-desktop .template-timeline .card-body (descendant) never matches. Replace all template-specific desktop selectors with compound form .platform-desktop.template-timeline .card-body so overrides actually apply. https://claude.ai/code/session_01NEbt6KjVPvt3o5jFVgCgCv
2 participants
Summary
.platform-desktop .card-body { flex: none; height: 364px; overflow: hidden; }to enforce the fixed layout math (77 + 70 + 364 + 52 + 77 = 640px) in Desktop mode for all 7 templates..platform-desktopso content fits within the 364px body zone without pushing the footer off-screen (Grid, Timeline, Spotlight, Minimal, Compact, Terminal, Masonry).Test plan
https://claude.ai/code/session_01NEbt6KjVPvt3o5jFVgCgCv