authgear / authgear/authgear-server

Need more consistent portal width

Open
#1,835 0 comments 0 reactions 0 assignees View on GitHub
ui/must
Dominant language
Go
Stars
2k
Forks
125
Avg merge
2d 17h
Merged PRs (30d)
32

Description

Currently, the width of the portal is not consistent and doesn't really make sense. Here are a few examples:

1. The width is a bit too long (e.g. Billing Page)
![billing](https://user-images.githubusercontent.com/387241/155675901-597f313f-c525-49c9-8716-18cf91d447ab.jpg)
2. The width is too narrow (e.g. Webhooks)
![webhooks](https://user-images.githubusercontent.com/387241/155675990-14f80c12-a4d0-40fc-ad13-0f3ecd4ce52b.jpg)
3. The width is longer then 2, shorter than 2 (e.g. Admin API)
![adminapi](https://user-images.githubusercontent.com/387241/155676091-4342927f-cc17-462e-a164-6ec29c7195cf.jpg)

I think it is okay to have different width, but we should have some consistency and fix as follows:
1. For really wide pages (Billing Page, Standard/Custom Attributes), consider having a shorter min-width and responsive if the screen is wider?
2. For pages with dropdown at top right (UI Settings, Localization, ), the top right dropdown should align with the right position of panel, **don't** overlap outside the pane
3. For pages that would looks better if longer (Webhooks, Applications), have a wider width like Admin API?

Contributor guide

Open the contributing guide

Research direction

Compare the portal layouts for Billing, Standard/Custom Attributes, UI Settings, Localization, Webhooks, Applications, and Admin API, focusing first on their current panel widths and top-right dropdown placement. Done means the affected pages use a consistent responsive width approach, with dropdowns aligned inside their panels and wider layouts where the content needs them.

Written by the indexing model from the issue text.

Assessment

Domain
design, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.