Feat: Left & Right Navigation Icons Overlap Scrollable Category Items

[suryaprakash0010]

🚀 Is this issue related to a problem?

• Problem:
  In the horizontal category navigation bar (Trending, Apartments, Houses, Villas, etc.), the left and right arrow icons are overlapping the category items.
  As a result:

  • The first and last items are partially hidden
  • Click/tap interactions on those items become difficult
  • The UI looks cramped and misaligned

This is especially noticeable when scrolling categories left or right.

---

💡 Expected Behavior

• The left and right navigation icons should not overlap the scrollable content

• Category items should be:

  • Fully visible
  • Clickable without obstruction

• Navigation arrows should appear outside the scrollable container or reserve proper spacing

---

❌ Actual Behavior

• Left arrow overlaps Trending
• Right arrow overlaps Tiny homes
• Icons sit on top of content instead of beside it
• Content visibility and usability are affected

---

💡 Proposed Solution

• Move left and right navigation icons outside the scrollable list container

• OR add:

  • Proper padding-left and padding-right to the scroll container
  • So items do not go beneath the arrows

• Ensure:

  • Arrows are vertically centered
  • Scroll items align correctly across screen sizes

Technical Notes (optional)

• Likely CSS issue related to:

  • position: absolute
  • Missing padding/margin on scroll container

• Possible fixes:

  • Wrap arrows in a separate container
  • Use overflow-x: auto with padding
  • Adjust z-index so arrows don’t block content

---

🔍 Alternatives Considered

1. Hide arrows completely

   • Reduces discoverability of horizontal scroll
   • Poor UX for desktop users

2. Overlay arrows with opacity

   • Still blocks clicks
   • Visual clutter remains

---

📐 Mockups & Examples

• Attached screenshot showing overlap issue
• Optional fixed mockup with arrows outside container

Similar implementations:

• Airbnb category scroller
• Google horizontal filter bars

---

🧩 Potential Impact

• Target Users:

  • All users browsing property categories

• Value:

  • Improved usability
  • Cleaner and more professional UI
  • Prevents accidental misclicks
  • Better accessibility

---

🌱 Additional Context

• Related Components: CategoryNavbar, HorizontalScroller
• Priority: Medium (UI/UX improvement)
• Affected Screens: Desktop (may affect tablet as well)

[Atharvverma1234]

Hello Sir,
I would like to work upon this issue under SWoC26.
Please assign it to me.
Thank you.