@payloadcms/ui 4.0.0-internal.cd69eef → 4.0.0-internal.d1cc1d3

package/dist/utilities/slugify.js

@@ -1,4 +1,4 @@
-import { flattenAllFields, getFieldByPath, UnauthorizedError } from 'payload';
+import { executeAccess, getFieldByPath, getSlugFallbackValue, getUniqueFieldValue, hasDraftsEnabled, UnauthorizedError } from 'payload';
 import { slugify as defaultSlugify } from 'payload/shared';
 /**
  * This server function is directly related to the {@link https://payloadcms.com/docs/fields/slug | Slug Field}.
@@ -13,9 +13,11 @@ import { slugify as defaultSlugify } from 'payload/shared';
  */
 export const slugifyHandler = async args => {
   const {
+    id,
     collectionSlug,
     data,
     globalSlug,
+    locale,
     path,
     req,
     valueToSlugify
@@ -31,17 +33,58 @@ export const slugifyHandler = async args => {
     field
   } = getFieldByPath({
     config: req.payload.config,
-    fields: flattenAllFields({
-      fields: docConfig.fields
-    }),
+    fields: docConfig.flattenedFields,
     path
   });
   const customSlugify = typeof field?.custom?.slugify === 'function' ? field.custom.slugify : undefined;
-  const result = customSlugify ? await customSlugify({
+  const slugify = valueToSlugify => customSlugify ? customSlugify({
     data,
     req,
     valueToSlugify
   }) : defaultSlugify(valueToSlugify);
-  return result;
+  const result = await slugify(valueToSlugify);
+  const collectionConfig = collectionSlug ? req.payload.collections[collectionSlug]?.config : null;
+  // Uniqueness dedupe only applies to a collection's slug field. Globals have no collection to
+  // dedupe against, so their result is returned as-is.
+  if (!collectionConfig || !field || field.type !== 'slug' || !('name' in field)) {
+    return result;
+  }
+  // Probing reads across the whole collection with the raw db, so require unrestricted read access —
+  // a row-filtered (`Where`) result is treated as not allowed, since scoping the probe to readable
+  // rows would break uniqueness.
+  const canRead = await executeAccess({
+    disableErrors: true,
+    req
+  }, collectionConfig.access.read);
+  if (canRead !== true) {
+    return result;
+  }
+  // A localized slug is unique per-locale, so scope the probe to the current locale — otherwise it
+  // dedupes against the default locale and can hand back a colliding value. The client passes the
+  // active admin locale; fall back to the request's own locale.
+  const localeToScope = field.localized ? locale ?? req.locale ?? undefined : undefined;
+  // The current doc is excluded so a regenerate can reuse its own value rather than bump past it.
+  const excludeId = typeof id === 'string' || typeof id === 'number' ? id : undefined;
+  // A source resolved to a value: dedupe it the same way the next save would, so the generate button
+  // can't hand back a slug that's already taken. With no source, return the `<singular>-N` fallback.
+  if (result) {
+    return getUniqueFieldValue({
+      id: excludeId,
+      collection: collectionConfig.slug,
+      draftsEnabled: hasDraftsEnabled(collectionConfig),
+      field: field.name,
+      locale: localeToScope,
+      req,
+      value: result
+    });
+  }
+  return getSlugFallbackValue({
+    id: excludeId,
+    collection: collectionConfig,
+    field: field.name,
+    locale: localeToScope,
+    req,
+    slugify
+  });
 };
 //# sourceMappingURL=slugify.js.map

package/dist/utilities/slugify.js.map

@@ -1 +1 @@
-{"version":3,"file":"slugify.js","names":["flattenAllFields","getFieldByPath","UnauthorizedError","slugify","defaultSlugify","slugifyHandler","args","collectionSlug","data","globalSlug","path","req","valueToSlugify","user","docConfig","payload","collections","config","globals","find","g","slug","Error","field","fields","customSlugify","custom","undefined","result"],"sources":["../../src/utilities/slugify.ts"],"sourcesContent":["import type { Slugify } from 'payload/shared'\n\nimport {\n  flattenAllFields,\n  getFieldByPath,\n  type ServerFunction,\n  type SlugifyServerFunctionArgs,\n  UnauthorizedError,\n} from 'payload'\nimport { slugify as defaultSlugify } from 'payload/shared'\n\n/**\n * This server function is directly related to the {@link https://payloadcms.com/docs/fields/slug | Slug Field}.\n * This is a server function that is used to invoke the user's custom slugify function from the client.\n * This pattern is required, as there is no other way for us to pass their function across the client-server boundary.\n *   - Not through props\n *   - Not from a server function defined within a server component (see below)\n * When a server function contains non-serializable data within its closure, it gets passed through the boundary (and breaks).\n * The only way to pass server functions to the client (that contain non-serializable data) is if it is globally defined.\n * But we also cannot define this function alongside the server component, as we will not have access to their custom slugify function.\n * See `ServerFunctionsProvider` for more details.\n */\nexport const slugifyHandler: ServerFunction<\n  SlugifyServerFunctionArgs,\n  Promise<ReturnType<Slugify>>\n> = async (args) => {\n  const { collectionSlug, data, globalSlug, path, req, valueToSlugify } = args\n\n  if (!req.user) {\n    throw new UnauthorizedError()\n  }\n\n  const docConfig = collectionSlug\n    ? req.payload.collections[collectionSlug]?.config\n    : globalSlug\n      ? req.payload.config.globals.find((g) => g.slug === globalSlug)\n      : null\n\n  if (!docConfig) {\n    throw new Error()\n  }\n\n  const { field } = getFieldByPath({\n    config: req.payload.config,\n    fields: flattenAllFields({ fields: docConfig.fields }),\n    path,\n  })\n\n  const customSlugify = (\n    typeof field?.custom?.slugify === 'function' ? field.custom.slugify : undefined\n  ) as Slugify\n\n  const result = customSlugify\n    ? await customSlugify({ data, req, valueToSlugify })\n    : defaultSlugify(valueToSlugify)\n\n  return result\n}\n"],"mappings":"AAEA,SACEA,gBAAgB,EAChBC,cAAc,EAGdC,iBAAiB,QACZ;AACP,SAASC,OAAA,IAAWC,cAAc,QAAQ;AAE1C;;;;;;;;;;;AAWA,OAAO,MAAMC,cAAA,GAGT,MAAOC,IAAA;EACT,MAAM;IAAEC,cAAc;IAAEC,IAAI;IAAEC,UAAU;IAAEC,IAAI;IAAEC,GAAG;IAAEC;EAAc,CAAE,GAAGN,IAAA;EAExE,IAAI,CAACK,GAAA,CAAIE,IAAI,EAAE;IACb,MAAM,IAAIX,iBAAA;EACZ;EAEA,MAAMY,SAAA,GAAYP,cAAA,GACdI,GAAA,CAAII,OAAO,CAACC,WAAW,CAACT,cAAA,CAAe,EAAEU,MAAA,GACzCR,UAAA,GACEE,GAAA,CAAII,OAAO,CAACE,MAAM,CAACC,OAAO,CAACC,IAAI,CAAEC,CAAA,IAAMA,CAAA,CAAEC,IAAI,KAAKZ,UAAA,IAClD;EAEN,IAAI,CAACK,SAAA,EAAW;IACd,MAAM,IAAIQ,KAAA;EACZ;EAEA,MAAM;IAAEC;EAAK,CAAE,GAAGtB,cAAA,CAAe;IAC/BgB,MAAA,EAAQN,GAAA,CAAII,OAAO,CAACE,MAAM;IAC1BO,MAAA,EAAQxB,gBAAA,CAAiB;MAAEwB,MAAA,EAAQV,SAAA,CAAUU;IAAO;IACpDd;EACF;EAEA,MAAMe,aAAA,GACJ,OAAOF,KAAA,EAAOG,MAAA,EAAQvB,OAAA,KAAY,aAAaoB,KAAA,CAAMG,MAAM,CAACvB,OAAO,GAAGwB,SAAA;EAGxE,MAAMC,MAAA,GAASH,aAAA,GACX,MAAMA,aAAA,CAAc;IAAEjB,IAAA;IAAMG,GAAA;IAAKC;EAAe,KAChDR,cAAA,CAAeQ,cAAA;EAEnB,OAAOgB,MAAA;AACT","ignoreList":[]}
+{"version":3,"file":"slugify.js","names":["executeAccess","getFieldByPath","getSlugFallbackValue","getUniqueFieldValue","hasDraftsEnabled","UnauthorizedError","slugify","defaultSlugify","slugifyHandler","args","id","collectionSlug","data","globalSlug","locale","path","req","valueToSlugify","user","docConfig","payload","collections","config","globals","find","g","slug","Error","field","fields","flattenedFields","customSlugify","custom","undefined","result","collectionConfig","type","canRead","disableErrors","access","read","localeToScope","localized","excludeId","collection","draftsEnabled","name","value"],"sources":["../../src/utilities/slugify.ts"],"sourcesContent":["import type { Slugify } from 'payload/shared'\n\nimport {\n  executeAccess,\n  getFieldByPath,\n  getSlugFallbackValue,\n  getUniqueFieldValue,\n  hasDraftsEnabled,\n  type ServerFunction,\n  type SlugifyServerFunctionArgs,\n  UnauthorizedError,\n} from 'payload'\nimport { slugify as defaultSlugify } from 'payload/shared'\n\n/**\n * This server function is directly related to the {@link https://payloadcms.com/docs/fields/slug | Slug Field}.\n * This is a server function that is used to invoke the user's custom slugify function from the client.\n * This pattern is required, as there is no other way for us to pass their function across the client-server boundary.\n *   - Not through props\n *   - Not from a server function defined within a server component (see below)\n * When a server function contains non-serializable data within its closure, it gets passed through the boundary (and breaks).\n * The only way to pass server functions to the client (that contain non-serializable data) is if it is globally defined.\n * But we also cannot define this function alongside the server component, as we will not have access to their custom slugify function.\n * See `ServerFunctionsProvider` for more details.\n */\nexport const slugifyHandler: ServerFunction<\n  SlugifyServerFunctionArgs,\n  Promise<ReturnType<Slugify>>\n> = async (args) => {\n  const { id, collectionSlug, data, globalSlug, locale, path, req, valueToSlugify } = args\n\n  if (!req.user) {\n    throw new UnauthorizedError()\n  }\n\n  const docConfig = collectionSlug\n    ? req.payload.collections[collectionSlug]?.config\n    : globalSlug\n      ? req.payload.config.globals.find((g) => g.slug === globalSlug)\n      : null\n\n  if (!docConfig) {\n    throw new Error()\n  }\n\n  const { field } = getFieldByPath({\n    config: req.payload.config,\n    fields: docConfig.flattenedFields,\n    path,\n  })\n\n  const customSlugify = (\n    typeof field?.custom?.slugify === 'function' ? field.custom.slugify : undefined\n  ) as Slugify\n\n  const slugify = (valueToSlugify: unknown) =>\n    customSlugify\n      ? customSlugify({ data, req, valueToSlugify })\n      : defaultSlugify(valueToSlugify as string)\n\n  const result = await slugify(valueToSlugify)\n\n  const collectionConfig = collectionSlug ? req.payload.collections[collectionSlug]?.config : null\n\n  // Uniqueness dedupe only applies to a collection's slug field. Globals have no collection to\n  // dedupe against, so their result is returned as-is.\n  if (!collectionConfig || !field || field.type !== 'slug' || !('name' in field)) {\n    return result\n  }\n\n  // Probing reads across the whole collection with the raw db, so require unrestricted read access —\n  // a row-filtered (`Where`) result is treated as not allowed, since scoping the probe to readable\n  // rows would break uniqueness.\n  const canRead = await executeAccess({ disableErrors: true, req }, collectionConfig.access.read)\n\n  if (canRead !== true) {\n    return result\n  }\n\n  // A localized slug is unique per-locale, so scope the probe to the current locale — otherwise it\n  // dedupes against the default locale and can hand back a colliding value. The client passes the\n  // active admin locale; fall back to the request's own locale.\n  const localeToScope = field.localized ? (locale ?? req.locale ?? undefined) : undefined\n\n  // The current doc is excluded so a regenerate can reuse its own value rather than bump past it.\n  const excludeId = typeof id === 'string' || typeof id === 'number' ? id : undefined\n\n  // A source resolved to a value: dedupe it the same way the next save would, so the generate button\n  // can't hand back a slug that's already taken. With no source, return the `<singular>-N` fallback.\n  if (result) {\n    return getUniqueFieldValue({\n      id: excludeId,\n      collection: collectionConfig.slug,\n      draftsEnabled: hasDraftsEnabled(collectionConfig),\n      field: field.name,\n      locale: localeToScope,\n      req,\n      value: result,\n    })\n  }\n\n  return getSlugFallbackValue({\n    id: excludeId,\n    collection: collectionConfig,\n    field: field.name,\n    locale: localeToScope,\n    req,\n    slugify,\n  })\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/Dashboard/Default/ModularDashboard/index.css

@@ -66,7 +66,6 @@
 
   .widget-wrapper__controls {
     opacity: 0;
-    transition: opacity 0.2s ease;
   }
 
   .widget:focus-visible .widget-wrapper__controls,
@@ -94,10 +93,6 @@
     width: 100%;
   }
 
-  .widget-wrapper--editing .widget-wrapper__controls {
-    transition: opacity 0.2s ease;
-  }
-
   .widget-wrapper--editing:hover .widget-wrapper__controls {
     opacity: 1;
   }
@@ -123,7 +118,6 @@
     border-radius: var(--radius-small);
     cursor: pointer;
     color: var(--color-text-ondanger);
-    transition: all 0.2s ease;
 
     &:hover {
       background: var(--color-bg-danger-hover);
@@ -154,7 +148,6 @@
     border-radius: var(--radius-small);
     cursor: pointer;
     color: var(--color-bg);
-    transition: all 0.2s ease;
 
     & .icon {
       width: var(--spacer-3);
@@ -185,7 +178,6 @@
     border: none;
     border-radius: var(--radius-small);
     cursor: pointer;
-    transition: all 0.2s ease;
     font-family: var(--text-body-small-font-family);
     font-size: var(--text-body-small-font-size);
     font-weight: var(--text-body-small-font-weight);

package/dist/views/Dashboard/Default/ModularDashboard/renderWidget/RenderWidget.js

@@ -45,11 +45,11 @@ export const RenderWidget = t0 => {
           }
           setComponent(React.createElement("div", {
             style: {
-              background: "var(--theme-error-50)",
-              border: "var(--stroke-width-small) solid var(--theme-error-200)",
-              borderRadius: "4px",
+              background: "var(--color-bg-danger-tertiary)",
+              border: "var(--stroke-width-small) solid var(--color-border-danger)",
+              borderRadius: "var(--radius-medium)",
               color: "var(--color-text-danger)",
-              padding: "20px",
+              padding: "var(--spacer-3)",
               textAlign: "center"
             }
           }, "Failed to load widget. Please try again later."));

package/dist/views/Dashboard/Default/ModularDashboard/renderWidget/RenderWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"RenderWidget.js","names":["c","_c","React","useCallback","useEffect","useRef","ShimmerEffect","useServerFunctions","RenderWidget","t0","$","widgetData","widgetId","Component","setComponent","useState","serverFunction","requestIDRef","t1","render","requestID","current","widgetSlug","slice","lastIndexOf","result","name","args","component","t2","createElement","style","background","border","borderRadius","color","padding","textAlign","renderWidget","t3","t4","Symbol","for","_jsx","height","_Fragment","children"],"sources":["../../../../../../src/views/Dashboard/Default/ModularDashboard/renderWidget/RenderWidget.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useEffect, useRef } from 'react'\n\nimport type {\n  RenderWidgetServerFnArgs,\n  RenderWidgetServerFnReturnType,\n} from './renderWidgetServerFn.js'\n\nimport { ShimmerEffect } from '../../../../../elements/ShimmerEffect/index.js'\nimport { useServerFunctions } from '../../../../../providers/ServerFunctions/index.js'\n\n/**\n * Utility to render a widget on-demand on the client.\n */\nexport const RenderWidget: React.FC<{\n  /**\n   * Instance-specific data for this widget\n   */\n  widgetData?: Record<string, unknown>\n  /**\n   * Unique ID for this widget instance (format: \"slug-timestamp\")\n   */\n  widgetId: string\n}> = ({ widgetData, widgetId }) => {\n  const [Component, setComponent] = React.useState<null | React.ReactNode>(null)\n  const { serverFunction } = useServerFunctions()\n  const requestIDRef = useRef(0)\n\n  const renderWidget = useCallback(() => {\n    async function render() {\n      const requestID = ++requestIDRef.current\n      setComponent(null)\n\n      try {\n        const widgetSlug = widgetId.slice(0, widgetId.lastIndexOf('-'))\n\n        const result = (await serverFunction({\n          name: 'render-widget',\n          args: {\n            widgetData,\n            widgetSlug,\n          } as RenderWidgetServerFnArgs,\n        })) as RenderWidgetServerFnReturnType\n\n        if (requestID !== requestIDRef.current) {\n          return\n        }\n\n        setComponent(result.component)\n      } catch (_error) {\n        if (requestID !== requestIDRef.current) {\n          return\n        }\n\n        // Log error but don't expose details to console in production\n\n        // Fallback error component\n        setComponent(\n          React.createElement(\n            'div',\n            {\n              style: {\n                background: 'var(--theme-error-50)',\n                border: 'var(--stroke-width-small) solid var(--theme-error-200)',\n                borderRadius: '4px',\n                color: 'var(--color-text-danger)',\n                padding: '20px',\n                textAlign: 'center',\n              },\n            },\n            'Failed to load widget. Please try again later.',\n          ),\n        )\n      }\n    }\n    void render()\n  }, [serverFunction, widgetData, widgetId])\n\n  useEffect(() => {\n    void renderWidget()\n  }, [renderWidget])\n\n  if (!Component) {\n    return <ShimmerEffect height=\"100%\" />\n  }\n\n  return <>{Component}</>\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,IAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ;AAOtD,SAASC,aAAa,QAAQ;AAC9B,SAASC,kBAAkB,QAAQ;AAEnC;;;AAGA,OAAO,MAAMC,YAAA,GASRC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,UAAA;IAAAC;EAAA,IAAAH,EAAwB;EAC5B,OAAAI,SAAA,EAAAC,YAAA,IAAkCZ,KAAA,CAAAa,QAAA,KAAuC;EACzE;IAAAC;EAAA,IAA2BT,kBAAA;EAC3B,MAAAU,YAAA,GAAqBZ,MAAA,EAAO;EAAA,IAAAa,EAAA;EAAA,IAAAR,CAAA,QAAAM,cAAA,IAAAN,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAE,QAAA;IAEKM,EAAA,GAAAA,CAAA;MAC/B,MAAAC,MAAA,kBAAAA,OAAA;QACE,MAAAC,SAAA,GAAoBH,YAAA,CAAAI,OAAA,GAAAJ,YAAA,CAAAI,OAAA,IAAoB;QACxCP,YAAA,KAAa;QAAA;QAAA;UAGX,MAAAQ,UAAA,GAAmBV,QAAA,CAAAW,KAAA,IAAkBX,QAAA,CAAAY,WAAA,CAAqB;UAE1D,MAAAC,MAAA,SAAsBT,cAAA;YAAAU,IAAA,EACd;YAAAC,IAAA;cAAAhB,UAAA;cAAAW;YAAA;UAAA,CAKR;UAAA,IAEIF,SAAA,KAAcH,YAAA,CAAAI,OAAoB;YAAA;UAAA;UAItCP,YAAA,CAAaW,MAAA,CAAAG,SAAgB;QAAA,SAAAC,EAAA;UAAA,IAEzBT,SAAA,KAAcH,YAAA,CAAAI,OAAoB;YAAA;UAAA;UAOtCP,YAAA,CACEZ,KAAA,CAAA4B,aAAA,CACE;YAAAC,KAAA;cAAAC,UAAA,EAGgB;cAAAC,MAAA,EACJ;cAAAC,YAAA,EACM;cAAAC,KAAA,EACP;cAAAC,OAAA,EACE;cAAAC,SAAA,EACE;YAAA;UAAA,GAGf;QAAA;MAAA;MAKHlB,MAAA;IAAA;IACPT,CAAA,MAAAM,cAAA;IAAAN,CAAA,MAAAC,UAAA;IAAAD,CAAA,MAAAE,QAAA;IAAAF,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAhDA,MAAA4B,YAAA,GAAqBpB,EAgDoB;EAAA,IAAAW,EAAA;EAAA,IAAAU,EAAA;EAAA,IAAA7B,CAAA,QAAA4B,YAAA;IAE/BT,EAAA,GAAAA,CAAA;MACHS,YAAA;IAAA;IACJC,EAAA,IAACD,YAAA;IAAa5B,CAAA,MAAA4B,YAAA;IAAA5B,CAAA,MAAAmB,EAAA;IAAAnB,CAAA,MAAA6B,EAAA;EAAA;IAAAV,EAAA,GAAAnB,CAAA;IAAA6B,EAAA,GAAA7B,CAAA;EAAA;EAFjBN,SAAA,CAAUyB,EAEV,EAAGU,EAAc;EAAA,KAEZ1B,SAAA;IAAA,IAAA2B,EAAA;IAAA,IAAA9B,CAAA,QAAA+B,MAAA,CAAAC,GAAA;MACIF,EAAA,GAAAG,IAAA,CAAArC,aAAA;QAAAsC,MAAA,EAAsB;MAAA,C;;;;;WAAtBJ,E;;;;IAGFA,EAAA,GAAAG,IAAA,CAAAE,SAAA;MAAAC,QAAA,EAAGjC;IAAA,C;;;;;;SAAH2B,E;CACT","ignoreList":[]}
+{"version":3,"file":"RenderWidget.js","names":["c","_c","React","useCallback","useEffect","useRef","ShimmerEffect","useServerFunctions","RenderWidget","t0","$","widgetData","widgetId","Component","setComponent","useState","serverFunction","requestIDRef","t1","render","requestID","current","widgetSlug","slice","lastIndexOf","result","name","args","component","t2","createElement","style","background","border","borderRadius","color","padding","textAlign","renderWidget","t3","t4","Symbol","for","_jsx","height","_Fragment","children"],"sources":["../../../../../../src/views/Dashboard/Default/ModularDashboard/renderWidget/RenderWidget.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useEffect, useRef } from 'react'\n\nimport type {\n  RenderWidgetServerFnArgs,\n  RenderWidgetServerFnReturnType,\n} from './renderWidgetServerFn.js'\n\nimport { ShimmerEffect } from '../../../../../elements/ShimmerEffect/index.js'\nimport { useServerFunctions } from '../../../../../providers/ServerFunctions/index.js'\n\n/**\n * Utility to render a widget on-demand on the client.\n */\nexport const RenderWidget: React.FC<{\n  /**\n   * Instance-specific data for this widget\n   */\n  widgetData?: Record<string, unknown>\n  /**\n   * Unique ID for this widget instance (format: \"slug-timestamp\")\n   */\n  widgetId: string\n}> = ({ widgetData, widgetId }) => {\n  const [Component, setComponent] = React.useState<null | React.ReactNode>(null)\n  const { serverFunction } = useServerFunctions()\n  const requestIDRef = useRef(0)\n\n  const renderWidget = useCallback(() => {\n    async function render() {\n      const requestID = ++requestIDRef.current\n      setComponent(null)\n\n      try {\n        const widgetSlug = widgetId.slice(0, widgetId.lastIndexOf('-'))\n\n        const result = (await serverFunction({\n          name: 'render-widget',\n          args: {\n            widgetData,\n            widgetSlug,\n          } as RenderWidgetServerFnArgs,\n        })) as RenderWidgetServerFnReturnType\n\n        if (requestID !== requestIDRef.current) {\n          return\n        }\n\n        setComponent(result.component)\n      } catch (_error) {\n        if (requestID !== requestIDRef.current) {\n          return\n        }\n\n        // Log error but don't expose details to console in production\n\n        // Fallback error component\n        setComponent(\n          React.createElement(\n            'div',\n            {\n              style: {\n                background: 'var(--color-bg-danger-tertiary)',\n                border: 'var(--stroke-width-small) solid var(--color-border-danger)',\n                borderRadius: 'var(--radius-medium)',\n                color: 'var(--color-text-danger)',\n                padding: 'var(--spacer-3)',\n                textAlign: 'center',\n              },\n            },\n            'Failed to load widget. Please try again later.',\n          ),\n        )\n      }\n    }\n    void render()\n  }, [serverFunction, widgetData, widgetId])\n\n  useEffect(() => {\n    void renderWidget()\n  }, [renderWidget])\n\n  if (!Component) {\n    return <ShimmerEffect height=\"100%\" />\n  }\n\n  return <>{Component}</>\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,IAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ;AAOtD,SAASC,aAAa,QAAQ;AAC9B,SAASC,kBAAkB,QAAQ;AAEnC;;;AAGA,OAAO,MAAMC,YAAA,GASRC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,UAAA;IAAAC;EAAA,IAAAH,EAAwB;EAC5B,OAAAI,SAAA,EAAAC,YAAA,IAAkCZ,KAAA,CAAAa,QAAA,KAAuC;EACzE;IAAAC;EAAA,IAA2BT,kBAAA;EAC3B,MAAAU,YAAA,GAAqBZ,MAAA,EAAO;EAAA,IAAAa,EAAA;EAAA,IAAAR,CAAA,QAAAM,cAAA,IAAAN,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAE,QAAA;IAEKM,EAAA,GAAAA,CAAA;MAC/B,MAAAC,MAAA,kBAAAA,OAAA;QACE,MAAAC,SAAA,GAAoBH,YAAA,CAAAI,OAAA,GAAAJ,YAAA,CAAAI,OAAA,IAAoB;QACxCP,YAAA,KAAa;QAAA;QAAA;UAGX,MAAAQ,UAAA,GAAmBV,QAAA,CAAAW,KAAA,IAAkBX,QAAA,CAAAY,WAAA,CAAqB;UAE1D,MAAAC,MAAA,SAAsBT,cAAA;YAAAU,IAAA,EACd;YAAAC,IAAA;cAAAhB,UAAA;cAAAW;YAAA;UAAA,CAKR;UAAA,IAEIF,SAAA,KAAcH,YAAA,CAAAI,OAAoB;YAAA;UAAA;UAItCP,YAAA,CAAaW,MAAA,CAAAG,SAAgB;QAAA,SAAAC,EAAA;UAAA,IAEzBT,SAAA,KAAcH,YAAA,CAAAI,OAAoB;YAAA;UAAA;UAOtCP,YAAA,CACEZ,KAAA,CAAA4B,aAAA,CACE;YAAAC,KAAA;cAAAC,UAAA,EAGgB;cAAAC,MAAA,EACJ;cAAAC,YAAA,EACM;cAAAC,KAAA,EACP;cAAAC,OAAA,EACE;cAAAC,SAAA,EACE;YAAA;UAAA,GAGf;QAAA;MAAA;MAKHlB,MAAA;IAAA;IACPT,CAAA,MAAAM,cAAA;IAAAN,CAAA,MAAAC,UAAA;IAAAD,CAAA,MAAAE,QAAA;IAAAF,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAhDA,MAAA4B,YAAA,GAAqBpB,EAgDoB;EAAA,IAAAW,EAAA;EAAA,IAAAU,EAAA;EAAA,IAAA7B,CAAA,QAAA4B,YAAA;IAE/BT,EAAA,GAAAA,CAAA;MACHS,YAAA;IAAA;IACJC,EAAA,IAACD,YAAA;IAAa5B,CAAA,MAAA4B,YAAA;IAAA5B,CAAA,MAAAmB,EAAA;IAAAnB,CAAA,MAAA6B,EAAA;EAAA;IAAAV,EAAA,GAAAnB,CAAA;IAAA6B,EAAA,GAAA7B,CAAA;EAAA;EAFjBN,SAAA,CAAUyB,EAEV,EAAGU,EAAc;EAAA,KAEZ1B,SAAA;IAAA,IAAA2B,EAAA;IAAA,IAAA9B,CAAA,QAAA+B,MAAA,CAAAC,GAAA;MACIF,EAAA,GAAAG,IAAA,CAAArC,aAAA;QAAAsC,MAAA,EAAsB;MAAA,C;;;;;WAAtBJ,E;;;;IAGFA,EAAA,GAAAG,IAAA,CAAAE,SAAA;MAAAC,QAAA,EAAGjC;IAAA,C;;;;;;SAAH2B,E;CACT","ignoreList":[]}

package/dist/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.js

@@ -28,11 +28,11 @@ export const renderWidgetHandler = ({
     return {
       component: React.createElement('div', {
         style: {
-          background: 'var(--theme-elevation-50)',
-          border: 'var(--stroke-width-small) solid var(--theme-elevation-200)',
-          borderRadius: '4px',
-          color: 'var(--theme-text)',
-          padding: '20px',
+          background: 'var(--color-bg-secondary)',
+          border: 'var(--stroke-width-small) solid var(--color-border)',
+          borderRadius: 'var(--radius-medium)',
+          color: 'var(--color-text)',
+          padding: 'var(--spacer-3)',
           textAlign: 'center'
         }
       }, `Widget "${widgetSlug}" not found`)
@@ -66,11 +66,11 @@ export const renderWidgetHandler = ({
     return {
       component: React.createElement('div', {
         style: {
-          background: 'var(--theme-error-50)',
-          border: 'var(--stroke-width-small) solid var(--theme-error-200)',
-          borderRadius: '4px',
-          color: 'var(--theme-error-text)',
-          padding: '20px',
+          background: 'var(--color-bg-danger-tertiary)',
+          border: 'var(--stroke-width-small) solid var(--color-border-danger)',
+          borderRadius: 'var(--radius-medium)',
+          color: 'var(--color-text-danger)',
+          padding: 'var(--spacer-3)',
           textAlign: 'center'
         }
       }, 'Error loading widget')

package/dist/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderWidgetServerFn.js","names":["React","RenderServerComponent","extractLocaleData","renderWidgetHandler","cookies","locale","permissions","req","widgetData","widgetSlug","user","Error","widgets","payload","config","admin","dashboard","importMap","widgetConfig","find","widget","slug","component","createElement","style","background","border","borderRadius","color","padding","textAlign","localeFilteredData","fields","length","serverProps","Component","error","errorMessage","message","String","logger","err","msg"],"sources":["../../../../../../src/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.ts"],"sourcesContent":["import type { Field, ServerFunction, WidgetServerProps } from 'payload'\n\nimport React from 'react'\n\nimport { RenderServerComponent } from '../../../../../elements/RenderServerComponent/index.js'\nimport { extractLocaleData } from '../utils/localeUtils.js'\n\nexport type RenderWidgetServerFnArgs = {\n  /**\n   * Instance-specific data for this widget\n   */\n  widgetData?: Record<string, unknown>\n  /**\n   * The slug of the widget to render\n   */\n  widgetSlug: string\n}\n\nexport type RenderWidgetServerFnReturnType = {\n  component: React.ReactNode\n}\n\n/**\n * Server function to render a widget on-demand.\n * Similar to render-field but specifically for dashboard widgets.\n */\nexport const renderWidgetHandler: ServerFunction<\n  RenderWidgetServerFnArgs,\n  RenderWidgetServerFnReturnType\n> = ({ cookies, locale, permissions, req, widgetData, widgetSlug }) => {\n  if (!req.user) {\n    throw new Error('Unauthorized')\n  }\n\n  const { widgets } = req.payload.config.admin.dashboard\n  const { importMap } = req.payload\n\n  // Find the widget configuration\n  const widgetConfig = widgets.find((widget) => widget.slug === widgetSlug)\n\n  if (!widgetConfig) {\n    return {\n      component: React.createElement(\n        'div',\n        {\n          style: {\n            background: 'var(--theme-elevation-50)',\n            border: 'var(--stroke-width-small) solid var(--theme-elevation-200)',\n            borderRadius: '4px',\n            color: 'var(--theme-text)',\n            padding: '20px',\n            textAlign: 'center',\n          },\n        },\n        `Widget \"${widgetSlug}\" not found`,\n      ),\n    }\n  }\n\n  try {\n    const localeFilteredData = widgetConfig.fields?.length\n      ? extractLocaleData(widgetData || {}, req.locale || 'en', widgetConfig.fields)\n      : widgetData || {}\n\n    const serverProps: WidgetServerProps = {\n      cookies,\n      locale,\n      permissions,\n      req,\n      widgetData: localeFilteredData,\n      widgetSlug,\n    }\n\n    // Render the widget server component\n    const component = RenderServerComponent({\n      Component: widgetConfig.Component,\n      importMap,\n      serverProps,\n    })\n\n    return { component }\n  } catch (error) {\n    const errorMessage = error instanceof Error ? error.message : String(error)\n\n    req.payload.logger.error({\n      err: error,\n      msg: `Error rendering widget \"${widgetSlug}\": ${errorMessage}`,\n    })\n\n    return {\n      component: React.createElement(\n        'div',\n        {\n          style: {\n            background: 'var(--theme-error-50)',\n            border: 'var(--stroke-width-small) solid var(--theme-error-200)',\n            borderRadius: '4px',\n            color: 'var(--theme-error-text)',\n            padding: '20px',\n            textAlign: 'center',\n          },\n        },\n        'Error loading widget',\n      ),\n    }\n  }\n}\n"],"mappings":"AAEA,OAAOA,KAAA,MAAW;AAElB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,iBAAiB,QAAQ;AAiBlC;;;;AAIA,OAAO,MAAMC,mBAAA,GAGTA,CAAC;EAAEC,OAAO;EAAEC,MAAM;EAAEC,WAAW;EAAEC,GAAG;EAAEC,UAAU;EAAEC;AAAU,CAAE;EAChE,IAAI,CAACF,GAAA,CAAIG,IAAI,EAAE;IACb,MAAM,IAAIC,KAAA,CAAM;EAClB;EAEA,MAAM;IAAEC;EAAO,CAAE,GAAGL,GAAA,CAAIM,OAAO,CAACC,MAAM,CAACC,KAAK,CAACC,SAAS;EACtD,MAAM;IAAEC;EAAS,CAAE,GAAGV,GAAA,CAAIM,OAAO;EAEjC;EACA,MAAMK,YAAA,GAAeN,OAAA,CAAQO,IAAI,CAAEC,MAAA,IAAWA,MAAA,CAAOC,IAAI,KAAKZ,UAAA;EAE9D,IAAI,CAACS,YAAA,EAAc;IACjB,OAAO;MACLI,SAAA,EAAWtB,KAAA,CAAMuB,aAAa,CAC5B,OACA;QACEC,KAAA,EAAO;UACLC,UAAA,EAAY;UACZC,MAAA,EAAQ;UACRC,YAAA,EAAc;UACdC,KAAA,EAAO;UACPC,OAAA,EAAS;UACTC,SAAA,EAAW;QACb;MACF,GACA,WAAWrB,UAAA,aAAuB;IAEtC;EACF;EAEA,IAAI;IACF,MAAMsB,kBAAA,GAAqBb,YAAA,CAAac,MAAM,EAAEC,MAAA,GAC5C/B,iBAAA,CAAkBM,UAAA,IAAc,CAAC,GAAGD,GAAA,CAAIF,MAAM,IAAI,MAAMa,YAAA,CAAac,MAAM,IAC3ExB,UAAA,IAAc,CAAC;IAEnB,MAAM0B,WAAA,GAAiC;MACrC9B,OAAA;MACAC,MAAA;MACAC,WAAA;MACAC,GAAA;MACAC,UAAA,EAAYuB,kBAAA;MACZtB;IACF;IAEA;IACA,MAAMa,SAAA,GAAYrB,qBAAA,CAAsB;MACtCkC,SAAA,EAAWjB,YAAA,CAAaiB,SAAS;MACjClB,SAAA;MACAiB;IACF;IAEA,OAAO;MAAEZ;IAAU;EACrB,EAAE,OAAOc,KAAA,EAAO;IACd,MAAMC,YAAA,GAAeD,KAAA,YAAiBzB,KAAA,GAAQyB,KAAA,CAAME,OAAO,GAAGC,MAAA,CAAOH,KAAA;IAErE7B,GAAA,CAAIM,OAAO,CAAC2B,MAAM,CAACJ,KAAK,CAAC;MACvBK,GAAA,EAAKL,KAAA;MACLM,GAAA,EAAK,2BAA2BjC,UAAA,MAAgB4B,YAAA;IAClD;IAEA,OAAO;MACLf,SAAA,EAAWtB,KAAA,CAAMuB,aAAa,CAC5B,OACA;QACEC,KAAA,EAAO;UACLC,UAAA,EAAY;UACZC,MAAA,EAAQ;UACRC,YAAA,EAAc;UACdC,KAAA,EAAO;UACPC,OAAA,EAAS;UACTC,SAAA,EAAW;QACb;MACF,GACA;IAEJ;EACF;AACF","ignoreList":[]}
+{"version":3,"file":"renderWidgetServerFn.js","names":["React","RenderServerComponent","extractLocaleData","renderWidgetHandler","cookies","locale","permissions","req","widgetData","widgetSlug","user","Error","widgets","payload","config","admin","dashboard","importMap","widgetConfig","find","widget","slug","component","createElement","style","background","border","borderRadius","color","padding","textAlign","localeFilteredData","fields","length","serverProps","Component","error","errorMessage","message","String","logger","err","msg"],"sources":["../../../../../../src/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.ts"],"sourcesContent":["import type { Field, ServerFunction, WidgetServerProps } from 'payload'\n\nimport React from 'react'\n\nimport { RenderServerComponent } from '../../../../../elements/RenderServerComponent/index.js'\nimport { extractLocaleData } from '../utils/localeUtils.js'\n\nexport type RenderWidgetServerFnArgs = {\n  /**\n   * Instance-specific data for this widget\n   */\n  widgetData?: Record<string, unknown>\n  /**\n   * The slug of the widget to render\n   */\n  widgetSlug: string\n}\n\nexport type RenderWidgetServerFnReturnType = {\n  component: React.ReactNode\n}\n\n/**\n * Server function to render a widget on-demand.\n * Similar to render-field but specifically for dashboard widgets.\n */\nexport const renderWidgetHandler: ServerFunction<\n  RenderWidgetServerFnArgs,\n  RenderWidgetServerFnReturnType\n> = ({ cookies, locale, permissions, req, widgetData, widgetSlug }) => {\n  if (!req.user) {\n    throw new Error('Unauthorized')\n  }\n\n  const { widgets } = req.payload.config.admin.dashboard\n  const { importMap } = req.payload\n\n  // Find the widget configuration\n  const widgetConfig = widgets.find((widget) => widget.slug === widgetSlug)\n\n  if (!widgetConfig) {\n    return {\n      component: React.createElement(\n        'div',\n        {\n          style: {\n            background: 'var(--color-bg-secondary)',\n            border: 'var(--stroke-width-small) solid var(--color-border)',\n            borderRadius: 'var(--radius-medium)',\n            color: 'var(--color-text)',\n            padding: 'var(--spacer-3)',\n            textAlign: 'center',\n          },\n        },\n        `Widget \"${widgetSlug}\" not found`,\n      ),\n    }\n  }\n\n  try {\n    const localeFilteredData = widgetConfig.fields?.length\n      ? extractLocaleData(widgetData || {}, req.locale || 'en', widgetConfig.fields)\n      : widgetData || {}\n\n    const serverProps: WidgetServerProps = {\n      cookies,\n      locale,\n      permissions,\n      req,\n      widgetData: localeFilteredData,\n      widgetSlug,\n    }\n\n    // Render the widget server component\n    const component = RenderServerComponent({\n      Component: widgetConfig.Component,\n      importMap,\n      serverProps,\n    })\n\n    return { component }\n  } catch (error) {\n    const errorMessage = error instanceof Error ? error.message : String(error)\n\n    req.payload.logger.error({\n      err: error,\n      msg: `Error rendering widget \"${widgetSlug}\": ${errorMessage}`,\n    })\n\n    return {\n      component: React.createElement(\n        'div',\n        {\n          style: {\n            background: 'var(--color-bg-danger-tertiary)',\n            border: 'var(--stroke-width-small) solid var(--color-border-danger)',\n            borderRadius: 'var(--radius-medium)',\n            color: 'var(--color-text-danger)',\n            padding: 'var(--spacer-3)',\n            textAlign: 'center',\n          },\n        },\n        'Error loading widget',\n      ),\n    }\n  }\n}\n"],"mappings":"AAEA,OAAOA,KAAA,MAAW;AAElB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,iBAAiB,QAAQ;AAiBlC;;;;AAIA,OAAO,MAAMC,mBAAA,GAGTA,CAAC;EAAEC,OAAO;EAAEC,MAAM;EAAEC,WAAW;EAAEC,GAAG;EAAEC,UAAU;EAAEC;AAAU,CAAE;EAChE,IAAI,CAACF,GAAA,CAAIG,IAAI,EAAE;IACb,MAAM,IAAIC,KAAA,CAAM;EAClB;EAEA,MAAM;IAAEC;EAAO,CAAE,GAAGL,GAAA,CAAIM,OAAO,CAACC,MAAM,CAACC,KAAK,CAACC,SAAS;EACtD,MAAM;IAAEC;EAAS,CAAE,GAAGV,GAAA,CAAIM,OAAO;EAEjC;EACA,MAAMK,YAAA,GAAeN,OAAA,CAAQO,IAAI,CAAEC,MAAA,IAAWA,MAAA,CAAOC,IAAI,KAAKZ,UAAA;EAE9D,IAAI,CAACS,YAAA,EAAc;IACjB,OAAO;MACLI,SAAA,EAAWtB,KAAA,CAAMuB,aAAa,CAC5B,OACA;QACEC,KAAA,EAAO;UACLC,UAAA,EAAY;UACZC,MAAA,EAAQ;UACRC,YAAA,EAAc;UACdC,KAAA,EAAO;UACPC,OAAA,EAAS;UACTC,SAAA,EAAW;QACb;MACF,GACA,WAAWrB,UAAA,aAAuB;IAEtC;EACF;EAEA,IAAI;IACF,MAAMsB,kBAAA,GAAqBb,YAAA,CAAac,MAAM,EAAEC,MAAA,GAC5C/B,iBAAA,CAAkBM,UAAA,IAAc,CAAC,GAAGD,GAAA,CAAIF,MAAM,IAAI,MAAMa,YAAA,CAAac,MAAM,IAC3ExB,UAAA,IAAc,CAAC;IAEnB,MAAM0B,WAAA,GAAiC;MACrC9B,OAAA;MACAC,MAAA;MACAC,WAAA;MACAC,GAAA;MACAC,UAAA,EAAYuB,kBAAA;MACZtB;IACF;IAEA;IACA,MAAMa,SAAA,GAAYrB,qBAAA,CAAsB;MACtCkC,SAAA,EAAWjB,YAAA,CAAaiB,SAAS;MACjClB,SAAA;MACAiB;IACF;IAEA,OAAO;MAAEZ;IAAU;EACrB,EAAE,OAAOc,KAAA,EAAO;IACd,MAAMC,YAAA,GAAeD,KAAA,YAAiBzB,KAAA,GAAQyB,KAAA,CAAME,OAAO,GAAGC,MAAA,CAAOH,KAAA;IAErE7B,GAAA,CAAIM,OAAO,CAAC2B,MAAM,CAACJ,KAAK,CAAC;MACvBK,GAAA,EAAKL,KAAA;MACLM,GAAA,EAAK,2BAA2BjC,UAAA,MAAgB4B,YAAA;IAClD;IAEA,OAAO;MACLf,SAAA,EAAWtB,KAAA,CAAMuB,aAAa,CAC5B,OACA;QACEC,KAAA,EAAO;UACLC,UAAA,EAAY;UACZC,MAAA,EAAQ;UACRC,YAAA,EAAc;UACdC,KAAA,EAAO;UACPC,OAAA,EAAS;UACTC,SAAA,EAAW;QACb;MACF,GACA;IAEJ;EACF;AACF","ignoreList":[]}

package/dist/views/Edit/index.css

@@ -12,35 +12,32 @@
   }
 
   .collection-edit__main-wrapper--scroll-fields-only {
-    height: calc(
-      100dvh - var(--app-header-height, 0px) - var(--doc-controls-height, 0px) -
-        var(--doc-header-height, 0px)
-    );
-    overflow: hidden;
+    height: auto;
+    overflow: visible;
 
     .collection-edit__main {
-      min-height: 0;
-      overflow: hidden;
+      min-height: initial;
+      overflow: visible;
     }
 
     .document-fields {
-      height: 100%;
-      min-height: 0;
+      height: auto;
+      min-height: initial;
     }
 
     .document-fields--force-sidebar-wrap {
-      overflow-y: auto;
-      overscroll-behavior: contain;
-      scrollbar-width: thin;
-      scrollbar-color: var(--scrollbar-color) transparent;
+      overflow-y: visible;
+      overscroll-behavior: auto;
+      scrollbar-width: auto;
+      scrollbar-color: auto;
     }
 
     .document-fields:not(.document-fields--force-sidebar-wrap) .document-fields__main {
-      min-height: 0;
-      overflow-y: auto;
-      overscroll-behavior: contain;
-      scrollbar-width: thin;
-      scrollbar-color: var(--scrollbar-color) transparent;
+      min-height: initial;
+      overflow-y: visible;
+      overscroll-behavior: auto;
+      scrollbar-width: auto;
+      scrollbar-color: auto;
     }
 
     .document-fields--force-sidebar-wrap .document-fields__main {
@@ -51,9 +48,9 @@
     }
 
     .document-fields__sidebar {
-      overscroll-behavior: contain;
-      scrollbar-width: thin;
-      scrollbar-color: var(--scrollbar-color) transparent;
+      overscroll-behavior: auto;
+      scrollbar-width: auto;
+      scrollbar-color: auto;
     }
 
     .document-fields__sidebar-wrap {
@@ -63,8 +60,8 @@
   }
 
   .template-default__wrap:has(.collection-edit__main-wrapper--scroll-fields-only) {
-    height: 100dvh;
-    overflow: hidden;
+    height: auto;
+    overflow: visible;
   }
 
   .collection-edit__main {
@@ -76,12 +73,22 @@
   }
 
   .collection-edit__main-wrapper--has-upload-panel {
+    flex-direction: column-reverse;
+    gap: var(--spacer-5);
+
     .collection-edit__main {
       flex: 1;
     }
+
     .file-manager {
-      flex: 2;
-      border-inline-start: var(--stroke-width-small) solid var(--color-border);
+      order: 0;
+      /* Stacked — no vertical divider; the file manager's own bottom border separates it. */
+      border-inline-start: 0;
+    }
+
+    .document-fields {
+      flex: 0 0 auto;
+      width: 100%;
     }
 
     .collection-edit__main:not(:has(.field-type)) {
@@ -95,61 +102,62 @@
 
   /* Container query (not viewport) so the layout stacks based on the space actually available
      to the edit view — e.g. inside a narrow document drawer it uses the stacked mobile layout. */
-  @container edit-main (max-width: 1024px) {
+  @container edit-main (min-width: 1024px) {
     .collection-edit__main-wrapper--scroll-fields-only {
-      height: auto;
-      overflow: visible;
+      height: calc(
+        100dvh - var(--app-header-height, 0px) - var(--doc-controls-height, 0px) -
+          var(--doc-header-height, 0px)
+      );
+      overflow: hidden;
 
       .collection-edit__main {
-        min-height: initial;
-        overflow: visible;
+        min-height: 0;
+        overflow: hidden;
       }
 
       .document-fields {
-        height: auto;
-        min-height: initial;
+        height: 100%;
+        min-height: 0;
       }
 
       .document-fields--force-sidebar-wrap {
-        overflow-y: visible;
-        overscroll-behavior: auto;
-        scrollbar-width: auto;
-        scrollbar-color: auto;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: var(--scrollbar-color) transparent;
       }
 
       .document-fields:not(.document-fields--force-sidebar-wrap) .document-fields__main {
-        min-height: initial;
-        overflow-y: visible;
-        overscroll-behavior: auto;
-        scrollbar-width: auto;
-        scrollbar-color: auto;
+        min-height: 0;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: var(--scrollbar-color) transparent;
       }
 
       .document-fields__sidebar {
-        overscroll-behavior: auto;
-        scrollbar-width: auto;
-        scrollbar-color: auto;
+        overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: var(--scrollbar-color) transparent;
       }
     }
 
     .template-default__wrap:has(.collection-edit__main-wrapper--scroll-fields-only) {
-      height: auto;
-      overflow: visible;
+      height: 100dvh;
+      overflow: hidden;
     }
 
     .collection-edit__main-wrapper--has-upload-panel {
-      flex-direction: column-reverse;
-      gap: var(--spacer-5);
+      flex-direction: row;
+      gap: 0;
 
       .file-manager {
-        order: 0;
-        flex: 1 0 0;
-        /* Stacked — no vertical divider; the file manager's own bottom border separates it. */
-        border-inline-start: 0;
+        flex: 2;
+        border-inline-start: var(--stroke-width-small) solid var(--color-border);
       }
 
       .document-fields {
-        flex: 0 0 auto;
+        flex: initial;
         width: 100%;
       }
     }

package/dist/views/HierarchyList/index.css

@@ -45,7 +45,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: var(--spacer-3);
+    gap: var(--spacer-2-5);
   }
 
   .hierarchy-list__no-results > * {

package/dist/views/List/index.css

@@ -12,7 +12,7 @@
 
   .collection-list__sub-header {
     flex-basis: 100%;
-    padding-top: var(--spacer-3);
+    padding-top: var(--spacer-2-5);
   }
 
   .collection-list .table table {

package/dist/views/List/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EAKpB,SAAS,EACT,mBAAmB,EACnB,uBAAuB,EAEvB,gBAAgB,EAGjB,MAAM,SAAS,CAAA;AAYhB,OAAO,KAAmB,MAAM,OAAO,CAAA;AAsBvC,OAAO,aAAa,CAAA;AAEpB;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,iBAAiB,CAAC,EACd,gBAAgB,GAChB,KAAK,CAAC,aAAa,CAAC,mBAAmB,GAAG,CAAC,mBAAmB,GAAG,uBAAuB,CAAC,CAAC,CAAA;IAC9F,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACrC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,mBAAmB,EAAE,OAAO,CAAA;IAC5B,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,GAAG,oBAAoB,CAAA;AAExB;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,SACnB,kBAAkB,KACvB,OAAO,CAAC;IACT,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;CACtB,CAieA,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAWjD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EAKpB,SAAS,EACT,mBAAmB,EACnB,uBAAuB,EAEvB,gBAAgB,EAGjB,MAAM,SAAS,CAAA;AAYhB,OAAO,KAAmB,MAAM,OAAO,CAAA;AAsBvC,OAAO,aAAa,CAAA;AAEpB;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,iBAAiB,CAAC,EACd,gBAAgB,GAChB,KAAK,CAAC,aAAa,CAAC,mBAAmB,GAAG,CAAC,mBAAmB,GAAG,uBAAuB,CAAC,CAAC,CAAA;IAC9F,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACrC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,mBAAmB,EAAE,OAAO,CAAA;IAC5B,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,GAAG,oBAAoB,CAAA;AAExB;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,SACnB,kBAAkB,KACvB,OAAO,CAAC;IACT,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;CACtB,CAseA,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAWjD,CAAA"}

package/dist/views/List/index.js

@@ -162,6 +162,10 @@ export const renderListView = async args => {
   });
   /** Automatically force select active columns. */
   const select = transformColumnsToSelect(columns);
+  /** Force select `useAsTitle` for accessible row-selection labels, even if its column is hidden. */
+  if (enableRowSelections && collectionConfig.admin.useAsTitle) {
+    select[collectionConfig.admin.useAsTitle] = true;
+  }
   /** Force select image fields for list view thumbnails */
   appendUploadSelectFields({
     collectionConfig,