Skip to content

Mobile layout breaks on small screens due to horizontal overflow on SW360 homepage #178

@ADITYA-CODE-SOURCE

Description

@ADITYA-CODE-SOURCE

🚨 Bug: Mobile Responsive Layout Break

Observed Behavior
When browsing the SW360 homepage in narrow screen widths (e.g., mobile phone / 320px width),
the top hero section overflows horizontally, resulting in a white space on the right
side of the screen.

This makes the site layout look broken on mobile devices and introduces horizontal
scroll, harming usability.

Steps to Reproduce

  1. Open https://eclipse.dev/sw360/ in Chrome or any browser
  2. Open DevTools (F12) → Toggle device toolbar (mobile view)
  3. Set width to a small screen size like 320px
  4. Observe that the hero section is wider than the viewport and pushes content right

Expected Behavior
The header and hero layout should adapt to small screens without horizontal overflow.
No white blank area should be visible on the right.

Actual Behavior
There is visible extra white space on the right side of the viewport,
and the layout content isn’t scaled responsively.

Screenshots

Image

Possible Cause
The hero background or a container element seems to be fixed width or not fully
responsive. Applying CSS fixes such as max-width: 100%, overflow-x: hidden
or adjusting the layout container may fix it.

Environment

  • Tested in Chrome DevTools mobile mode (320px)
  • SW360 website homepage
  • Also reproducible on real mobile devices with similar viewport widths

Scope

This issue is limited to the SW360 public website homepage
and does not affect the main SW360 application UI.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions