Shrink app UI to 90% and convert all px to rem (16px browser default) by formfcw · Pull Request #26826 · directus/directus

formfcw · 2026-03-06T12:27:25Z

Scope

Shrink the Directus app UI to 90% of its current size by removing the hardcoded 14px root font-size, switching to the
browser default (16px, WCAG-compliant), and converting all CSS px values to rem.

Conversion formulas:

px → rem: round(px × 0.9) / 16
Existing rem rebase (14px → 16px base): round(rem × 14 × 0.9) / 16
Letter-spacing: em where font-size is known, rem fallback otherwise (no intermediate rounding)

137 commits in 10 groups:

Root font-size (1) — remove 14px root, set browser default + WCAG comment
Rem rebase (20) — one commit per unique rem value, 14px base → 16px base
px → rem (107) — one commit per unique px value, ×0.9 shrink
Breakpoints (1) — SCSS mixins (breakpoint-up/breakpoint-down/breakpoint-only), JS BREAKPOINTS as rem
strings, all media/container queries use mixins
JS layout constants (3) — sidebar/nav-bar defaults, tabular row heights + column widths, v-drawer sidebar (all
×0.9)
Sweep (1) — remaining px → rem conversions (editor styles, lib overrides, catch-all)
Stylelint rule (1) — unit-disallowed-list banning px with ignoreProperties exceptions
Letter-spacing fix (2) — revert incorrect rem conversions back to original px, then convert to em/rem correctly
Content-padding fix (2) — revert fragile cssVar() parsing, replace with getComputedStyle() for resolved px
values
calc() type-safety fix (1) — unitless 0 in var() fallbacks → 0rem for valid calc() addition

Exceptions (kept as px):

border-width, outline-width, outline-offset — hairline rendering
box-shadow — decorative, sub-pixel sensitive
--focus-ring-width, --focus-ring-offset — 2px focus ring
Runtime DOM measurements (tooltip positioning, auto-width, expand transitions, auto-fit text, geometry controls, menu positioning, panel padding, resizable components)

Potential Risks / Drawbacks

Visual regressions in edge cases (complex layouts, third-party lib overrides)
TinyMCE iframe editor styles depend on browser default font-size matching 16px
SplitPanel behavior with shrunk min/max values — panels feel slightly smaller
Breakpoint shrink means responsive layout switches happen at 90% of old viewport widths
ApexCharts fontSize config values converted from px strings to rem strings — verify chart label sizing

Tested Scenarios

Stylelint passes with zero violations (app source)
Unit tests pass (105,942 passing)
Browser zoom at 100%, 125%, 150%
Browser default font-size at 16px, 18px, 20px

Review Notes / Questions

Build: run pnpm build before testing — JS layout constants and breakpoint changes require a rebuild
Groups 8–10 are fix-up commits that revert an incorrect intermediate conversion, then apply the correct one, so
the combined diff shows original → correct (not wrong → correct)
Letter-spacing (5eeb080990): uses em when the element's font-size is determinable (e.g. 0.05em for 9px
context), rem fallback with no intermediate rounding, truncated to 4 decimal places for stylelint
number-max-precision
Content-padding (3637e1a05f): cssVar() + manual string slicing replaced with
getComputedStyle(el).paddingInlineStart which always returns resolved px regardless of declared unit — used in both
private-view-main.vue and v-workspace.vue
calc() fallbacks (d11548f0b0): var(--v-list-item-indent, 0) → var(--v-list-item-indent, 0rem) — unitless 0
is <number> not <length>, silently invalidating the entire calc() and dropping the padding declaration. Same fix
applied to v-badge.vue offset vars. Uses 0rem instead of 0px to avoid triggering the new stylelint px ban.
Breakpoints (be6ef675a1): JS BREAKPOINTS converted to rem strings for VueUse useBreakpoints; new SCSS mixins
replace all hardcoded media/container query values

Checklist

Added or updated tests
Documentation PR created here or not required
OpenAPI package PR created here or not required

