[PM-7057] Add dev tool for toggling width in web vault (#8447)

Add a dev tool for toggling the web vault width. This allows developers and designers to experiment with how the vault currently behaves with responsiveness and ensure new functionality looks good.

apps/web/src/app/layouts/toggle-width.component.ts

@@ -0,0 +1,33 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { NavigationModule } from "@bitwarden/components";
+
+@Component({
+  selector: "app-toggle-width",
+  template: `<bit-nav-item
+    text="Toggle Width"
+    icon="bwi-bug"
+    *ngIf="isDev"
+    class="tw-absolute tw-bottom-0 tw-w-full"
+    (click)="toggleWidth()"
+  ></bit-nav-item>`,
+  standalone: true,
+  imports: [CommonModule, NavigationModule],
+})
+export class ToggleWidthComponent {
+  protected isDev: boolean;
+
+  constructor(platformUtilsService: PlatformUtilsService) {
+    this.isDev = platformUtilsService.isDev();
+  }
+
+  protected toggleWidth() {
+    if (document.body.style.minWidth === "unset") {
+      document.body.style.minWidth = "";
+    } else {
+      document.body.style.minWidth = "unset";
+    }
+  }
+}