[CL-616][CL-670] first pass at responsive updates to vault (#14588)

apps/web/src/app/auth/settings/account/change-email.component.html

@@ -3,7 +3,7 @@
     {{ "changeEmailTwoFactorWarning" | i18n }}
   </bit-callout>
 
-  <div class="tw-w-1/2 tw-pr-2" formGroupName="step1">
+  <div class="@3xl:tw-w-1/2 tw-pr-2" formGroupName="step1">
     <bit-form-field>
       <bit-label>{{ "masterPass" | i18n }}</bit-label>
       <input

apps/web/src/app/auth/settings/account/danger-zone.component.html

@@ -1,7 +1,10 @@
 <h1 bitTypography="h1" class="tw-mt-16 tw-pb-2.5 !tw-text-danger">{{ "dangerZone" | i18n }}</h1>
 
 <div class="tw-rounded tw-border tw-border-solid tw-border-danger-600 tw-p-5">
-  <div #content class="tw-flex tw-flex-row tw-gap-2">
+  <div
+    #content
+    class="tw-grid tw-auto-rows-fr @2xl:tw-grid-cols-2 @3xl:tw-flex tw-gap-2 @2xl:tw-gap-4 @3xl:tw-gap-2"
+  >
     <ng-content></ng-content>
   </div>
 </div>

apps/web/src/app/auth/settings/account/profile.component.html

@@ -8,7 +8,7 @@
 </div>
 <form *ngIf="profile && !loading" [formGroup]="formGroup" [bitSubmit]="submit">
   <div class="tw-grid tw-grid-cols-12 tw-gap-6">
-    <div class="tw-col-span-6">
+    <div class="tw-col-span-12 @3xl:tw-col-span-6">
       <bit-form-field>
         <bit-label>{{ "name" | i18n }}</bit-label>
         <input bitInput formControlName="name" />
@@ -18,7 +18,7 @@
         <input bitInput formControlName="email" readonly />
       </bit-form-field>
     </div>
-    <div class="tw-col-span-6">
+    <div class="tw-col-span-12 @3xl:tw-col-span-6 tw-row-start-1 @3xl:tw-row-start-auto">
       <div class="tw-mb-3 tw-flex tw-align-middle tw-items-center">
         <dynamic-avatar text="{{ profile | userName }}" [id]="profile.id" size="large">
         </dynamic-avatar>

apps/web/src/app/dirt/reports/shared/report-list/report-list.component.html

@@ -1,4 +1,6 @@
-<div class="tw-inline-grid tw-grid-cols-3 tw-gap-4">
+<div
+  class="tw-inline-grid tw-place-items-stretch tw-place-content-center tw-grid-cols-1 @xl:tw-grid-cols-2 @4xl:tw-grid-cols-3 tw-gap-4 [&_a]:tw-max-w-none @5xl:[&_a]:tw-max-w-72"
+>
   <div *ngFor="let report of reports">
     <app-report-card
       [title]="report.title | i18n"