Fixes CMS-1920

Remove html { font-size: 14px } so the root font-size defaults to the browser setting (typically 16px). Convert body font-size/line-height to rem/unitless: 0.8125rem / 1.5385. Existing rem values will render larger until rebased in follow-up commits.

… 3px visual]

…l → 5px visual]

…px visual]

…visual]

… 8px visual]

…→ 9px visual]

…0px visual]

…sual → 10px visual]

…→ 11px visual]

…al → 11px visual]

…ual → 12px visual]

…isual]

…l → 14px visual]

…16px visual]

…px visual]

… visual]

…al → 33px visual]

…sual]

…7px visual]

* revert all line-height values to main * convert lh 16px (fs unknown) > round(16*0.9)/16 = 0.875rem * convert lh 18px (fs unknown) > round(18*0.9)/16 = 1rem * convert lh=fs (12px, 18px, 24px) > round(n*0.9)/round(n*0.9) = 1 (unitless) * convert lh 38px / fs 1.9375rem > round(38*0.9)/16 = 2.125 / 1.9375 = 1.0968 (unitless) * convert lh 52px / fs 2.5rem > round(52*0.9)/16 = 2.9375 / 2.5 = 1.175 (unitless) * convert lh 1rem (14px) / fs 0.6875rem > round(14*0.9)/16 = 0.8125 / 0.6875 = 1.1818 (unitless) * convert lh 48px / fs 2.25rem > round(48*0.9)/16 = 2.6875 / 2.25 = 1.1944 (unitless) * convert lh 19px / fs 0.875rem > round(19*0.9)/16 = 1.0625 / 0.875 = 1.2143 (unitless) * convert lh 31px / fs 1.4375rem > round(31*0.9)/16 = 1.75 / 1.4375 = 1.2174 (unitless) * convert lh 52px / fs 2.375rem > round(52*0.9)/16 = 2.9375 / 2.375 = 1.2368 (unitless) * convert lh 28px / fs 1.25rem > round(28*0.9)/16 = 1.5625 / 1.25 = 1.25 (unitless) * convert lh 22px (fs unknown) > round(22*0.9)/16 = 1.25rem * convert lh 46px / fs 2rem > round(46*0.9)/16 = 2.5625 / 2 = 1.2813 (unitless) * convert lh 18px / fs 0.75rem > round(18*0.9)/16 = 1 / 0.75 = 1.3333 (unitless) * convert lh 24px / fs 1rem > round(24*0.9)/16 = 1.375 / 1 = 1.375 (unitless) * convert lh 24px (fs unknown) > round(24*0.9)/16 = 1.375rem * convert lh 20px / fs 0.8125rem > round(20*0.9)/16 = 1.125 / 0.8125 = 1.3846 (unitless) * convert lh 34px / fs 1.375rem > round(34*0.9)/16 = 1.9375 / 1.375 = 1.4091 (unitless) * convert lh 22px / fs 1rem > round(22*0.9)/16 = 1.25 / 0.875 = 1.4286 (unitless) * convert lh 26px / fs 1.125rem > round(26*0.9)/16 = 1.4375 / 1.125 = 1.4375 (unitless) * convert lh 1.25rem (17.5px) / fs 0.6875rem > round(17.5*0.9)/16 = 1 / 0.6875 = 1.4545 (unitless) * convert lh 29px / fs 1.0625rem > round(29*0.9)/16 = 1.625 / 1.0625 = 1.5294 (unitless) * convert lh 22px / fs 0.8125rem > round(22*0.9)/16 = 1.25 / 0.8125 = 1.5385 (unitless) * convert lh 24px / fs 0.875rem > round(24*0.9)/16 = 1.375 / 0.875 = 1.5714 (unitless) * convert lh 32px / fs 1.125rem > round(32*0.9)/16 = 1.8125 / 1.125 = 1.6111 (unitless) * convert lh 20px / fs 0.6875rem > round(20*0.9)/16 = 1.125 / 0.6875 = 1.6364 (unitless) * convert lh 26px / fs 1rem > round(26*0.9)/16 = 1.4375 / 0.875 = 1.6429 (unitless) * convert lh 24px / fs 0.875rem > round(24*0.9)/16 = 1.375 / 0.8125 = 1.6923 (unitless) * convert lh 26px / fs 0.8125rem > round(26*0.9)/16 = 1.4375 / 0.8125 = 1.7692 (unitless) * convert lh 22px / fs 0.75rem > round(22*0.9)/16 = 1.25 / 0.6875 = 1.8182 (unitless) * convert lh 24px / fs 0.8125rem > round(24*0.9)/16 = 1.375 / 0.75 = 1.8333 (unitless) * convert lh 28px / fs 0.8125rem > round(28*0.9)/16 = 1.5625 / 0.8125 = 1.9231 (unitless) * convert lh 34px (fs=inherit) > round(34*0.9)/16 = 1.9375rem * convert lh 2.65rem (37.1px) / fs 1rem > round(37.1*0.9)/16 = 2.0625 / 0.8125 = 2.5385 (unitless) * convert lh 52px (fs=dynamic v-bind) > round(52*0.9)/16 = 2.9375rem * convert em line-heights to unitless (numerically identical) * revert all non-mixin @media breakpoint values to main * convert @media min-height 375px: round(375×0.9) = 338 > 338/16 = 21.125rem * convert @media 400px: round(400×0.9) = 360 > 360/16 = 22.5rem * convert @media 500px: round(500×0.9) = 450 > 450/16 = 28.125rem * convert @media 544px: round(544×0.9) = 490 > 490/16 = 30.625rem * convert @media 600px: round(600×0.9) = 540 > 540/16 = 33.75rem * convert @media 618px: round(618×0.9) = 556 > 556/16 = 34.75rem * convert @media 706px: round(706×0.9) = 635 > 635/16 = 39.6875rem * convert @media 767px: round(767×0.9) = 690 > 690/16 = 43.125rem * convert @media 768px: round(768×0.9) = 691 > 691/16 = 43.1875rem * convert @media 840px: round(840×0.9) = 756 > 756/16 = 47.25rem * convert @media 960px: round(960×0.9) = 864 > 864/16 = 54rem * convert @media 1200px: round(1200×0.9) = 1080 > 1080/16 = 67.5rem * convert @media 1260px: round(1260×0.9) = 1134 > 1134/16 = 70.875rem * convert @media 1330px: round(1330×0.9) = 1197 > 1197/16 = 74.8125rem * convert @media 1512px: round(1512×0.9) = 1361 > 1361/16 = 85.0625rem

