From e7f8552a161ca7c6453e157b9e5a0fd1e6972e22 Mon Sep 17 00:00:00 2001
From: Rafael Ramalho <rafazelramalho19@gmail.com>
Date: Thu, 16 Jul 2020 18:37:00 +0100
Subject: [PATCH] fix: responsive navbar on small devices

---
 src/App.js                  |  2 +-
 test/e2e/navigation.test.js | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 941e25fb6..b4308a0b7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -66,7 +66,7 @@ export class App extends Component {
       <div className='sans-serif h-100' onClick={getNavHelper(this.props.doUpdateUrl)}>
         {/* Tinted overlay that appears when dragging and dropping an item */}
         { canDrop && isOver && <div className='w-100 h-100 top-0 left-0 absolute' style={{ background: 'rgba(99, 202, 210, 0.2)' }} /> }
-        <div className='flex flex-row-reverse-l flex-column-reverse' style={{ minHeight: '100vh' }}>
+        <div className='flex flex-row-reverse-l flex-column-reverse justify-end justify-start-l' style={{ minHeight: '100vh' }}>
           <div className='flex-auto-l'>
             <div className='flex items-center ph3 ph4-l' style={{ WebkitAppRegion: 'drag', height: 75, background: '#F0F6FA', paddingTop: '20px', paddingBottom: '15px' }}>
               <div className='joyride-app-explore' style={{ width: 560 }}>
diff --git a/test/e2e/navigation.test.js b/test/e2e/navigation.test.js
index 3c9920418..f5eaee19f 100644
--- a/test/e2e/navigation.test.js
+++ b/test/e2e/navigation.test.js
@@ -1,5 +1,15 @@
 /* global webuiUrl, waitForTitle, page, describe, it, expect, beforeAll */
 
+const scrollLinkContainer = async () => {
+  const linkContainer = '[role="menubar"]'
+  await page.waitForSelector(linkContainer)
+  await page.evaluate(selector => {
+    const scrollableSection = document.querySelector(selector)
+
+    scrollableSection.scrollLeft = scrollableSection.offsetWidth
+  }, linkContainer)
+}
+
 describe('Navigation menu', () => {
   beforeAll(async () => {
     await page.goto(webuiUrl + '#/blank', { waitUntil: 'networkidle0' })
@@ -25,6 +35,7 @@ describe('Navigation menu', () => {
     const link = 'a[href="#/explore"]'
     await page.waitForSelector(link)
     await expect(page).toMatch('Explore')
+    await scrollLinkContainer()
     await page.click(link)
     await waitForTitle('Explore - IPLD')
   })
@@ -33,6 +44,7 @@ describe('Navigation menu', () => {
     const link = 'a[href="#/peers"]'
     await page.waitForSelector(link)
     await expect(page).toMatch('Peers')
+    await scrollLinkContainer()
     await page.click(link)
     await waitForTitle('Peers - IPFS')
   })
@@ -41,6 +53,7 @@ describe('Navigation menu', () => {
     const link = 'a[href="#/settings"]'
     await page.waitForSelector(link)
     await expect(page).toMatch('Settings')
+    await scrollLinkContainer()
     await page.click(link)
     await waitForTitle('Settings - IPFS')
   })