tinacms 1.6.4 → 1.6.6

package/dist/index.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("zod"), require("react"), require("react-dom"), require("@udecode/plate-headless"), require("@monaco-editor/react"), require("slate-react"), require("@headlessui/react"), require("slate"), require("final-form-arrays"), require("final-form-set-field-data"), require("final-form"), require("react-final-form"), require("prop-types"), require("react-beautiful-dnd"), require("@radix-ui/react-popover"), require("react-color"), require("color-string"), require("react-dropzone"), require("@tinacms/sharedctx"), require("lodash.get"), require("moment"), require("date-fns"), require("@react-hook/window-size"), require("is-hotkey"), require("@floating-ui/dom"), require("graphql"), require("graphql-tag"), require("@tinacms/schema-tools"), require("yup"), require("@graphql-inspector/core"), require("react-router-dom"), require("@tinacms/mdx")) : typeof define === "function" && define.amd ? define(["exports", "zod", "react", "react-dom", "@udecode/plate-headless", "@monaco-editor/react", "slate-react", "@headlessui/react", "slate", "final-form-arrays", "final-form-set-field-data", "final-form", "react-final-form", "prop-types", "react-beautiful-dnd", "@radix-ui/react-popover", "react-color", "color-string", "react-dropzone", "@tinacms/sharedctx", "lodash.get", "moment", "date-fns", "@react-hook/window-size", "is-hotkey", "@floating-ui/dom", "graphql", "graphql-tag", "@tinacms/schema-tools", "yup", "@graphql-inspector/core", "react-router-dom", "@tinacms/mdx"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
-})(this, function(exports2, zod, React, reactDom, plateHeadless, MonacoEditor, slateReact, react, slate, arrayMutators, setFieldData, finalForm, reactFinalForm, PropTypes, reactBeautifulDnd, Popover$1, pkg$1, pkg, dropzone, sharedctx, get, moment, dateFns, windowSize, isHotkey, dom, graphql, gql$1, schemaTools, yup, core, reactRouterDom, mdx) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("zod"), require("react"), require("react-dom"), require("@udecode/plate-headless"), require("@monaco-editor/react"), require("slate-react"), require("@headlessui/react"), require("slate"), require("final-form-arrays"), require("final-form-set-field-data"), require("final-form"), require("react-final-form"), require("prop-types"), require("react-beautiful-dnd"), require("@radix-ui/react-popover"), require("react-color"), require("color-string"), require("react-dropzone"), require("@tinacms/sharedctx"), require("lodash.get"), require("moment"), require("date-fns"), require("is-hotkey"), require("@floating-ui/dom"), require("@react-hook/window-size"), require("graphql"), require("graphql-tag"), require("@tinacms/schema-tools"), require("yup"), require("@graphql-inspector/core"), require("react-router-dom"), require("@tinacms/mdx")) : typeof define === "function" && define.amd ? define(["exports", "zod", "react", "react-dom", "@udecode/plate-headless", "@monaco-editor/react", "slate-react", "@headlessui/react", "slate", "final-form-arrays", "final-form-set-field-data", "final-form", "react-final-form", "prop-types", "react-beautiful-dnd", "@radix-ui/react-popover", "react-color", "color-string", "react-dropzone", "@tinacms/sharedctx", "lodash.get", "moment", "date-fns", "is-hotkey", "@floating-ui/dom", "@react-hook/window-size", "graphql", "graphql-tag", "@tinacms/schema-tools", "yup", "@graphql-inspector/core", "react-router-dom", "@tinacms/mdx"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
+})(this, function(exports2, zod, React, reactDom, plateHeadless, MonacoEditor, slateReact, react, slate, arrayMutators, setFieldData, finalForm, reactFinalForm, PropTypes, reactBeautifulDnd, Popover$1, pkg$1, pkg, dropzone, sharedctx, get, moment, dateFns, isHotkey, dom, windowSize, graphql, gql$1, schemaTools, yup, core, reactRouterDom, mdx) {
   "use strict";var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {
@@ -56,7 +56,7 @@ var __publicField = (obj, key, value) => {
     return modalContainer;
   }
   const ModalOverlay = ({ children }) => {
-    return /* @__PURE__ */ React__namespace.createElement("div", { className: "fixed inset-0 z-modal w-screen h-screen overflow-y-auto" }, children, /* @__PURE__ */ React__namespace.createElement("div", { className: "fixed -z-1 inset-0 opacity-80 bg-gradient-to-br from-gray-800 via-gray-900 to-black" }));
+    return /* @__PURE__ */ React__namespace.createElement("div", { className: "fixed inset-0 z-modal w-screen h-dvh overflow-y-auto" }, children, /* @__PURE__ */ React__namespace.createElement("div", { className: "fixed -z-1 inset-0 opacity-80 bg-gradient-to-br from-gray-800 via-gray-900 to-black" }));
   };
   const Modal = (props) => {
     const { portalNode } = useModalContainer();
@@ -2803,6 +2803,9 @@ var __publicField = (obj, key, value) => {
   function BiMenu(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z" }, "child": [] }] })(props);
   }
+  function BiMovie(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M20 3H4c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zm.001 6c-.001 0-.001 0 0 0h-.466l-2.667-4H20l.001 4zM9.535 9 6.868 5h2.597l2.667 4H9.535zm5 0-2.667-4h2.597l2.667 4h-2.597zM4 5h.465l2.667 4H4V5zm0 14v-8h16l.002 8H4z" }, "child": [] }] })(props);
+  }
   function BiPencil(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M4 21a1 1 0 0 0 .24 0l4-1a1 1 0 0 0 .47-.26L21 7.41a2 2 0 0 0 0-2.82L19.42 3a2 2 0 0 0-2.83 0L4.3 15.29a1.06 1.06 0 0 0-.27.47l-1 4A1 1 0 0 0 3.76 21 1 1 0 0 0 4 21zM18 4.41 19.59 6 18 7.59 16.42 6zM5.91 16.51 15 7.41 16.59 9l-9.1 9.1-2.11.52z" }, "child": [] }] })(props);
   }
@@ -2887,13 +2890,13 @@ var __publicField = (obj, key, value) => {
       {
         className: `rounded-lg border shadow-sm ${sizeClasses[size]} ${containerClasses[type]} ${className}`
       },
-      /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
         MessageIcon,
         {
           type,
           className: `${size === "small" ? "w-5" : "w-6"} h-auto flex-shrink-0 ${iconClasses[type]}`
         }
-      ), /* @__PURE__ */ React.createElement("div", { className: `flex-1 ${textClasses[type]}` }, children), link && /* @__PURE__ */ React.createElement(
+      ), /* @__PURE__ */ React.createElement("div", { className: `flex-1 ${textClasses[type]}` }, children)), link && /* @__PURE__ */ React.createElement(
         "a",
         {
           href: link,
@@ -3513,7 +3516,7 @@ var __publicField = (obj, key, value) => {
         ref.current.focus();
       }
     }, [field == null ? void 0 : field.experimental_focusIntent, ref]);
-    return /* @__PURE__ */ React__namespace.createElement("div", { className: "relative group" }, /* @__PURE__ */ React__namespace.createElement(
+    return /* @__PURE__ */ React__namespace.createElement("div", { className: "relative group w-full md:w-auto" }, /* @__PURE__ */ React__namespace.createElement(
       "select",
       {
         id: input.name,
@@ -3715,6 +3718,9 @@ var __publicField = (obj, key, value) => {
   const isImage = (filename) => {
     return /\.(gif|jpg|jpeg|tiff|png|svg|webp|avif)(\?.*)?$/i.test(filename);
   };
+  const isVideo = (filename) => {
+    return /\.(mp4|webm|ogg|m4v|mov|avi|flv|mkv)(\?.*)?$/i.test(filename);
+  };
   const absoluteImgURL = (str) => {
     if (str.startsWith("http"))
       return str;
@@ -5870,6 +5876,8 @@ var __publicField = (obj, key, value) => {
           handlersMap[_this._uid] = function(event) {
             if (_this.componentNode === null)
               return;
+            if (_this.initTimeStamp > event.timeStamp)
+              return;
             if (_this.props.preventDefault) {
               event.preventDefault();
             }
@@ -5906,6 +5914,7 @@ var __publicField = (obj, key, value) => {
           return _this.instanceRef = ref;
         };
         _this._uid = uid();
+        _this.initTimeStamp = performance.now();
         return _this;
       }
       var _proto = onClickOutside.prototype;
@@ -7688,6 +7697,7 @@ var __publicField = (obj, key, value) => {
         return fetch(input, init);
       };
       this.accept = DEFAULT_MEDIA_UPLOAD_TYPES;
+      this.maxSize = 100 * 1024 * 1024;
       this.parse = (img) => {
         return img.src;
       };
@@ -7988,6 +7998,9 @@ var __publicField = (obj, key, value) => {
     get accept() {
       return this.store.accept;
     }
+    get maxSize() {
+      return this.store.maxSize || void 0;
+    }
     async persist(files) {
       try {
         this.events.dispatch({ type: "media:upload:start", uploaded: files });
@@ -8074,7 +8087,7 @@ var __publicField = (obj, key, value) => {
       this.events.dispatch({ type: "flag:set", key, value });
     }
   }
-  const _CMS = class {
+  const _CMS = class _CMS2 {
     /**
      * @hidden
      */
@@ -8086,11 +8099,11 @@ var __publicField = (obj, key, value) => {
       this.media = new MediaManager$1(new DummyMediaStore(), this.events);
       this.enable = () => {
         this._enabled = true;
-        this.events.dispatch(_CMS.ENABLED);
+        this.events.dispatch(_CMS2.ENABLED);
       };
       this.disable = () => {
         this._enabled = false;
-        this.events.dispatch(_CMS.DISABLED);
+        this.events.dispatch(_CMS2.DISABLED);
       };
       this.toggle = () => {
         if (this.enabled) {
@@ -8172,9 +8185,9 @@ var __publicField = (obj, key, value) => {
       return !this._enabled;
     }
   };
+  _CMS.ENABLED = { type: "cms:enable" };
+  _CMS.DISABLED = { type: "cms:disable" };
   let CMS = _CMS;
-  CMS.ENABLED = { type: "cms:enable" };
-  CMS.DISABLED = { type: "cms:disable" };
   let Alerts$1 = class Alerts {
     constructor(events, map = {}) {
       this.events = events;
@@ -9088,7 +9101,7 @@ var __publicField = (obj, key, value) => {
   const SidebarContext = React__namespace.createContext(null);
   const minPreviewWidth = 440;
   const minSidebarWidth = 360;
-  const navBreakpoint = 1e3;
+  const navBreakpoint = 1279;
   const LOCALSTATEKEY = "tina.sidebarState";
   const LOCALWIDTHKEY = "tina.sidebarWidth";
   const defaultSidebarWidth = 440;
@@ -9559,12 +9572,12 @@ var __publicField = (obj, key, value) => {
     return /* @__PURE__ */ React__namespace.createElement(
       "div",
       {
-        className: `fixed top-0 left-0 h-screen z-base ${displayState === "closed" ? `pointer-events-none` : ``}`
+        className: `fixed top-0 left-0 h-dvh z-base ${displayState === "closed" ? `pointer-events-none` : ``}`
       },
       /* @__PURE__ */ React__namespace.createElement(
         "div",
         {
-          className: `relative h-screen transform flex ${displayState !== "closed" ? `` : `-translate-x-full`} ${resizingSidebar ? `transition-none` : displayState === "closed" ? `transition-all duration-300 ease-in` : displayState === "fullscreen" ? `transition-all duration-150 ease-out` : `transition-all duration-300 ease-out`}`,
+          className: `relative h-dvh transform flex ${displayState !== "closed" ? `` : `-translate-x-full`} ${resizingSidebar ? `transition-none` : displayState === "closed" ? `transition-all duration-300 ease-in` : displayState === "fullscreen" ? `transition-all duration-150 ease-out` : `transition-all duration-300 ease-out`}`,
           style: {
             width: displayState === "fullscreen" ? "100vw" : sidebarWidth + "px",
             maxWidth: displayState === "fullscreen" ? "100vw" : "calc(100vw - 8px)",
@@ -9631,7 +9644,12 @@ var __publicField = (obj, key, value) => {
     return /* @__PURE__ */ React.createElement("div", { className: "w-full flex flex-shrink-0 justify-end gap-2 items-center" }, /* @__PURE__ */ React.createElement(Button, { variant, disabled: !hasPrev, onClick: navigatePrev }, /* @__PURE__ */ React.createElement(BiLeftArrowAlt, { className: "w-6 h-full mr-2 opacity-70" }), " Previous"), /* @__PURE__ */ React.createElement(Button, { variant, disabled: !hasNext, onClick: navigateNext }, "Next ", /* @__PURE__ */ React.createElement(BiRightArrowAlt, { className: "w-6 h-full ml-2 opacity-70" })));
   }
   function ListMediaItem({ item, onClick, active }) {
-    const FileIcon = item.type === "dir" ? BiFolder : BiFile;
+    let FileIcon = BiFile;
+    if (item.type === "dir") {
+      FileIcon = BiFolder;
+    } else if (isVideo(item.src)) {
+      FileIcon = BiMovie;
+    }
     const thumbnail = (item.thumbnails || {})["75x75"];
     return /* @__PURE__ */ React.createElement(
       "li",
@@ -9664,7 +9682,12 @@ var __publicField = (obj, key, value) => {
     );
   }
   function GridMediaItem({ item, active, onClick }) {
-    const FileIcon = item.type === "dir" ? BiFolder : BiFile;
+    let FileIcon = BiFile;
+    if (item.type === "dir") {
+      FileIcon = BiFolder;
+    } else if (isVideo(item.src)) {
+      FileIcon = BiMovie;
+    }
     const thumbnail = (item.thumbnails || {})["400x400"];
     return /* @__PURE__ */ React.createElement(
       "li",
@@ -9873,6 +9896,7 @@ var __publicField = (obj, key, value) => {
     close: close2,
     ...props
   }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const cms = useCMS();
     const [listState, setListState] = React.useState(() => {
       if (cms.media.isConfigured)
@@ -9967,10 +9991,14 @@ var __publicField = (obj, key, value) => {
       };
     }
     const [uploading, setUploading] = React.useState(false);
+    const accept = Array.isArray(
+      (_c = (_b = (_a = cms.api.tina.schema.schema) == null ? void 0 : _a.config) == null ? void 0 : _b.media) == null ? void 0 : _c.accept
+    ) ? (_f = (_e = (_d = cms.api.tina.schema.schema) == null ? void 0 : _d.config) == null ? void 0 : _e.media) == null ? void 0 : _f.accept.join(",") : (_i = (_h = (_g = cms.api.tina.schema.schema) == null ? void 0 : _g.config) == null ? void 0 : _h.media) == null ? void 0 : _i.accept;
     const { getRootProps, getInputProps, isDragActive } = useDropzone({
       accept: dropzoneAcceptFromString(
-        cms.media.accept || DEFAULT_MEDIA_UPLOAD_TYPES
+        accept || cms.media.accept || DEFAULT_MEDIA_UPLOAD_TYPES
       ),
+      maxSize: cms.media.maxSize,
       multiple: true,
       onDrop: async (files, fileRejections) => {
         try {
@@ -11067,16 +11095,13 @@ var __publicField = (obj, key, value) => {
     const openModal = () => setOpen(true);
     const { currentBranch } = useBranchData();
     const isProtected = cms.api.tina.usingProtectedBranch();
-    const navBreakpoint2 = 1e3;
-    const windowWidth = windowSize.useWindowWidth();
-    const renderNavToggle = windowWidth < navBreakpoint2 + 1;
     const previewFunction = (_d = (_c = (_b = (_a = cms.api.tina.schema) == null ? void 0 : _a.config) == null ? void 0 : _b.config) == null ? void 0 : _c.ui) == null ? void 0 : _d.previewUrl;
     const branch = decodeURIComponent(cms.api.tina.branch);
     const previewUrl = previewFunction ? (_e = previewFunction({ branch })) == null ? void 0 : _e.url : null;
     return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
       "div",
       {
-        className: `w-full bg-white flex items-center gap-2 -mb-px border-b border-gray-100 py-3 pr-4 ${renderNavToggle ? "pl-20" : "pl-4"}`
+        className: `w-full bg-white flex items-center gap-2 -mb-px border-b border-gray-100 py-3 pr-4 pl-20 xl:pl-4`
       },
       /* @__PURE__ */ React__namespace.createElement(
         Button,
@@ -11338,7 +11363,7 @@ var __publicField = (obj, key, value) => {
     );
   };
   const FormStatus = ({ pristine }) => {
-    return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-0 items-center" }, !pristine && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("span", { className: "w-3 h-3 flex-0 rounded-full bg-yellow-300 border border-yellow-400 mr-2" }), " ", /* @__PURE__ */ React__namespace.createElement("p", { className: "text-gray-500 text-xs leading-tight whitespace-nowrap" }, "Unsaved Changes")), pristine && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("span", { className: "w-3 h-3 flex-0 rounded-full bg-green-300 border border-green-400 mr-2" }), " ", /* @__PURE__ */ React__namespace.createElement("p", { className: "text-gray-500 text-xs leading-tight whitespace-nowrap" }, "No Changes")));
+    return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-0 items-center" }, !pristine && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("p", { className: "text-gray-500 text-xs leading-tight whitespace-nowrap mr-2" }, "Unsaved Changes"), /* @__PURE__ */ React__namespace.createElement("span", { className: "w-3 h-3 flex-0 rounded-full bg-red-300 border border-red-400" }), " "), pristine && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("span", { className: "w-3 h-3 flex-0 rounded-full bg-green-300 border border-green-400" }), " "));
   };
   const FormWrapper = ({
     header,
@@ -11352,7 +11377,7 @@ var __publicField = (obj, key, value) => {
         className: "h-full overflow-y-auto max-h-full bg-gray-50"
       },
       header,
-      /* @__PURE__ */ React__namespace.createElement("div", { className: "py-5 px-6" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "w-full flex justify-center" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "w-full max-w-form" }, children)))
+      /* @__PURE__ */ React__namespace.createElement("div", { className: "py-5 px-6 xl:px-12" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "w-full flex justify-center" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "w-full" }, children)))
     );
   };
   const Emoji = ({ className = "", ...props }) => /* @__PURE__ */ React__namespace.createElement(
@@ -13052,7 +13077,7 @@ var __publicField = (obj, key, value) => {
   function ErrorMessage({ error }) {
     const message = buildErrorMessage(error);
     const { setRawMode } = useEditorContext();
-    return /* @__PURE__ */ React.createElement("div", { contentEditable: false, className: "bg-red-50 sm:rounded-lg" }, /* @__PURE__ */ React.createElement("div", { className: "px-4 py-5 sm:p-6" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg leading-6 font-medium text-red-800" }, "Error parsing markdown"), /* @__PURE__ */ React.createElement("div", { className: "mt-2 max-w-xl text-sm text-red-800 space-y-4" }, /* @__PURE__ */ React.createElement("p", null, message), /* @__PURE__ */ React.createElement("p", null, "To fix these errors, edit the content in raw-mode."), /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { contentEditable: false, className: "bg-red-50 sm:rounded-lg" }, /* @__PURE__ */ React.createElement("div", { className: "px-4 py-5 sm:p-6" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg leading-6 font-medium text-red-800" }, "❌ Error parsing markdown"), /* @__PURE__ */ React.createElement("div", { className: "mt-2 max-w-xl text-sm text-red-800 space-y-4" }, /* @__PURE__ */ React.createElement("p", null, message), /* @__PURE__ */ React.createElement("p", null, "To fix these errors, edit the content in raw-mode."), /* @__PURE__ */ React.createElement(
       "button",
       {
         onClick: () => setRawMode(true),
@@ -28022,7 +28047,7 @@ mutation addPendingDocumentMutation(
         });
       }
     };
-    let modalTitle = "Tina Cloud Authorization";
+    let modalTitle = "Tina Cloud";
     if (activeModal === "authenticate" && loginStrategy === "Redirect" && !isTinaCloud) {
       modalTitle = "Enter into edit mode";
     } else if (activeModal === "authenticate" && loginStrategy === "UsernamePassword") {
@@ -28038,20 +28063,12 @@ mutation addPendingDocumentMutation(
       ModalBuilder,
       {
         title: modalTitle,
-        message: isTinaCloud ? "To save edits, Tina Cloud authorization is required. On save, changes will get committed using your account." : "To save edits, enter into edit mode. On save, changes will saved to the local filesystem.",
+        message: isTinaCloud ? "Your site uses Tina Cloud to track changes. To make edits, you must log in." : "To save edits, enter into edit mode. On save, changes will saved to the local filesystem.",
         close,
         actions: [
           ...otherModalActions,
           {
-            action: async () => {
-              sharedctx.setEditing(false);
-              window.location.reload();
-            },
-            name: "Close",
-            primary: false
-          },
-          {
-            name: isTinaCloud ? "Continue to Tina Cloud" : "Enter Edit Mode",
+            name: isTinaCloud ? "Log in" : "Enter Edit Mode",
             action: handleAuthenticate,
             primary: true
           }
@@ -28589,7 +28606,7 @@ mutation addPendingDocumentMutation(
       !schema.config.contentApiUrlOverride
     ) {
       throw new Error(
-        "Invalid setup. See https://tina.io/docs/tina-cloud/connecting-site/ for more information."
+        "Invalid setup. See https://tina.io/docs/tina-cloud/overview for more information."
       );
     }
     if (!schema) {
@@ -28805,7 +28822,7 @@ This will work when developing locally but NOT when deployed to production.
     const cloudConfigs = cms.plugins.getType("cloud-config").all();
     const [menuIsOpen, setMenuIsOpen] = React.useState(false);
     const isLocalMode = (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode;
-    const navBreakpoint2 = 1e3;
+    const navBreakpoint2 = 1279;
     const windowWidth = windowSize.useWindowWidth();
     const renderDesktopNav = windowWidth > navBreakpoint2;
     const activeScreens = screens.filter(
@@ -29112,14 +29129,14 @@ This will work when developing locally but NOT when deployed to production.
     isLocalMode,
     children
   }) => {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, isLocalMode && /* @__PURE__ */ React.createElement(LocalWarning, null), !isLocalMode && /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", { className: "pt-12 px-12" }, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, /* @__PURE__ */ React.createElement("div", { className: "w-full flex justify-between items-end" }, children))));
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, isLocalMode && /* @__PURE__ */ React.createElement(LocalWarning, null), !isLocalMode && /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", { className: "pt-16 xl:pt-12 px-6 xl:px-12" }, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, /* @__PURE__ */ React.createElement("div", { className: "w-full flex justify-between items-end" }, children))));
   };
   const PageBody = ({
     children
-  }) => /* @__PURE__ */ React.createElement("div", { className: "py-8 px-12" }, children);
+  }) => /* @__PURE__ */ React.createElement("div", { className: "py-8 px-6 xl:px-12" }, children);
   const PageBodyNarrow = ({
     children
-  }) => /* @__PURE__ */ React.createElement("div", { className: "py-10 px-12" }, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, children));
+  }) => /* @__PURE__ */ React.createElement("div", { className: "py-10 px-6 xl:px-12" }, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, children));
   const DashboardPage = () => {
     return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
       var _a, _b;
@@ -29634,7 +29651,6 @@ This will work when developing locally but NOT when deployed to production.
         },
         (collection, _loading, reFetchCollection, collectionExtra) => {
           var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
-          collection.documents.totalCount;
           const documents = collection.documents.edges;
           const admin = cms.api.admin;
           const pageInfo = collection.documents.pageInfo;
@@ -29768,7 +29784,7 @@ This will work when developing locally but NOT when deployed to production.
               },
               close: () => setFolderModalOpen(false)
             }
-          ), /* @__PURE__ */ React.createElement(PageHeader, { isLocalMode: (_l = (_k = cms == null ? void 0 : cms.api) == null ? void 0 : _k.tina) == null ? void 0 : _l.isLocalMode }, /* @__PURE__ */ React.createElement("div", { className: "w-full grid grid-flow-col items-end gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React.createElement("h3", { className: "font-sans text-2xl text-gray-700" }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React.createElement("div", { className: "flex gap-4 items-start flex-wrap" }, (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, !search && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2 items-start" }, /* @__PURE__ */ React.createElement(
+          ), /* @__PURE__ */ React.createElement(PageHeader, { isLocalMode: (_l = (_k = cms == null ? void 0 : cms.api) == null ? void 0 : _k.tina) == null ? void 0 : _l.isLocalMode }, /* @__PURE__ */ React.createElement("div", { className: "w-full" }, /* @__PURE__ */ React.createElement("h3", { className: "font-sans text-2xl text-gray-700" }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col lg:flex-row justify-between lg:items-end pt-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:flex-row gap-2 md:gap-4 items-start" }, (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, !search && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2 items-start w-full md:w-auto" }, /* @__PURE__ */ React.createElement(
             "label",
             {
               htmlFor: "sort",
@@ -29839,7 +29855,7 @@ This will work when developing locally but NOT when deployed to production.
               size: "small"
             },
             "Search not configured."
-          ))))), /* @__PURE__ */ React.createElement("div", { className: "flex self-end	justify-self-end" }, !collection.templates && allowCreate && /* @__PURE__ */ React.createElement(React.Fragment, null, allowCreateNestedFolder && /* @__PURE__ */ React.createElement(
+          )))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:flex-row items-start md:items-end gap-2 md:gap-0 pt-4 lg:pt-0" }, !collection.templates && allowCreate && /* @__PURE__ */ React.createElement(React.Fragment, null, allowCreateNestedFolder && /* @__PURE__ */ React.createElement(
             reactRouterDom.Link,
             {
               onMouseDown: (evt) => {
@@ -29852,7 +29868,7 @@ This will work when developing locally but NOT when deployed to production.
                 evt.stopPropagation();
               },
               to: "/collections/new-folder",
-              className: "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded-full justify-center transition-all duration-150 ease-out whitespace-nowrap shadow text-blue-500 bg-white hover:bg-[#f1f5f9] focus:ring-white focus:ring-blue-500 text-sm h-10 px-6 mr-4"
+              className: "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded-full justify-center transition-all duration-150 ease-out whitespace-nowrap shadow text-blue-500 bg-white hover:bg-[#f1f5f9] focus:ring-white focus:ring-blue-500 w-full md:w-auto text-sm h-10 px-6 mr-4"
             },
             /* @__PURE__ */ React.createElement(FaFolder, { className: "mr-2" }),
             "Add Folder",
@@ -29871,7 +29887,7 @@ This will work when developing locally but NOT when deployed to production.
                 "new",
                 collectionName
               ].join("/")}`,
-              className: "inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded-full justify-center transition-all duration-150 ease-out whitespace-nowrap shadow text-white bg-blue-500 hover:bg-blue-600 text-sm h-10 px-6"
+              className: "inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded-full justify-center transition-all duration-150 ease-out whitespace-nowrap shadow text-white bg-blue-500 hover:bg-blue-600 w-full md:w-auto text-sm h-10 px-6"
             },
             /* @__PURE__ */ React.createElement(FaFile, { className: "mr-2" }),
             "Add Files",
@@ -29883,7 +29899,7 @@ This will work when developing locally but NOT when deployed to production.
               templates: collection.templates,
               folder
             }
-          )))), /* @__PURE__ */ React.createElement(PageBody, null, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, sortField && !sortField.required && /* @__PURE__ */ React.createElement("p", { className: "mb-4 text-gray-500" }, /* @__PURE__ */ React.createElement("em", null, "Sorting on a non-required field. Some documents may be excluded (if they don't have a value for", " ", sortName, ")")), (folder.name && !search || documents.length > 0) && /* @__PURE__ */ React.createElement("table", { className: "table-auto shadow bg-white border-b border-gray-200 w-full max-w-full rounded-lg" }, /* @__PURE__ */ React.createElement("tbody", { className: "divide-y divide-gray-150" }, folder.name && !search ? /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { colSpan: 5 }, /* @__PURE__ */ React.createElement(
+          ))))), /* @__PURE__ */ React.createElement(PageBody, null, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, sortField && !sortField.required && /* @__PURE__ */ React.createElement("p", { className: "mb-4 text-gray-500" }, /* @__PURE__ */ React.createElement("em", null, "Sorting on a non-required field. Some documents may be excluded (if they don't have a value for", " ", sortName, ")")), /* @__PURE__ */ React.createElement("div", { className: "w-full overflow-x-auto" }, (folder.name && !search || documents.length > 0) && /* @__PURE__ */ React.createElement("table", { className: "table-auto shadow bg-white border-b border-gray-200 w-full max-w-full rounded-lg" }, /* @__PURE__ */ React.createElement("tbody", { className: "divide-y divide-gray-150" }, folder.name && !search ? /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { colSpan: 5 }, /* @__PURE__ */ React.createElement(
             Breadcrumb,
             {
               folder,
@@ -29893,34 +29909,33 @@ This will work when developing locally but NOT when deployed to production.
           ))) : null, documents.length > 0 && documents.map((document2) => {
             var _a2;
             if (document2.node.__typename === "Folder") {
-              return /* @__PURE__ */ React.createElement("tr", { key: `folder-${document2.node.path}` }, /* @__PURE__ */ React.createElement("td", { className: "pl-5 pr-3 py-3 truncate max-w-0" }, /* @__PURE__ */ React.createElement(
-                "a",
-                {
-                  className: "text-blue-600 hover:text-blue-400 flex items-center gap-3 cursor-pointer truncate",
-                  onClick: () => {
-                    navigate(
-                      `/${[
-                        "collections",
-                        collectionName,
-                        document2.node.path
-                      ].join("/")}`,
-                      { replace: true }
-                    );
-                  }
-                },
-                /* @__PURE__ */ React.createElement(BiFolder, { className: "inline-block h-6 w-auto flex-shrink-0 opacity-70" }),
-                /* @__PURE__ */ React.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Name"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block truncate" }, /* @__PURE__ */ React.createElement("span", null, document2.node.name)))
-              )), /* @__PURE__ */ React.createElement(
-                "td",
+              return /* @__PURE__ */ React.createElement(
+                "tr",
                 {
-                  className: "px-3 py-3 truncate max-w-0",
-                  colSpan: 4
+                  key: `folder-${document2.node.path}`
                 },
-                /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Path"),
-                /* @__PURE__ */ React.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-900 truncate" }, document2.node.path.substring(2).split("/").map((node) => {
+                /* @__PURE__ */ React.createElement("td", { className: "pl-5 pr-3 py-3" }, /* @__PURE__ */ React.createElement(
+                  "a",
+                  {
+                    className: "text-blue-600 hover:text-blue-400 flex items-center gap-3 cursor-pointer truncate",
+                    onClick: () => {
+                      navigate(
+                        `/${[
+                          "collections",
+                          collectionName,
+                          document2.node.path
+                        ].join("/")}`,
+                        { replace: true }
+                      );
+                    }
+                  },
+                  /* @__PURE__ */ React.createElement(BiFolder, { className: "inline-block h-6 w-auto flex-shrink-0 opacity-70" }),
+                  /* @__PURE__ */ React.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Name"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block truncate" }, /* @__PURE__ */ React.createElement("span", null, document2.node.name)))
+                )),
+                /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3", colSpan: 4 }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Path"), /* @__PURE__ */ React.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-900 truncate" }, document2.node.path.substring(2).split("/").map((node) => {
                   return /* @__PURE__ */ React.createElement("span", { key: node }, /* @__PURE__ */ React.createElement("span", { className: "text-gray-300 pr-0.5" }, "/"), /* @__PURE__ */ React.createElement("span", { className: "pr-0.5" }, node));
-                }))
-              ));
+                })))
+              );
             }
             const hasTitle = Boolean(
               document2.node._sys.title
@@ -29929,13 +29944,12 @@ This will work when developing locally but NOT when deployed to production.
             return /* @__PURE__ */ React.createElement(
               "tr",
               {
-                key: `document-${document2.node._sys.relativePath}`,
-                className: ""
+                key: `document-${document2.node._sys.relativePath}`
               },
               /* @__PURE__ */ React.createElement(
                 "td",
                 {
-                  className: "pl-5 pr-3 py-3 truncate max-w-0",
+                  className: "pl-5 pr-3 py-3",
                   colSpan: hasTitle ? 1 : 2
                 },
                 /* @__PURE__ */ React.createElement(
@@ -29956,9 +29970,9 @@ This will work when developing locally but NOT when deployed to production.
                   /* @__PURE__ */ React.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, hasTitle ? "Title" : "Filename"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block truncate" }, !folderView && !hasTitle && subfolders && /* @__PURE__ */ React.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React.createElement("span", null, hasTitle ? (_a2 = document2.node._sys) == null ? void 0 : _a2.title : document2.node._sys.filename)))
                 )
               ),
-              hasTitle && /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3 truncate max-w-0" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Filename"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900 truncate" }, !folderView && subfolders && /* @__PURE__ */ React.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React.createElement("span", null, document2.node._sys.filename))),
-              /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3 truncate w-[15%]" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Extension"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.extension)),
-              /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3 truncate w-[15%]" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Template"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.template)),
+              hasTitle && /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Filename"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900 truncate" }, !folderView && subfolders && /* @__PURE__ */ React.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React.createElement("span", null, document2.node._sys.filename))),
+              /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Extension"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.extension)),
+              /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Template"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.template)),
               /* @__PURE__ */ React.createElement("td", { className: "w-0" }, /* @__PURE__ */ React.createElement(
                 OverflowMenu$1,
                 {
@@ -30051,7 +30065,7 @@ This will work when developing locally but NOT when deployed to production.
                 }
               ))
             );
-          }))), documents.length === 0 && /* @__PURE__ */ React.createElement(NoDocumentsPlaceholder, null), /* @__PURE__ */ React.createElement("div", { className: "pt-4" }, /* @__PURE__ */ React.createElement(
+          })))), documents.length === 0 && /* @__PURE__ */ React.createElement(NoDocumentsPlaceholder, null), /* @__PURE__ */ React.createElement("div", { className: "pt-4" }, /* @__PURE__ */ React.createElement(
             CursorPaginator,
             {
               variant: "white",
@@ -30098,7 +30112,7 @@ This will work when developing locally but NOT when deployed to production.
         className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
       },
       "Search"
-    ), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-[200px]" }, /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:flex-row items-start md:items-center w-full md:w-auto gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-[200px] w-full md:w-auto" }, /* @__PURE__ */ React.createElement(
       Input,
       {
         type: "text",
@@ -30109,14 +30123,15 @@ This will work when developing locally but NOT when deployed to production.
           setSearchInput(e.target.value);
         }
       }
-    )), /* @__PURE__ */ React.createElement("div", { className: "flex gap-3" }, /* @__PURE__ */ React.createElement(
+    )), /* @__PURE__ */ React.createElement("div", { className: "flex w-full md:w-auto gap-3" }, /* @__PURE__ */ React.createElement(
       Button,
       {
         onClick: () => {
           setSearch(searchInput);
           setSearchLoaded(false);
         },
-        variant: "primary"
+        variant: "primary",
+        className: "w-full md:w-auto"
       },
       "Search ",
       /* @__PURE__ */ React.createElement(BiSearch, { className: "w-5 h-full ml-1.5 opacity-70" })
@@ -30536,10 +30551,6 @@ This will work when developing locally but NOT when deployed to production.
         }
       });
     }, [cms, collection, mutationInfo]);
-    const navBreakpoint2 = 1e3;
-    const windowWidth = windowSize.useWindowWidth();
-    const renderNavToggle = windowWidth < navBreakpoint2 + 1;
-    const headerPadding = renderNavToggle ? "px-20" : "px-6";
     React.useEffect(() => {
       cms.dispatch({ type: "forms:add", value: form });
       cms.dispatch({ type: "forms:set-active-form-id", value: form.id });
@@ -30557,9 +30568,9 @@ This will work when developing locally but NOT when deployed to production.
     return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, ((_f = (_e = cms == null ? void 0 : cms.api) == null ? void 0 : _e.tina) == null ? void 0 : _f.isLocalMode) ? /* @__PURE__ */ React.createElement(LocalWarning, null) : /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: `pt-3 pb-4 border-b border-gray-200 bg-white w-full grow-0 shrink basis-0 flex justify-center ${headerPadding}`
+        className: `pt-10 xl:pt-3 pb-10 xl:pb-4 px-20 xl:px-12 border-b border-gray-200 bg-white w-full grow-0 shrink basis-0 flex justify-center`
       },
-      /* @__PURE__ */ React.createElement("div", { className: "w-full max-w-form flex gap-1.5 justify-between items-center" }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement("div", { className: "w-full flex gap-1.5 justify-between items-center" }, /* @__PURE__ */ React.createElement(
         reactRouterDom.Link,
         {
           to: `/collections/${collection.name}${folder.fullyQualifiedName ? `/${folder.fullyQualifiedName}` : ""}`,
@@ -30767,10 +30778,6 @@ This will work when developing locally but NOT when deployed to production.
         }
       });
     }, [cms, document2, relativePath2, collection, mutationInfo]);
-    const navBreakpoint2 = 1e3;
-    const windowWidth = windowSize.useWindowWidth();
-    const renderNavToggle = windowWidth < navBreakpoint2 + 1;
-    const headerPadding = renderNavToggle ? "px-20" : "px-6";
     React.useEffect(() => {
       cms.dispatch({ type: "forms:add", value: form });
       cms.dispatch({ type: "forms:set-active-form-id", value: form.id });
@@ -30788,9 +30795,9 @@ This will work when developing locally but NOT when deployed to production.
     return /* @__PURE__ */ React.createElement(React.Fragment, null, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) ? /* @__PURE__ */ React.createElement(LocalWarning, null) : /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: `pt-3 pb-4 border-b border-gray-200 bg-white w-full grow-0 shrink basis-0 flex justify-center ${headerPadding}`
+        className: `pt-10 xl:pt-3 pb-10 xl:pb-4 px-20 xl:px-12 border-b border-gray-200 bg-white w-full grow-0 shrink basis-0 flex justify-center`
       },
-      /* @__PURE__ */ React.createElement("div", { className: "w-full max-w-form flex gap-1.5 justify-between items-center" }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement("div", { className: "w-full flex gap-1.5 justify-between items-center" }, /* @__PURE__ */ React.createElement(
         reactRouterDom.Link,
         {
           to: `/collections/${collection.name}/~${parentFolder2}`,
@@ -30802,16 +30809,19 @@ This will work when developing locally but NOT when deployed to production.
   };
   const ScreenPage = () => {
     const { screenName } = reactRouterDom.useParams();
-    const navBreakpoint2 = 1e3;
-    const windowWidth = windowSize.useWindowWidth();
-    const renderNavToggle = windowWidth < navBreakpoint2 + 1;
     return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
       var _a, _b;
       const screens = cms.plugins.getType("screen").all();
       const selectedScreen = screens.find(
         ({ name }) => slugify(name) === screenName
       );
-      return /* @__PURE__ */ React.createElement("div", { className: "relative w-full h-full flex flex-col items-stretch justify-between" }, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) ? /* @__PURE__ */ React.createElement(LocalWarning, null) : /* @__PURE__ */ React.createElement(BillingWarning, null), renderNavToggle && /* @__PURE__ */ React.createElement("div", { className: `py-5 border-b border-gray-200 bg-white pl-18` }, selectedScreen.name), /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-y-auto relative flex flex-col items-stretch justify-between" }, /* @__PURE__ */ React.createElement(selectedScreen.Component, { close: () => {
+      return /* @__PURE__ */ React.createElement("div", { className: "relative w-full h-full flex flex-col items-stretch justify-between" }, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) ? /* @__PURE__ */ React.createElement(LocalWarning, null) : /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: `xl:hidden py-5 border-b border-gray-200 bg-white pl-18`
+        },
+        selectedScreen.name
+      ), /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-y-auto relative flex flex-col items-stretch justify-between" }, /* @__PURE__ */ React.createElement(selectedScreen.Component, { close: () => {
       } })));
     });
   };
@@ -31185,7 +31195,7 @@ This will work when developing locally but NOT when deployed to production.
     cms,
     children
   }) => {
-    return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement("div", { className: "flex items-stretch h-screen overflow-hidden" }, /* @__PURE__ */ React.createElement(Sidebar, { cms }), /* @__PURE__ */ React.createElement("div", { className: "w-full relative" }, children)));
+    return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement("div", { className: "flex items-stretch h-dvh overflow-hidden" }, /* @__PURE__ */ React.createElement(Sidebar, { cms }), /* @__PURE__ */ React.createElement("div", { className: "w-full relative" }, children)));
   };
   const PlainLayout = ({ children }) => {
     return /* @__PURE__ */ React.createElement(