Align Orbit UI spacing, radius, Quickstart, and query editor actions
What does this MR do and why?
A design review of the GitLab Orbit UI asked for these fixes, so that every Orbit page follows the same Pajamas rules.
| Area | Change |
|---|---|
| Off page | The intro text under the title is smaller. |
| Overview globe, light theme | The stars show: the same count as in the dark theme (8,000), about twice the dark-theme size, in a darker color. On a light globe, the dark-theme size is too small to see on a high-density screen. |
| Section headings | "Groups", "How your data connects", "Query your graph with GQL", and "Quickstart" have the same size and spacing on every tab. |
| Group tables | All cells are vertically centered, the checkboxes too. |
| Corner radius | Cards and page regions use xl, form controls lg, and child elements md, as the Pajamas border guidance says. |
| Page header | The title and the buttons share one center line, and Settings is the last button. |
| Quickstart | Quickstart is a low-emphasis toggle with a chevron that shows if the box is open. It is the only control for the box. Before, it looked like a call to action that opens another page, and the box had its own close button. |
| Admin health card | The version text is centered on the card title. |
| Query editor | Run query is at the bottom right of the editor, where people expect it, with its keyboard hint. GitLab Duo has one Write it with GitLab Duo button next to Query reference, as on other GitLab pages. It opens GitLab Duo Chat with a prompt to help write the query, like the old Generate button did. Before, Generate sat where people expected Run query. |
References
None. The feedback came from a design review.
Screenshots or screen recordings
| Before | After | |
|---|---|---|
| Overview, light theme | ![]() |
![]() |
| Quickstart closed | ![]() |
![]() |
| Schema | ![]() |
![]() |
| Query editor, actions | ![]() |
![]() |
| Query editor, GitLab Duo open | ![]() |
|
| Query editor, heading | ![]() |
![]() |
| Status | ![]() |
![]() |
| Status table | ![]() |
![]() |
Narrow widths (375 px and the md breakpoint, 768 px):
| 375 px | 768 px | |
|---|---|---|
| Overview header and Quickstart | ![]() |
![]() |
| Query editor header and footer | ![]() |
![]() |
Light and dark globe at full zoom-in, same camera position:
Quickstart toggle (open, closed, open):
Admin page before the change: the trial card, the settings card, and the health card had different corner radii, and the version text sat above the title line. I have no after screenshot, because the admin page is only on GitLab Self-Managed and my GDK runs in SaaS mode.
| Admin page | Health card |
|---|---|
![]() |
![]() |
How to set up and validate locally
- With a group that has GitLab Orbit on, go to Your work > GitLab Orbit.
- Select Quickstart to close and open the box.
- Switch to the light theme and look at the stars on the globe.
- Open the Schema, Query editor, and Status tabs, and compare the headings and the table rows.
- On the Query editor tab, select Write it with GitLab Duo. GitLab Duo Chat opens and asks what you want to find.
- On GitLab Self-Managed, go to Admin > GitLab Orbit and compare the card corners and the health card.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.





















