diff --git a/cypress/e2e/pages.spec.js b/cypress/e2e/pages.spec.js index 48538ef38..cba80712e 100644 --- a/cypress/e2e/pages.spec.js +++ b/cypress/e2e/pages.spec.js @@ -272,8 +272,7 @@ describe('Page', function() { describe.only('Full width view', function() { it('Allows to toggle persistent full-width view', function() { cy.visit('/apps/collectives/Our%20Garden/Day%202') - cy.get('#titleform').should('have.css', 'max-width', '670px') - cy.get('#titleform').invoke('outerWidth').should('eq', 670) + cy.get('#titleform').should('have.css', 'max-width', '100%') cy.get('#read-only-editor').invoke('outerWidth').should('eq', 670) // Set full width mode @@ -282,12 +281,11 @@ describe('Page', function() { cy.contains('li.action', 'Full width') .click() cy.get('#titleform').should('have.css', 'max-width', 'none') - cy.get('#titleform').invoke('outerWidth').should('be.greaterThan', 700) cy.get('#read-only-editor').invoke('outerWidth').should('be.greaterThan', 700) // Reload to check persistence with browser storage cy.reload() - cy.get('#titleform').invoke('outerWidth').should('be.greaterThan', 700) + cy.get('#titleform').should('have.css', 'max-width', '100%') cy.get('#read-only-editor').invoke('outerWidth').should('be.greaterThan', 700) // Unset full width mode diff --git a/src/components/Collective.vue b/src/components/Collective.vue index 32493c8ed..b3109ef28 100644 --- a/src/components/Collective.vue +++ b/src/components/Collective.vue @@ -202,7 +202,7 @@ export default { .page-title { position: sticky; top: 0; - padding: 8px 0px 2px 8px; + padding: 8px 8px 2px 8px; display: flex; align-items: center; background-color: var(--color-main-background); diff --git a/src/components/Page.vue b/src/components/Page.vue index c1c1c4adb..cc04e8a0f 100644 --- a/src/components/Page.vue +++ b/src/components/Page.vue @@ -77,29 +77,31 @@ @blur="renamePage()"> - - - - - - - - - - +
+ + + + + + + + + + +
diff --git a/src/css/editor.scss b/src/css/editor.scss index da43166de..1274ed293 100644 --- a/src/css/editor.scss +++ b/src/css/editor.scss @@ -7,6 +7,11 @@ max-width: var(--text-editor-max-width); margin: auto; + &.page-title { + max-width: 100%; + margin: 0 0 0 max(0px, calc(50% - (var(--text-editor-max-width) / 2))); + } + // Editor document status bar .document-status { max-width: var(--text-editor-max-width);