AOSSIE-Org / AOSSIE-Org/DebateAI

[BUG]: Profile Page Layout Is Not Responsive at Reduced Screen Sizes

Geschlossen
#489 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
bug
Vorherrschende Sprache
TypeScript
Sterne
84
Forks
198
Ø Merge
2 T. 19 Std.
Gemergte PRs (30 T.)
30

Beschreibung

### Bug Description

At the default 100% browser zoom, the Profile page displays correctly. However, when the viewport becomes smaller, such as at 67% browser zoom, some elements retain their original dimensions instead of adapting to the available space.

The main issues observed in all light, dark and high contrast theme are:
The Matches donut chart remains nearly the same size instead of scaling with its container.
The Ratings graph also maintains a fixed size, causing the graph and its surrounding content to become disproportionate.
As a result, the layout becomes crowded and does not make efficient use of the available screen space.

This indicates that parts of the Profile dashboard are relying on fixed dimensions rather than responding properly to changes in the available viewport/container size.

### Steps to Reproduce

Sign in to DebateAI.
Navigate to the Profile section.
Keep the browser zoom at 100% and observe the layout.
Reduce the browser zoom to 67% or use a smaller viewport size.
Observe the Matches chart and Ratings graph.

Expected Behavior
The Profile page should remain responsive across different viewport sizes.

Charts should resize according to their parent container.
The Matches donut chart should scale proportionally.
The Ratings graph should adapt to the available width and height.
No fixed-size element should cause the surrounding layout to become crowded or disproportionate.

Actual Behavior
At reduced viewport sizes, the Matches donut chart and Ratings graph retain dimensions that are too large for their available space. This causes the dashboard layout to become visually disproportionate and reduces the effectiveness of the responsive design.

### Logs and Screenshots

100% Browser Zoom:

Image

67% Browser Zoom:

Image

### Environment Details

_No response_

### Impact

Medium - Feature works but has issues

### Code of Conduct

- [x] I have joined the [Discord server](https://discord.gg/hjUhu33uAn) and will post updates there
- [x] I have searched existing issues to avoid duplicates

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Rechercherichtung

Start at the Profile section and inspect the implementation of the Matches donut chart and Ratings graph, focusing on how each responds to the available viewport and parent container. Reproduce the issue at 67% browser zoom or a smaller viewport, then verify that both charts resize proportionally without crowding the surrounding dashboard in light, dark, and high-contrast themes.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Aktiv
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
55/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.