Skip to content

OnlineCountBadge should float bottom-left consistently, like FeedbackWidget does bottom-right #766

Description

@gaidheal1

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    Status
    In progress

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions