From e1b80e4c328d10df491e5ac9c28d720e8fa78da6 Mon Sep 17 00:00:00 2001 From: Kukhyeon Heo Date: Fri, 15 Jul 2022 07:41:41 +0900 Subject: [PATCH 1/4] fix: show docs menu in column style when viewport is small. (#22411) * fix: show docs menu in column style when viewport is small. * use tailwind css * organize test in context block Co-authored-by: Rachel Co-authored-by: Rachel --- .../gql-components/HeaderBarContent.cy.tsx | 38 +++++++++++++++++++ .../src/gql-components/topnav/TopNav.vue | 3 +- 2 files changed, 40 insertions(+), 1 deletion(-) diff --git a/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx b/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx index 5583c3e53627..60ac66dad2cf 100644 --- a/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx +++ b/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx @@ -162,6 +162,44 @@ describe('', { viewportWidth: 1000, viewportHeight: 750 }, ( }) }) + context('responsive design', () => { + beforeEach(() => { + cy.mountFragment(HeaderBar_HeaderBarContentFragmentDoc, { + onResult: (result) => { + result.currentProject = null + }, + render: (gqlVal) => ( +
+ +
+ ), + }) + }) + + // https://github.com/cypress-io/cypress/issues/21842 + it('shows docs menu correctly on small viewports', () => { + // Simulate the small viewport. + cy.viewport(767, 800) + + // show docs menu + cy.contains('button', text.docsMenu.docsHeading).click() + + // docs menu flex direction is column when viewport width is small + cy.findByTestId('docs-menu-container').should('have.css', 'flex-direction', 'column') + }) + + it('shows docs menu correctly on wider viewports', () => { + // Change the viewport size to wide. + cy.viewport(768, 800) + + // show docs menu + cy.contains('button', text.docsMenu.docsHeading).click() + + // docs menu flex direction is row when viewport width is big enough. + cy.findByTestId('docs-menu-container').should('have.css', 'flex-direction', 'row') + }) + }) + it('does not show hint when on latest version of Cypress', () => { mountFragmentWithData({ versions: { diff --git a/packages/frontend-shared/src/gql-components/topnav/TopNav.vue b/packages/frontend-shared/src/gql-components/topnav/TopNav.vue index fcd4eb48bef5..f1e59710428d 100644 --- a/packages/frontend-shared/src/gql-components/topnav/TopNav.vue +++ b/packages/frontend-shared/src/gql-components/topnav/TopNav.vue @@ -143,7 +143,8 @@
Date: Fri, 15 Jul 2022 00:37:55 +0000 Subject: [PATCH 2/4] fix: Styling of specs list at small breakpoints (#22635) Co-authored-by: Emily Rohrbough --- packages/app/src/specs/SpecsListHeader.vue | 2 +- packages/app/src/specs/SpecsListRowItem.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app/src/specs/SpecsListHeader.vue b/packages/app/src/specs/SpecsListHeader.vue index bd791c939eb4..5567cf841da1 100644 --- a/packages/app/src/specs/SpecsListHeader.vue +++ b/packages/app/src/specs/SpecsListHeader.vue @@ -48,7 +48,7 @@ data-cy="new-spec-button" :prefix-icon="IconAdd" prefix-icon-class="justify-center text-lg text-center icon-light-transparent icon-dark-white" - class="min-w-127px" + class="min-w-134px" size="lg" @click="emit('showCreateSpecModal')" > diff --git a/packages/app/src/specs/SpecsListRowItem.vue b/packages/app/src/specs/SpecsListRowItem.vue index c1a090d2f523..e85b7769b74b 100644 --- a/packages/app/src/specs/SpecsListRowItem.vue +++ b/packages/app/src/specs/SpecsListRowItem.vue @@ -27,7 +27,7 @@
-