fix: fixed horizontal scrolling, added tests for it

mtskf · Dec 13, 2021 · 7674c18 · 7674c18
1 parent fb00a7f
commit 7674c18
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html
-  class="w-screen min-h-full bg-gradient-to-b from-indigo-200 to-purple-400"
+  class="min-h-full bg-gradient-to-b from-indigo-200 to-purple-400"
   lang="en"
 >
   <head>
@@ -10,7 +10,7 @@
     <title>Vite + Vue 3 + TypeScript + Tailwind Starter Template</title>
   </head>
   <body>
-    <div id="app" class="flex flex-col w-screen min-h-0 mx-auto"></div>
+    <div id="app" class="flex flex-col min-h-0 mx-auto"></div>
     <script type="module" src="/src/main.ts"></script>
     <noscript>
       Opinionated, production ready template for Vite and Vue 3

diff --git a/tests/e2e/integration/basic_spec.ts b/tests/e2e/integration/basic_spec.ts
@@ -6,4 +6,22 @@ describe('Homepage', () => {
 
     cy.contains('h2', 'Hello World Component')
   })
+
+  it('Should not have vertical scroll bars on mobile or desktop', () => {
+    cy.viewport('iphone-5')
+    cy.window().then(() => {
+      const htmlScrollWidth = Cypress.$('html')[0].scrollWidth
+      const htmlWidth = Cypress.$('html')[0].clientWidth
+      const scrollBarWidth = htmlScrollWidth - htmlWidth
+      expect(scrollBarWidth).to.be.eq(0)
+    })
+
+    cy.viewport('macbook-11')
+    cy.window().then(() => {
+      const htmlScrollWidth = Cypress.$('html')[0].scrollWidth
+      const htmlWidth = Cypress.$('html')[0].clientWidth
+      const scrollBarWidth = htmlScrollWidth - htmlWidth
+      expect(scrollBarWidth).to.be.eq(0)
+    })
+  })
 })