…nization

…magic numbers

alvarosabu

LGTM and LGTClaude 🐧

HZooly

Shrink it!

This PR contains the following updates: | Package | Update | Change | |---|---|---| | [directus/directus](https://github.com/directus/directus) | minor | `11.16.1` → `11.17.0` | --- ### Release Notes <details> <summary>directus/directus (directus/directus)</summary> ### [`v11.17.0`](https://github.com/directus/directus/releases/tag/v11.17.0) [Compare Source](directus/directus@v11.16.1...v11.17.0) ##### ⚠️ Potential Breaking Changes **Added support for importing data in the background ([#26914](directus/directus#26914 Imports now automatically time out after 1 hour, with a maximum of 20 running concurrently. These limits can be configured via `IMPORT_TIMEOUT` and `IMPORT_MAX_CONCURRENCY`, respectively. **Improved build times using `tsdown`’s `oxc-transform` ([#26604](directus/directus#26604 Exports previously available from `@directus/types/collab` are now exported directly from `@directus/types` **Shrunk app UI to 90% and converted all px to rem (16px browser default) ([#26826](directus/directus#26826 Potential breaking change: The app UI has been shrunk to 90% of its previous size. Extensions that rely on hardcoded px values or the old 14px root font-size may render incorrectly — all app sizing now uses rem based on the 16px browser default. - **[@directus/api](https://github.com/directus/api)** - Added support for importing data in the background ([#26914](directus/directus#26914) by [@Nitwel](https://github.com/Nitwel)) - **[@directus/types](https://github.com/directus/types)** - Improved build times using `tsdown`’s `oxc-transform` ([#26604](directus/directus#26604) by [@Nitwel](https://github.com/Nitwel)) - **[@directus/specs](https://github.com/directus/specs)** - Updated fast-xml-parser, qs, minimatch, tar, undici, vue-split-panel and flatted dependencies ([#26951](directus/directus#26951) by [@br41nslug](https://github.com/br41nslug)) ##### ✨ New Features & Improvements - **[@directus/app](https://github.com/directus/app)** - Added support for importing data in the background ([#26914](directus/directus#26914) by [@Nitwel](https://github.com/Nitwel)) - Added utility endpoint and UI to generate translations collections and fields. ([#26742](directus/directus#26742) by [@bryantgillespie](https://github.com/bryantgillespie)) - Added deployment provider link on the run detail page, opening deployments directly in Vercel or Netlify dashboards. ([#26888](directus/directus#26888) by [@LZylstra](https://github.com/LZylstra)) - Shrunk app UI to 90% and converted all px to rem (16px browser default) ([#26826](directus/directus#26826) by [@formfcw](https://github.com/formfcw)) - **[@directus/api](https://github.com/directus/api)** - Added tool search tool for Anthropic AI provider to reduce context usage ([#26864](directus/directus#26864) by [@bryantgillespie](https://github.com/bryantgillespie)) - Added support for setting the `secure` attribute on OpenID/OAuth2 cookies via the `AUTH_<PROVIDER>_COOKIE_SECURE` environment variable ([#26628](directus/directus#26628) by [@dstockton](https://github.com/dstockton)) - Updated `FilesService.uploadOne` to support an optional `storage` parameter ([#26882](directus/directus#26882) by [@gaetansenn](https://github.com/gaetansenn)) - Added AI SDK Devtools middleware support for debugging AI Assistant in development only. Added AI telemetry provider ([#26678](directus/directus#26678) by [@bryantgillespie](https://github.com/bryantgillespie)) config for Braintrust and Langfuse, enabling sending traces for observability, usage, and token costs. - Added utility endpoint and UI to generate translations collections and fields. ([#26742](directus/directus#26742) by [@bryantgillespie](https://github.com/bryantgillespie)) - Added support for Redis namespace control ([#26943](directus/directus#26943) by [@dstockton](https://github.com/dstockton)) - **[@directus/errors](https://github.com/directus/errors)** - Added support for importing data in the background ([#26914](directus/directus#26914) by [@Nitwel](https://github.com/Nitwel)) - **[@directus/env](https://github.com/directus/env)** - Added support for importing data in the background ([#26914](directus/directus#26914) by [@Nitwel](https://github.com/Nitwel)) - Added support for Redis namespace control ([#26943](directus/directus#26943) by [@dstockton](https://github.com/dstockton)) - **[@directus/system-data](https://github.com/directus/system-data)** - Added utility endpoint and UI to generate translations collections and fields. ([#26742](directus/directus#26742) by [@bryantgillespie](https://github.com/bryantgillespie)) - **[@directus/constants](https://github.com/directus/constants)** - Added utility endpoint and UI to generate translations collections and fields. ([#26742](directus/directus#26742) by [@bryantgillespie](https://github.com/bryantgillespie)) - **[@directus/extensions-sdk](https://github.com/directus/extensions-sdk)** - Shrunk app UI to 90% and converted all px to rem (16px browser default) ([#26826](directus/directus#26826) by [@formfcw](https://github.com/formfcw)) - **[@directus/themes](https://github.com/directus/themes)** - Shrunk app UI to 90% and converted all px to rem (16px browser default) ([#26826](directus/directus#26826) by [@formfcw](https://github.com/formfcw)) ##### 🐛 Bug Fixes & Optimizations - **[@directus/app](https://github.com/directus/app)** - Fix file renaming ([#26946](directus/directus#26946) by [@br41nslug](https://github.com/br41nslug)) - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - Fixed filtering out `preRegisterCheck === false` modules from settings module bar config ([#26953](directus/directus#26953) by [@AlexGaillard](https://github.com/AlexGaillard)) - Prevented uncaught exception when v-menu has no tabbable elements ([#26922](directus/directus#26922) by [@robluton](https://github.com/robluton)) - Fixed a bug where global draft updates failed for singleton collections ([#26910](directus/directus#26910) by [@formfcw](https://github.com/formfcw)) - Refactored "Clear value(s) on save when hidden" condition so it's applied inside a drawer ([#26925](directus/directus#26925) by [@AlexGaillard](https://github.com/AlexGaillard)) - Added functionality to duplicate access policies ([#26889](directus/directus#26889) by [@robluton](https://github.com/robluton)) - Reduced width of split panel resize handle to prevent scrollbar interference ([#26908](directus/directus#26908) by [@robluton](https://github.com/robluton)) - Updated Vite to version 8.0.0 ([#26887](directus/directus#26887) by [@Nitwel](https://github.com/Nitwel)) - Corrected field editability for conditional update policies and version items ([#26815](directus/directus#26815) by [@HZooly](https://github.com/HZooly)) - Fixed date picker not emitting value after month/year change. ([#26880](directus/directus#26880) by [@powerseed](https://github.com/powerseed)) - Fixed inconsistent dropdown arrows in visual editor header bar ([#26904](directus/directus#26904) by [@formfcw](https://github.com/formfcw)) - **[@directus/api](https://github.com/directus/api)** - Added API request counting to telemetry reports. Requests are tracked by HTTP method and cache status. ([#26738](directus/directus#26738) by [@connorwinston](https://github.com/connorwinston)) - Fix file renaming ([#26946](directus/directus#26946) by [@br41nslug](https://github.com/br41nslug)) - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - Fixed errors during import not propagated while the file is streaming ([#26881](directus/directus#26881) by [@Nitwel](https://github.com/Nitwel)) - Added `cache clear` CLI command with `--system` and `--data` flags ([#26898](directus/directus#26898) by [@gaetansenn](https://github.com/gaetansenn)) - Improved build times using `tsdown`’s `oxc-transform` ([#26604](directus/directus#26604) by [@Nitwel](https://github.com/Nitwel)) - Preserved M2A type info when using named GraphQL fragments ([#26920](directus/directus#26920) by [@gaetansenn](https://github.com/gaetansenn)) - Added GraphQL resolver deduplication ([#26949](directus/directus#26949) by [@br41nslug](https://github.com/br41nslug)) - Fixed aggregation sanitization ([#26948](directus/directus#26948) by [@br41nslug](https://github.com/br41nslug)) - Added cross origin opener policy settings ([#26947](directus/directus#26947) by [@br41nslug](https://github.com/br41nslug)) - Fixed revisions not using prepareDelta ([#26867](directus/directus#26867) by [@br41nslug](https://github.com/br41nslug)) - **[@directus/types](https://github.com/directus/types)** - Fix file renaming ([#26946](directus/directus#26946) by [@br41nslug](https://github.com/br41nslug)) - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - Updated `FilesService.uploadOne` to support an optional `storage` parameter ([#26882](directus/directus#26882) by [@gaetansenn](https://github.com/gaetansenn)) - Added GraphQL resolver deduplication ([#26949](directus/directus#26949) by [@br41nslug](https://github.com/br41nslug)) - Fixed revisions not using prepareDelta ([#26867](directus/directus#26867) by [@br41nslug](https://github.com/br41nslug)) - **[@directus/env](https://github.com/directus/env)** - Fix file renaming ([#26946](directus/directus#26946) by [@br41nslug](https://github.com/br41nslug)) - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - Added support for setting the `secure` attribute on OpenID/OAuth2 cookies via the `AUTH_<PROVIDER>_COOKIE_SECURE` environment variable ([#26628](directus/directus#26628) by [@dstockton](https://github.com/dstockton)) - Added AI SDK Devtools middleware support for debugging AI Assistant in development only. Added AI telemetry provider ([#26678](directus/directus#26678) by [@bryantgillespie](https://github.com/bryantgillespie)) config for Braintrust and Langfuse, enabling sending traces for observability, usage, and token costs. - Added cross origin opener policy settings ([#26947](directus/directus#26947) by [@br41nslug](https://github.com/br41nslug)) - **[@directus/ai](https://github.com/directus/ai)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/composables](https://github.com/directus/composables)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/constants](https://github.com/directus/constants)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/errors](https://github.com/directus/errors)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/extensions](https://github.com/directus/extensions)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/extensions-registry](https://github.com/directus/extensions-registry)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/extensions-sdk](https://github.com/directus/extensions-sdk)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - Updated Vite to version 8.0.0 ([#26887](directus/directus#26887) by [@Nitwel](https://github.com/Nitwel)) - **[@directus/format-title](https://github.com/directus/format-title)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/memory](https://github.com/directus/memory)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/pressure](https://github.com/directus/pressure)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/release-notes-generator](https://github.com/directus/release-notes-generator)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - Fixed generated build ([#26959](directus/directus#26959) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/schema](https://github.com/directus/schema)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/schema-builder](https://github.com/directus/schema-builder)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/storage](https://github.com/directus/storage)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/storage-driver-azure](https://github.com/directus/storage-driver-azure)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/storage-driver-cloudinary](https://github.com/directus/storage-driver-cloudinary)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/storage-driver-gcs](https://github.com/directus/storage-driver-gcs)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/storage-driver-local](https://github.com/directus/storage-driver-local)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/storage-driver-s3](https://github.com/directus/storage-driver-s3)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/storage-driver-supabase](https://github.com/directus/storage-driver-supabase)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/stores](https://github.com/directus/stores)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/system-data](https://github.com/directus/system-data)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/themes](https://github.com/directus/themes)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/update-check](https://github.com/directus/update-check)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/utils](https://github.com/directus/utils)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - Preserved M2A type info when using named GraphQL fragments ([#26920](directus/directus#26920) by [@gaetansenn](https://github.com/gaetansenn)) - Fixed revisions not using prepareDelta ([#26867](directus/directus#26867) by [@br41nslug](https://github.com/br41nslug)) - **[@directus/validation](https://github.com/directus/validation)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - **[@directus/sdk](https://github.com/directus/sdk)** - Updated `@directus/tsconfig` dependency from 3.0.0 to 4.0.0 ([#26879](directus/directus#26879) by [@AlexGaillard](https://github.com/AlexGaillard)) - Improved build times using `tsdown`’s `oxc-transform` ([#26604](directus/directus#26604) by [@Nitwel](https://github.com/Nitwel)) - Fixed function typing in sdk for `date` and `time` fields. ([#26936](directus/directus#26936) by [@costajohnt](https://github.com/costajohnt)) ##### 📦 Published Versions - `@directus/app@15.6.0` - `@directus/api@35.0.0` - `@directus/ai@1.3.1` - `@directus/composables@11.2.16` - `@directus/constants@14.3.0` - `create-directus-extension@11.0.32` - `@directus/env@5.7.0` - `@directus/errors@2.3.0` - `@directus/extensions@3.0.22` - `@directus/extensions-registry@3.0.22` - `@directus/extensions-sdk@17.1.0` - `@directus/format-title@12.1.2` - `@directus/memory@3.1.5` - `@directus/pressure@3.0.20` - `@directus/release-notes-generator@2.0.4` - `@directus/schema@13.0.6` - `@directus/schema-builder@0.0.17` - `@directus/specs@13.0.0` - `@directus/storage@12.0.4` - `@directus/storage-driver-azure@12.0.20` - `@directus/storage-driver-cloudinary@12.0.20` - `@directus/storage-driver-gcs@12.0.20` - `@directus/storage-driver-local@12.0.4` - `@directus/storage-driver-s3@12.1.6` - `@directus/storage-driver-supabase@3.0.20` - `@directus/stores@2.0.1` - `@directus/system-data@4.4.0` - `@directus/themes@1.3.0` - `@directus/types@15.0.0` - `@directus/update-check@13.0.5` - `@directus/utils@13.3.2` - `@directus/validation@2.0.20` - `@directus/sdk@21.2.1` </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Reviewed-on: https://gitea.alexlebens.dev/alexlebens/infrastructure/pulls/5109 Co-authored-by: Renovate Bot <renovate-bot@alexlebens.net> Co-committed-by: Renovate Bot <renovate-bot@alexlebens.net>

formfcw added 30 commits March 5, 2026 15:27

rebase 0.25rem: 0.25 (14px base) → 0.1875 (16px base) [3.5px visual →…

3f989e7

… 3px visual]

rebase 0.375rem: 0.375 (14px base) → 0.3125 (16px base) [5.25px visua…

f24ec32

…l → 5px visual]

rebase 0.4rem: 0.4 (14px base) → 0.3125 (16px base) [5.6px visual → 5…

c5786f4

…px visual]

rebase 0.5rem: 0.5 (14px base) → 0.375 (16px base) [7px visual → 6px …

10280f7

…visual]

rebase 0.625rem: 0.625 (14px base) → 0.5 (16px base) [8.75px visual →…

9c8e8a2

… 8px visual]

rebase 0.75rem: 0.75 (14px base) → 0.5625 (16px base) [10.5px visual …

a4fb5ff

…→ 9px visual]

rebase 0.8rem: 0.8 (14px base) → 0.625 (16px base) [11.2px visual → 1…

e9f6a63

…0px visual]

rebase 0.8125rem: 0.8125 (14px base) → 0.625 (16px base) [11.375px vi…

4f4fb50

…sual → 10px visual]

rebase 0.85rem: 0.85 (14px base) → 0.6875 (16px base) [11.9px visual …

2aa5fa6

…→ 11px visual]

rebase 0.875rem: 0.875 (14px base) → 0.6875 (16px base) [12.25px visu…

048dd6b

…al → 11px visual]

rebase 0.9375rem: 0.9375 (14px base) → 0.75 (16px base) [13.125px vis…

579e7ec

…ual → 12px visual]

rebase 1rem: 1 (14px base) → 0.8125 (16px base) [14px visual → 13px v…

3ca4d83

…isual]

rebase 1.125rem: 1.125 (14px base) → 0.875 (16px base) [15.75px visua…

4ce9a48

…l → 14px visual]

rebase 1.25rem: 1.25 (14px base) → 1rem (16px base) [17.5px visual → …

16c8b2a

…16px visual]

rebase 1.5rem: 1.5 (14px base) → 1.1875 (16px base) [21px visual → 19…

d0a98ed

…px visual]

rebase 2.5rem: 2.5 (14px base) → 2rem (16px base) [35px visual → 32px…

c520429

… visual]

rebase 2.65rem: 2.65 (14px base) → 2.0625rem (16px base) [37.1px visu…

d00a65b

…al → 33px visual]

rebase 3rem: 3 (14px base) → 2.375 (16px base) [42px visual → 38px vi…

ca9a42b

…sual]

rebase 4rem: 4 (14px base) → 3.125 (16px base) [56px visual → 50px vi…

bf0f940

…sual]

rebase 18rem: 18 (14px base) → 14.1875 (16px base) [252px visual → 22…

9654c37

…7px visual]

convert 3px → 0.1875rem (3px × 0.9 = 2.7px)

fffb844

convert 4px → 0.25rem (4px × 0.9 = 3.6px)

1ac69e1

convert 5px → 0.3125rem (5px × 0.9 = 4.5px)

83a355f

convert 6px → 0.3125rem (6px × 0.9 = 5.4px)

8e0c473

convert 7px → 0.375rem (7px × 0.9 = 6.3px)

6fdafb0

convert 8px → 0.4375rem (8px × 0.9 = 7.2px)

d69c186

convert 9px → 0.5rem (9px × 0.9 = 8.1px)

d13809d

convert 10px → 0.5625rem (10px × 0.9 = 9px)

168a903

convert 11px → 0.625rem (11px × 0.9 = 9.9px)

ca83611

formfcw added 10 commits March 9, 2026 14:48

update sidebar width when collapsed

cc8d2f0

update comment 60 > 54

a9f3643

Merge branch 'main' into florian/cms-1920-shrink-the-ui

6413e03

update comments to reflect correct file paths for breakpoints synchro…

9a1c1c6

…nization

refactor to use rem in layout size handling in cards component

ccc5da9

format

c323381

Merge branch 'main' into florian/cms-1920-shrink-the-ui

5d6ba9f

update grid class condition to adjust for updated sizes

4303d14

prevent legend positioning in pie chart from being cut off

091a391

alvarosabu requested changes Mar 10, 2026

View reviewed changes

Comment thread app/src/components/v-workspace.vue

alvarosabu requested changes Mar 10, 2026

View reviewed changes

Comment thread app/src/panels/pie-chart/panel-pie-chart.vue

This comment was marked as resolved.

Sign in to view

formfcw added 2 commits March 10, 2026 13:27

use CSS custom properties for workspace zoom calculations instead of …

581683e

…magic numbers

replace hardcoded pie chart layout values with dynamic gridSize prop

8eb4802

formfcw requested a review from alvarosabu March 10, 2026 12:50

update test snapshot and improve test logic to prevent hard-coded values

106ccc5

alvarosabu approved these changes Mar 10, 2026

View reviewed changes

Merge branch 'main' into florian/cms-1920-shrink-the-ui

bc5eb91

HZooly approved these changes Mar 10, 2026

View reviewed changes

Merge branch 'main' into florian/cms-1920-shrink-the-ui

dce9da8

AlexGaillard approved these changes Mar 11, 2026

View reviewed changes

AlexGaillard merged commit c99bac6 into main Mar 11, 2026
70 checks passed

AlexGaillard deleted the florian/cms-1920-shrink-the-ui branch March 11, 2026 13:00

github-actions Bot added this to the Next Release milestone Mar 11, 2026

HZooly mentioned this pull request Mar 16, 2026

Fix interface preview card alignment after UI shrink #26899

Merged

This was referenced Mar 26, 2026

Classified Group Interface stopped working with Directus 11.17.0 formfcw/directus-extension-classified-group#2

Open

Group Tabs Interface stopped working with Directus 11.17.0 hanneskuettner/directus-extension-group-tabs-interface#18

Closed

github-actions Bot locked as resolved and limited conversation to collaborators May 11, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Shrink app UI to 90% and convert all px to rem (16px browser default)#26826

Shrink app UI to 90% and convert all px to rem (16px browser default)#26826
AlexGaillard merged 165 commits into
mainfrom
florian/cms-1920-shrink-the-ui

formfcw commented Mar 6, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

This comment was marked as resolved.

alvarosabu left a comment

Uh oh!

HZooly left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Uh oh!

Conversation

formfcw commented Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Scope

Potential Risks / Drawbacks

Tested Scenarios

Review Notes / Questions

Checklist

Uh oh!

Uh oh!

Uh oh!

This comment was marked as resolved.

alvarosabu left a comment

Choose a reason for hiding this comment

Uh oh!

HZooly left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

formfcw commented Mar 6, 2026 •

edited

Loading