diff --git a/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.spec.ts b/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.spec.ts index 40dbc0d442e..0bea6c186eb 100644 --- a/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.spec.ts +++ b/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.spec.ts @@ -13,12 +13,27 @@ import { BrowserExtensionPromptComponent } from "./browser-extension-prompt.comp describe("BrowserExtensionPromptComponent", () => { let fixture: ComponentFixture; - + let component: BrowserExtensionPromptComponent; const start = jest.fn(); const pageState$ = new BehaviorSubject(BrowserPromptState.Loading); + const setAttribute = jest.fn(); + const getAttribute = jest.fn().mockReturnValue("width=1010"); beforeEach(async () => { start.mockClear(); + setAttribute.mockClear(); + getAttribute.mockClear(); + + // Store original querySelector + const originalQuerySelector = document.querySelector.bind(document); + + // Mock querySelector while preserving the document context + jest.spyOn(document, "querySelector").mockImplementation(function (selector) { + if (selector === 'meta[name="viewport"]') { + return { setAttribute, getAttribute } as unknown as HTMLMetaElement; + } + return originalQuerySelector.call(document, selector); + }); await TestBed.configureTestingModule({ providers: [ @@ -34,9 +49,14 @@ describe("BrowserExtensionPromptComponent", () => { }).compileComponents(); fixture = TestBed.createComponent(BrowserExtensionPromptComponent); + component = fixture.componentInstance; fixture.detectChanges(); }); + afterEach(() => { + jest.restoreAllMocks(); + }); + it("calls start on initialization", () => { expect(start).toHaveBeenCalledTimes(1); }); @@ -87,6 +107,33 @@ describe("BrowserExtensionPromptComponent", () => { const mobileText = fixture.debugElement.query(By.css("p")).nativeElement; expect(mobileText.textContent.trim()).toBe("reopenLinkOnDesktop"); }); + + it("sets min-width on the body", () => { + expect(document.body.style.minWidth).toBe("auto"); + }); + + it("stores viewport content", () => { + expect(getAttribute).toHaveBeenCalledWith("content"); + expect(component["viewportContent"]).toBe("width=1010"); + }); + + it("sets viewport meta tag to be mobile friendly", () => { + expect(setAttribute).toHaveBeenCalledWith("content", "width=device-width, initial-scale=1.0"); + }); + + describe("on destroy", () => { + beforeEach(() => { + fixture.destroy(); + }); + + it("resets body min-width", () => { + expect(document.body.style.minWidth).toBe(""); + }); + + it("resets viewport meta tag", () => { + expect(setAttribute).toHaveBeenCalledWith("content", "width=1010"); + }); + }); }); describe("manual error state", () => { diff --git a/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.ts b/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.ts index 640a1b0d771..4d3a5fa07dd 100644 --- a/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.ts +++ b/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.ts @@ -1,5 +1,5 @@ -import { CommonModule } from "@angular/common"; -import { Component, OnInit } from "@angular/core"; +import { CommonModule, DOCUMENT } from "@angular/common"; +import { Component, Inject, OnDestroy, OnInit } from "@angular/core"; import { ButtonComponent, IconModule } from "@bitwarden/components"; import { I18nPipe } from "@bitwarden/ui-common"; @@ -16,7 +16,7 @@ import { standalone: true, imports: [CommonModule, I18nPipe, ButtonComponent, IconModule], }) -export class BrowserExtensionPromptComponent implements OnInit { +export class BrowserExtensionPromptComponent implements OnInit, OnDestroy { /** Current state of the prompt page */ protected pageState$ = this.browserExtensionPromptService.pageState$; @@ -25,10 +25,39 @@ export class BrowserExtensionPromptComponent implements OnInit { protected BitwardenIcon = VaultIcons.BitwardenIcon; - constructor(private browserExtensionPromptService: BrowserExtensionPromptService) {} + /** Content of the meta[name="viewport"] element */ + private viewportContent: string | null = null; + + constructor( + private browserExtensionPromptService: BrowserExtensionPromptService, + @Inject(DOCUMENT) private document: Document, + ) {} ngOnInit(): void { this.browserExtensionPromptService.start(); + + // It is not be uncommon for users to hit this page from a mobile device. + // There are global styles and the viewport meta tag that set a min-width + // for the page which cause it to render poorly. Remove them here. + // https://github.com/bitwarden/clients/blob/main/apps/web/src/scss/base.scss#L6 + this.document.body.style.minWidth = "auto"; + + const viewportMeta = this.document.querySelector('meta[name="viewport"]'); + + // Save the current viewport content to reset it when the component is destroyed + this.viewportContent = viewportMeta?.getAttribute("content") ?? null; + viewportMeta?.setAttribute("content", "width=device-width, initial-scale=1.0"); + } + + ngOnDestroy(): void { + // Reset the body min-width when the component is destroyed + this.document.body.style.minWidth = ""; + + if (this.viewportContent !== null) { + this.document + .querySelector('meta[name="viewport"]') + ?.setAttribute("content", this.viewportContent); + } } openExtension(): void { diff --git a/libs/vault/src/icons/browser-extension.ts b/libs/vault/src/icons/browser-extension.ts index f0f9b781491..ac54322292f 100644 --- a/libs/vault/src/icons/browser-extension.ts +++ b/libs/vault/src/icons/browser-extension.ts @@ -1,7 +1,7 @@ import { svgIcon } from "@bitwarden/components"; export const BrowserExtensionIcon = svgIcon` - +