Skip to content

Fix AI chat button overlapping with scroll-to-top button #158

@xliry

Description

@xliry

Bug: AI Chat and Scroll-to-Top Buttons Overlapping

The AI chat button and the scroll-to-top button are stacked on top of each other, making the AI chat button unclickable.

Problem

  • Both buttons are positioned in the same bottom-right corner (likely both using fixed bottom-4 right-4 or similar)
  • The scroll-to-top button sits ON TOP of the AI chat button
  • Users cannot click the AI chat button because it's covered

Fix

  • Separate the two buttons vertically so they don't overlap
  • Option A: Stack them with spacing — scroll-to-top above AI chat (e.g., bottom-20 right-4 for scroll-to-top, bottom-4 right-4 for AI chat)
  • Option B: Place them on different sides (scroll-to-top bottom-right, AI chat bottom-left or vice versa)
  • Ensure proper z-index so both buttons are clickable
  • Both buttons should be visible and accessible on mobile too

Files to check

  • Search for scroll-to-top / back-to-top component in ~/bosphorusIre/
  • Search for AI chat widget/button component
  • Check their CSS positioning (fixed, absolute, z-index)

Acceptance

  • Both buttons visible and clickable without overlap
  • AI chat opens correctly when clicked
  • Scroll-to-top still works
  • Looks clean on both desktop and mobile

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions