ECOMMONS-1548 - fix for hamburger menu not working in mobile firefox/safari

[bmckinney]

References

• Related: Fix to Mobile navbar hamburger menu doesn't work in Firefox/Safari #2372 #2444

Description

Enables use of hamburger menu for mobile firefox/safari

Instructions for Reviewers

Resize firefox and safari to mobile and test opening and selecting items in the hamburger menu.

List of changes in this PR:

• width changed from percent to vw
• position: absolute removed since it prevented mobile safari from rendering, doesn't break other browsers

To test iPhone via playwright:

import { test, devices } from '@playwright/test';

test.use({
    ...devices['iPhone 13 Pro'],
    locale: 'en-US',
})

test('Mobile hamburger nav', async ({ page }) => {
    await page.goto('http://localhost:4000/home');
    await page.locator('body > ds-app > ds-themed-root > ds-root > div > div > ds-themed-header-navbar-wrapper > ds-header-navbar-wrapper > div > ds-themed-header > ds-header > header > nav > div.d-flex.flex-grow-1.ml-auto.justify-content-end.align-items-center > div > button').click();
    await page.locator('#browseDropdown').click();
    await page.locator('#collapsingNav > ul > li:nth-child(2) > ds-expandable-navbar-section > div > ul > ds-link-menu-item:nth-child(5) > a').click();
    await page.screenshot({ path: 'hamburger-nav-iphone.png' });
});

[bmckinney]

sorry, pushed this to the wrong origin!