Summary
OnlineCountBadge and FeedbackWidget are both mounted globally in AppContent.tsx (lines 65-69) as fixed-position widgets — bottom-left and bottom-right respectively — but their positioning isn't actually consistent with each other.
FeedbackWidget (FeedbackWidget.module.scss:8-12) stays pinned at a constant offset on every screen size:
.feedbackWidget {
position: fixed;
bottom: 1rem;
right: 1rem;
z-index: v.$z-index-dropdown;
}
OnlineCountBadge (OnlineCountBadge.module.scss:8-26) starts the same way but then jumps its bottom offset at smaller breakpoints:
.badge {
position: fixed;
left: 1rem;
bottom: 1rem;
z-index: v.$z-index-dropdown;
...
@include mix.respond-to(md, down) {
bottom: 8rem;
}
@include mix.respond-to(sm, down) {
bottom: 9rem;
}
}
So on medium/small viewports the badge floats much higher up the screen instead of staying anchored to the bottom-left corner the way FeedbackWidget stays anchored to the bottom-right at every size.
Requested change
Make OnlineCountBadge float bottom-left consistently at all viewport sizes, matching FeedbackWidget's simple always-bottom-right behavior — i.e. remove (or otherwise reconcile) the md/sm breakpoint overrides in OnlineCountBadge.module.scss so the offset doesn't change across screen sizes.
Caution for whoever picks this up
There's currently no obvious other fixed-position element (no bottom mobile nav bar found) that the 8rem/9rem bump would be dodging, but double-check on actual small-viewport pages (including any with StaticBanner active) that removing the override doesn't reintroduce an overlap the original author was avoiding — if it was intentional, it should be documented instead of just deleted.
Scope
Single SCSS file change, easy to verify visually across breakpoints — good first issue.
Summary
OnlineCountBadgeandFeedbackWidgetare both mounted globally inAppContent.tsx(lines 65-69) as fixed-position widgets — bottom-left and bottom-right respectively — but their positioning isn't actually consistent with each other.FeedbackWidget(FeedbackWidget.module.scss:8-12) stays pinned at a constant offset on every screen size:OnlineCountBadge(OnlineCountBadge.module.scss:8-26) starts the same way but then jumps itsbottomoffset at smaller breakpoints:So on medium/small viewports the badge floats much higher up the screen instead of staying anchored to the bottom-left corner the way
FeedbackWidgetstays anchored to the bottom-right at every size.Requested change
Make
OnlineCountBadgefloat bottom-left consistently at all viewport sizes, matchingFeedbackWidget's simple always-bottom-right behavior — i.e. remove (or otherwise reconcile) themd/smbreakpoint overrides inOnlineCountBadge.module.scssso the offset doesn't change across screen sizes.Caution for whoever picks this up
There's currently no obvious other fixed-position element (no bottom mobile nav bar found) that the 8rem/9rem bump would be dodging, but double-check on actual small-viewport pages (including any with
StaticBanneractive) that removing the override doesn't reintroduce an overlap the original author was avoiding — if it was intentional, it should be documented instead of just deleted.Scope
Single SCSS file change, easy to verify visually across breakpoints — good first issue.