page update

web/css/components/app-page-editor.css

@@ -1,76 +1,81 @@
 @layer components {
-.app-page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--app-spacing);
-  margin-bottom: var(--app-spacing);
-}
+  .app-page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--app-spacing);
+    margin-bottom: var(--app-spacing);
+  }
 
-.app-page-header > div {
+  .app-page-header > div {
     display: flex;
     align-items: center;
     gap: var(--app-spacing);
-}
+  }
 
-.app-page-header > div > * {
-  margin-bottom: 0;
-  width: auto;
-}
+  .app-page-header > div > * {
+    margin-bottom: 0;
+    width: auto;
+  }
 
-.app-page-header button,
-.app-page-header input {
-  margin-bottom: 0;
-  width: auto;
-}
+  .app-page-header button,
+  .app-page-header input {
+    margin-bottom: 0;
+    width: auto;
+  }
 
-.app-page-header h1 {
-  margin: 0;
-}
+  .app-page-header h1 {
+    margin: 0;
+  }
 
-
-
-label.app-field > span {
+  label.app-field > span {
     display: block;
-}
+  }
 
-label.app-field > small {
+  label.app-field > small {
     display: block;
-}
+  }
 
+  .page-editor-actions {
+    margin-top: var(--app-spacing);
+    display: flex;
+    gap: var(--app-spacing);
+    justify-content: flex-end;
+  }
 
-.page-editor-actions {
-  margin-top: var(--app-spacing);
-  display: flex;
-  gap: var(--app-spacing);
-  justify-content: flex-end;
-}
+  .page-editor[data-edit-mode="view"] .page-editor-actions {
+    display: none;
+  }
 
-.page-editor[data-edit-mode="view"] .page-editor-actions {
-  display: none;
-}
+  .page-editor[data-edit-mode="view"] .ce-toolbar,
+  .page-editor[data-edit-mode="view"] .ce-inline-toolbar,
+  .page-editor[data-edit-mode="view"] .ce-popover {
+    display: none !important;
+  }
 
-.page-editor[data-edit-mode="view"] .ce-toolbar,
-.page-editor[data-edit-mode="view"] .ce-inline-toolbar,
-.page-editor[data-edit-mode="view"] .ce-popover {
-  display: none !important;
-}
+  .ce-block__content,
+  .ce-toolbar__content {
+    max-width: 90% !important;
+  }
 
-.ce-block__content, .ce-toolbar__content {
-    max-width: 90%!important;
-}
+  .ce-editorjsColumns_wrapper .ce-toolbar__content,
+  .ce-editorjsColumns_wrapper .ce-block__content {
+    max-width: 100% !important;
+  }
 
-.ce-editorjsColumns_wrapper .ce-toolbar__content,
-.ce-editorjsColumns_wrapper .ce-block__content {
-    max-width: 100% ! Important;
-}
-
-.ce-popover-item[data-item-name="columns"] svg {
+  .ce-popover-item[data-item-name="columns"] svg {
     width: 14px;
     height: 14px;
-}
+  }
 
-.app-details-aside-section button {
-  margin-bottom: 0;
-}
+  .app-details-aside-section button {
+    margin-bottom: 0;
+  }
+
+  @media (min-width: 968px) {
+    .app-page-action-card {
+      position: sticky;
+      top: calc(var(--app-spacing) * 4);
+    }
+  }
 }