Design pattern: Define page widths

Determine whether all pages should use limit-container-width or define when it should and should not be used. Applies to page breadcrumb and content.

Overview of currently assigned page container widths attached.

Legend

| Icon | Meaning | | --- | --- | --- | | ✅ | Correct | | ⚠️ | Potential improvement | | 🛑 | Requires change |

Custom containers

Page Path Width review Status
Projects
Project/Cycle Analytics /cycle_analytics 🛑 set to 990px
CI-CD/Jobs/View /jobs/{id} 🛑 set to full-width
Admin Area
Overview/ConDev Index /admin/conversational_development_index 🛑 set to 1280px
Instance Statistics
ConvDev Index /stats/conv-dev? 🛑 set to 1280px (with padding)

990px

Page Path Width review Status
Projects
Project/Details (with repository or wiki enabled) / ✅
Project/Details (with just issues enabled) / ⚠️ enlarge to 1280px
Project/Files /tree ✅
Repository/Commits/View /commits/{sha} ✅
Issues/View /issues/{id} ✅
Merge requests/View /merge_requests/{id} ✅
Wiki (page created) wikis/home ✅
Wiki/New /wikis/*?view=create ✅
Wiki/Edit /wikis/*/edit ✅
Settings/(General, Integrations, Repository, and CI/CD) /[edit OR [settings/[integrations OR repository OR ci_cd]]] ✅
Groups
Epics/View /epics/{id} ✅
User-related
All Settings but Billing /profile/*[!billing] ✅
Admin Area
Settings /admin/application_settings ✅

1280px

Page Path Width review Status
Projects
Project/Activity /activity ✅
Project/Security Dashboard /security/dashboard
Repository/Fork /forks/new ✅
Repository/Blob /blob/* ⚠️ reduce to 990px ☑️
Repository/Blame /blame/* ✅
Repository/New OR Edit file /[new OR edit/*] ⚠️ reduce to 990px ☑️
Repository/Find file /find_file/* ⚠️ reduce to 990px ☑️
Repository/Commits /commits ⚠️ reduce to 990px ☑️
Repository/Branches /branches ⚠️ reduce to 990px ☑️
Repository/Branches/New /branches/new ⚠️ reduce to 990px ☑️
Repository/Tags /tags ⚠️ reduce to 990px ☑️
Repository/Tag /tags/* ⚠️ reduce to 990px ☑️
Repository/Tags/New OR Edit OR View /tags/[new OR {id} OR {id}/release/edit] ⚠️ reduce to 990px ☑️
Repository/Contributors /graphs ✅
Repository/Graph /network ⚠️ make full-width ☑️
Repository/Compare /compare ⚠️ reduce to 990px ☑️
Repository/Compare/* /compare/* ✅
Repository/Charts /graphs/*/charts ✅
Repository/File lock /path_locks ⚠️ reduce to 990px
Issues/New /issues/new ⚠️ reduce to 990px ☑️
Issues/Edit /issues/?? ⚠️ reduce to 990px ☑️
Issues/List /issues ✅ ☑️
Issues/Labels /labels ✅
Issues/Labels/New OR Edit /labels/[new OR {id}/edit] ⚠️ reduce to 990px
Issues/Service Desk /service_desk ✅
Issues/Milestones /milestones ✅
Issues/Milestones/New OR Edit /milestones/[new OR {id}/edit] ✅
Issues/Milestones/View /milestones/{id} ⚠️ reduce to 990px
Merge requests /merge_requests ✅ ☑️
Merge requests/New OR Edit /merge_requests/new OR {id}/edit ⚠️ reduce to 990px ☑️
CI-CD/Pipelines (List and view) /pipelines ✅
CI-CD/Pipelines/Run pipeline /pipelines/new ⚠️ reduce to 990px
CI-CD/Pipelines/CI Lint /ci/lint ⚠️ reduce to 990px
CI-CD/Jobs /jobs ✅
CI-CD/Jobs/View/Browse artifacts /jobs/{id}/artifacts/browse ⚠️ reduce to 990px
CI-CD/Schedules /pipeline_schedules ⚠️ reduce to 990px
CI-CD/Schedules/New /pipeline_schedules/new ⚠️ reduce to 990px
CI-CD/Charts /pipelines/charts ✅
Operations/Environment /environments ✅
Operations/Environment/New /environments/new ⚠️ reduce to 990px
Operations/Kubernetes (Empty state and list) /clusters ⚠️ reduce to 990px
Operations/Kubernetes/New /clusters/new ⚠️ reduce to 990px
Operations/Kubernetes/Create cluster on GKE /clusters/providers/gcp/* ⚠️ reduce to 990px
Operations/Kubernetes/Add an existing cluster /clusters/providers/user/* ⚠️ reduce to 990px
Registry /container_registry ⚠️ reduce to 990px
Wiki (empty) /wikis/* ⚠️ reduce to 990px ☑️
Wiki/History /wikis/*/history ⚠️ reduce to 990px ☑️
Wiki/Pages /wikis/pages ⚠️ reduce to 990px
Snippets /snippets ⚠️ reduce to 990px ☑️
Snippets/New /snippets/new ⚠️ reduce to 990px ☑️
Snippets/Edit /snippets/edit ⚠️ reduce to 990px ☑️
Members /project_members ⚠️ reduce to 990px
Members/Import /project_members/import ⚠️ reduce to 990px
Settings/Badges /badges ⚠️ reduce to 990px
Settings/Integrations/Edit webhook /hooks/*/edit ⚠️ reduce to 990px
Settings/Integrations/Edit integration /services/{id}/edit ✅
Settings/Repository/Edit deploy key /deploy_keys/{id}/edit ⚠️ reduce to 990px
Settings/CI-CD/Runner details /runners/* ⚠️ reduce to 990px
Settings/CI-CD/Edit runner /runners/{id}/edit ⚠️ reduce to 990px
Settings/CI-CD/Edit trigger /triggers/{id}/edit ⚠️ reduce to 990px
Settings/Pages /pages ⚠️ reduce to 990px
Settings/Pages/New domain /pages/domains/new ⚠️ reduce to 990px
Settings/Pages/Edit domain /pages/domains/{id}/edit ⚠️ reduce to 990px
Settings/Pages/Domain details /pages/domains/{id} ⚠️ reduce to 990px
Settings/Audit Events /audit_events ✅
Groups-specific
Overview/Details / ✅
Activity /activity ✅
Contribution Analytics /analytics ✅
Epics/List /epics ✅
Settings/Projects /projects ⚠️ reduce to 990px
Settings/CI-CD /ci_cd ⚠️ reduce to 990px
Settings/Webhooks /hooks ⚠️ reduce to 990px
Settings/Pipeline quota /pipeline_quota ⚠️ reduce to 990px
Settings/Billing /profile/billings ✅
Dashboards
Search /search/* ✅
All dashboard lists /dashboard/[projects OR groups OR activity OR milestones OR snippets OR issues OR merge_requests OR todos]/* ✅
Projects/Import/(First auth step for all importers) /import/*/new ⚠️ reduce to 990px
Projects/Import/(Second list mapping step for all importers) /import/*/status ✅
Projects/Importing… /import ⚠️ reduce to 990px
Snippets/New /snippets/new ⚠️ reduce to 990px
Snippets/Edit /snippets/edit ⚠️ reduce to 990px
User
Profile page /{username} ✅
Settings/Billings /profile/billings ✅
Admin Area
Overview /admin ✅
Overview/Project /admin/projects ✅
Overview/Users /admin/users ⚠️ reduce to 990px
Overview/Groups /admin/groups ✅
Overview/Jobs /admin/jobs ✅
Overview/Runners /admin/runners ⚠️ reduce to 990px
Overview/Cohorts /admin/cohorts ✅
Monitoring/System Info /admin/system_info ✅
Monitoring/Background Jobs /admin/background_jobs ✅
Monitoring/Logs /admin/logs ✅
Monitoring/Health Check /admin/health_check ⚠️ reduce to 990px
Monitoring/Requests Profiles /admin/requests_profiles ⚠️ reduce to 990px
Monitoring/Audit Log /admin/audit_logs ✅
Messages (List/add OR Edit) /admin/broadcast_messages[/{id}/edit] ⚠️ reduce to 990px
System Hooks (List/add OR Edit) /admin/hooks[/{id}/edit] ⚠️ reduce to 990px
Applications (List OR New OR Edit) /admin/applications[/new OR /{id}/edit] ⚠️ reduce to 990px
Abuse Reports /admin/abuse_reports ✅
License /admin/license ✅
Push Rules /admin/push_rule ⚠️ reduce to 990px
Geo Nodes and all child pages /admin/geo_nodes/* ⚠️ reduce to 990px
Deploy Keys and all child pages /admin/deploy_keys/* ⚠️ reduce to 990px
Service Templates/List /admin/application_settings/services ✅
Service Templates/Edit integration /admin/application_settings/services/{id}/edit ⚠️ reduce to 990px
Labels/List /admin/labels ✅
Labels/New OR Edit /admin/labels/[new OR {id}/edit] ⚠️ reduce to 990px
Appearance /admin/appearance ⚠️ reduce to 990px
Instance Statistics
Cohorts /stats/cohorts? ✅
Help /help/* ⚠️ reduce to 990px

Full-width (always fluid)

Page Path Width review Status
Issues/Boards /boards ✅
Epics/Roadmap /roadmap ✅
Edited by Andreas Kämmerle