#1061 Fix footnote being shifted to the right#1072
Conversation
|
Warning Review limit reached
Next review available in: 56 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe rendered footnote stack in ChangesFootnote Alignment
Estimated code review effort: 1 (Trivial) | ~2 minutes Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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 |
benpaj-cps
changed the title
![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)
src/lib/styles/app.css (1)
156-156: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winConfigure Stylelint to recognize Tailwind’s
@utilitydirective.Stylelint currently reports
scss/at-rule-no-unknownon this line. If CSS linting is blocking, this change can fail CI even though@utilityis valid Tailwind CSS v4 syntax. (tailwindcss.com)Add
utilityto the rule’s allowed at-rules or use a Tailwind-aware Stylelint configuration.🤖 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 `@src/lib/styles/app.css` at line 156, Update the Stylelint configuration for scss/at-rule-no-unknown to recognize Tailwind CSS v4’s utility at-rule by adding utility to its allowed at-rules, or apply the project’s Tailwind-aware configuration. Keep the existing lint rules unchanged otherwise.Source: Linters/SAST tools
🤖 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 `@src/lib/styles/app.css`:
- Around line 156-159: Update the dy-stack utility in the app stylesheet to
include display: grid alongside its existing place-items and align-items
declarations, ensuring the footnotes wrapper applies those alignment properties.
---
Nitpick comments:
In `@src/lib/styles/app.css`:
- Line 156: Update the Stylelint configuration for scss/at-rule-no-unknown to
recognize Tailwind CSS v4’s utility at-rule by adding utility to its allowed
at-rules, or apply the project’s Tailwind-aware configuration. Keep the existing
lint rules unchanged otherwise.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
| @utility dy-stack { | ||
| place-items: center; | ||
| align-items: flex-end; | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
rg -n -C3 'dy-stack|display:\s*(grid|flex)' \
src/lib/styles/app.css \
src/lib/components/StackView.svelteRepository: sillsdev/appbuilder-pwa
Length of output: 1932
🏁 Script executed:
#!/bin/bash
sed -n '100,170p' src/lib/styles/app.css
printf '\n----\n'
sed -n '100,140p' src/lib/components/StackView.svelte
printf '\n----\n'
rg -n '`@utility` dy-|display:\s*(grid|flex)' src/lib/styles/app.cssRepository: sillsdev/appbuilder-pwa
Length of output: 3515
Add display: grid to src/lib/styles/app.css:156-159. dy-stack is applied to the footnotes wrapper, but place-items and align-items need a grid or flex container to take effect.
🧰 Tools
🪛 Stylelint (17.14.0)
[error] 156-156: Unexpected unknown at-rule "@utility" (scss/at-rule-no-unknown)
(scss/at-rule-no-unknown)
🤖 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 `@src/lib/styles/app.css` around lines 156 - 159, Update the dy-stack utility
in the app stylesheet to include display: grid alongside its existing
place-items and align-items declarations, ensuring the footnotes wrapper applies
those alignment properties.
There was a problem hiding this comment.
@benpaj-cps I looked at this. I see in the text route that the is a container div with flex. Should that be inside the StackView and have the appropriate tailwind equivalent classes applied?
There was a problem hiding this comment.
Done. That's probably the better way to do it, since after a quick grep the StackView is the only place in the PWA that dy-stack is used.
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
github-project-automation
Bot
moved this to Todo
in 2026 Summer Associate Developers - App Builders
benpaj-cps
moved this from Todo
to In review
in 2026 Summer Associate Developers - App Builders
f7373a3 to
4690a97
Compare
|
@chrisvire A minor style difference: v4 DaisyUI applies custom scaling to successive children of the top-of-stack container, while v5 doesn't. Is it worth porting the scaling rules to keep the look, or is this not an issue? Before: After: |
|
Remove the flex div from the route/text/+page.svelte and we should be good to go. As for the minor style difference between DaisyUI v4 and v5, I think it is fine how it is. If I remember correctly, there was some concern on smaller phones if there was too big a stack that this effect could cause problems. So it is probably better to leave it out. |
github-project-automation
Bot
moved this from In review
to Done
in 2026 Summer Associate Developers - App Builders
2 participants
Closes #1061.
DaisyUI stacks after v5 don't have these styles by default, so I re-added them in the
app.css.Before:
After:
Summary by CodeRabbit