Add bottom padding to prevent floating help button from obscuring content#609
Add bottom padding to prevent floating help button from obscuring content#609
Conversation
…tent The fixed-position "Get Help" button (bottom-right corner) could overlap and hide content in discussion posts, rubric sidebar, and other pages. Added pb="80px" to the course layout content wrapper, discussion scroll container, and rubric sidebar scroll container so users can always scroll past the floating widget. https://claude.ai/code/session_012tQEji4uZCSLG57K5Q9yT9
WalkthroughThree layout files receive consistent bottom padding adjustments (80px), replacing or supplementing existing vertical padding configurations across course submission, discussion, and main layout components. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 1❌ Failed checks (1 warning)
✅ 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 |
![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
🤖 Fix all issues with AI agents
In `@app/course/`[course_id]/layout.tsx:
- Around line 62-64: The parent course layout's outer Box (rendering children)
redundantly applies pb="80px" while inner scrollable components (e.g., the
discussion layout's inner Box with flex="1" and RubricView) already provide
bottom padding for FloatingHelpRequestWidget; remove the parent's pb="80px" from
the Box around {children} (or replace it with a CSS variable for
bottom-safe-area and apply that variable only in scrollable components) so
padding is only applied by the scroll containers (update the Box instance that
currently has pt="0" ml="0" mr="0" pb="80px" and ensure
FloatingHelpRequestWidget still has room when present).
| <Box pt="0" ml="0" mr="0" pb="80px"> | ||
| {children} | ||
| </Box> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
find app/course -name "layout.tsx" -o -name "layout.ts" | head -20Repository: pawtograder/platform
Length of output: 1150
🏁 Script executed:
rg -n "100dvh|100vh" --type=tsx --type=ts app/course/Repository: pawtograder/platform
Length of output: 91
🏁 Script executed:
find app/course -path "*discussion*" -name "*.tsx" | head -10Repository: pawtograder/platform
Length of output: 639
🏁 Script executed:
find app/course -path "*submissions*" -name "*.tsx" | head -10Repository: pawtograder/platform
Length of output: 965
🏁 Script executed:
cat -n app/course/[course_id]/discussion/layout.tsxRepository: pawtograder/platform
Length of output: 4324
🏁 Script executed:
cat -n app/course/[course_id]/assignments/[assignment_id]/submissions/layout.tsxRepository: pawtograder/platform
Length of output: 2464
🏁 Script executed:
cat -n app/course/[course_id]/layout.tsx | head -70Repository: pawtograder/platform
Length of output: 3096
🏁 Script executed:
rg -n "RubricView" app/course/ -A 5 -B 2Repository: pawtograder/platform
Length of output: 2022
🏁 Script executed:
cat -n app/course/[course_id]/assignments/[assignment_id]/submissions/[submissions_id]/layout.tsx | sed -n '1281,1350p'Repository: pawtograder/platform
Length of output: 3350
🏁 Script executed:
rg -n "return" app/course/[course_id]/assignments/[assignment_id]/submissions/[submissions_id]/layout.tsx | grep -A 20 "1281:"Repository: pawtograder/platform
Length of output: 46
Consider removing redundant bottom padding or consolidating padding approach.
The discussion layout uses a flex-based structure where the outer Box (height="100dvh") acts as a viewport-bound container and the inner Box (flex="1") handles scrolling with its own pb="80px". The parent course layout also applies pb="80px", creating redundancy.
Since the discussion layout's scrollable container already manages its own bottom padding for the FloatingHelpRequestWidget, the parent's pb="80px" may be unnecessary and could cause unexpected spacing on pages that don't scroll internally (like non-thread discussion views).
RubricView has a similar pattern: height="100vh" with pb="80px" for internal scrolling, which is appropriately self-contained.
Consider:
- Removing
pbfrom the parent layout, or - Using a CSS variable to conditionally apply padding only where needed, rather than on the universal wrapper.
🤖 Prompt for AI Agents
In `@app/course/`[course_id]/layout.tsx around lines 62 - 64, The parent course
layout's outer Box (rendering children) redundantly applies pb="80px" while
inner scrollable components (e.g., the discussion layout's inner Box with
flex="1" and RubricView) already provide bottom padding for
FloatingHelpRequestWidget; remove the parent's pb="80px" from the Box around
{children} (or replace it with a CSS variable for bottom-safe-area and apply
that variable only in scrollable components) so padding is only applied by the
scroll containers (update the Box instance that currently has pt="0" ml="0"
mr="0" pb="80px" and ensure FloatingHelpRequestWidget still has room when
present).
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
2 participants
The fixed-position "Get Help" button (bottom-right corner) could overlap
and hide content in discussion posts, rubric sidebar, and other pages.
Added pb="80px" to the course layout content wrapper, discussion scroll
container, and rubric sidebar scroll container so users can always scroll
past the floating widget.
https://claude.ai/code/session_012tQEji4uZCSLG57K5Q9yT9
Summary by CodeRabbit