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

2025-12-06 00:13:28 +00:00 · 2025-10-08 10:04:39 -07:00
parent 0df7215d6e
commit a4a53e27d4
14 changed files with 33 additions and 13 deletions
--- a/.github/renovate.json5
+++ b/.github/renovate.json5
@@ -324,6 +324,7 @@
        "storybook",
        "tailwindcss",
        "zone.js",
+        "@tailwindcss/container-queries",
      ],
      description: "UI Foundation owned dependencies",
      commitMessagePrefix: "[deps] UI Foundation:",
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -8,7 +8,7 @@ setCompodocJson(docJson);

 const wrapperDecorator = componentWrapperDecorator((story) => {
  return /*html*/ `
-    <div class="tw-bg-background tw-px-5 tw-py-10">
+    <div class="tw-bg-background tw-px-5 tw-py-10 tw-@container">
      ${story}
    </div>
  `;
--- a/apps/web/src/app/auth/settings/account/change-email.component.html
+++ b/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
--- a/apps/web/src/app/auth/settings/account/danger-zone.component.html
+++ b/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>
--- a/apps/web/src/app/auth/settings/account/profile.component.html
+++ b/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>
--- a/apps/web/src/app/dirt/reports/shared/report-list/report-list.component.html
+++ b/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"
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -9,6 +9,7 @@ config.content = [
  "../../libs/key-management-ui/src/**/*.{html,ts}",
  "../../libs/vault/src/**/*.{html,ts}",
  "../../libs/angular/src/**/*.{html,ts}",
+  "../../libs/tools/generator/components/src/**/*.{html,ts}",
  "../../bitwarden_license/bit-web/src/**/*.{html,ts}",
 ];
 config.corePlugins.preflight = true;
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -335,6 +335,7 @@ export default tseslint.config(
            "file-selector",
            "mfaType.*",
            "filter.*", // Temporary until filters are migrated
+            "tw-@container",
          ],
        },
      ],
--- a/libs/components/src/layout/layout.component.html
+++ b/libs/components/src/layout/layout.component.html
@@ -23,7 +23,7 @@
      [id]="mainContentId"
      tabindex="-1"
      bitScrollLayoutHost
-      class="tw-overflow-auto tw-max-h-screen tw-min-w-0 tw-flex-1 tw-bg-background tw-p-8 tw-pt-6"
+      class="tw-overflow-auto tw-max-h-screen tw-min-w-0 tw-flex-1 tw-bg-background tw-p-8 tw-pt-6 tw-@container"
    >
      <!-- ^ If updating this padding, also update the padding correction in bit-banner! ^ -->
      <ng-content></ng-content>
--- a/libs/components/tailwind.config.base.js
+++ b/libs/components/tailwind.config.base.js
@@ -157,6 +157,9 @@ module.exports = {
        xs: [".8125rem", "1rem"],
        "3xl": ["1.75rem", "2rem"],
      },
+      container: {
+        "@5xl": "1100px",
+      },
    },
  },
  plugins: [
@@ -196,5 +199,6 @@ module.exports = {
    plugin(function ({ addVariant }) {
      addVariant("bit-compact", ".bit-compact &");
    }),
+    require("@tailwindcss/container-queries"),
  ],
 };
--- a/libs/importer/src/components/import.component.html
+++ b/libs/importer/src/components/import.component.html
@@ -65,7 +65,7 @@
      <h2 class="tw-font-bold" bitTypography="h6">{{ "data" | i18n }}</h2>
    </bit-section-header>
    <bit-card>
-      <bit-form-field class="tw-w-1/2">
+      <bit-form-field class="@2xl:tw-w-1/2">
        <bit-label>{{ "fileFormat" | i18n }}</bit-label>
        <bit-select formControlName="format">
          <bit-option value="" label="-- {{ 'select' | i18n }} --" />
--- a/libs/tools/generator/components/src/password-settings.component.html
+++ b/libs/tools/generator/components/src/password-settings.component.html
@@ -15,9 +15,8 @@
    <div>
      <bit-card>
        <div class="tw-mb-4">{{ "include" | i18n }}</div>
-        <div class="tw-flex tw-justify-between">
+        <div class="tw-flex tw-flex-wrap tw-gap-x-8">
          <bit-form-control
-            class="tw-w-1/5"
            attr.aria-description="{{ 'uppercaseDescription' | i18n }}"
            title="{{ 'uppercaseDescription' | i18n }}"
          >
@@ -30,7 +29,6 @@
            <bit-label>{{ "uppercaseLabel" | i18n }}</bit-label>
          </bit-form-control>
          <bit-form-control
-            class="tw-w-1/5"
            attr.aria-description="{{ 'lowercaseDescription' | i18n }}"
            title="{{ 'lowercaseDescription' | i18n }}"
          >
@@ -43,7 +41,6 @@
            <bit-label>{{ "lowercaseLabel" | i18n }}</bit-label>
          </bit-form-control>
          <bit-form-control
-            class="tw-w-1/5"
            attr.aria-description="{{ 'numbersDescription' | i18n }}"
            title="{{ 'numbersDescription' | i18n }}"
          >
@@ -51,7 +48,6 @@
            <bit-label>{{ "numbersLabel" | i18n }}</bit-label>
          </bit-form-control>
          <bit-form-control
-            class="tw-w-2/5"
            attr.aria-description="{{ 'specialCharactersDescription' | i18n }}"
            title="{{ 'specialCharactersDescription' | i18n }}"
          >
--- a/package-lock.json
+++ b/package-lock.json
@@ -98,6 +98,7 @@
        "@storybook/test-runner": "0.22.0",
        "@storybook/theming": "8.6.12",
        "@storybook/web-components-webpack5": "8.6.12",
+        "@tailwindcss/container-queries": "0.1.1",
        "@types/chrome": "0.1.12",
        "@types/firefox-webext-browser": "120.0.4",
        "@types/inquirer": "8.2.10",
@@ -13529,6 +13530,16 @@
        "node": ">=10"
      }
    },
+    "node_modules/@tailwindcss/container-queries": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/container-queries/-/container-queries-0.1.1.tgz",
+      "integrity": "sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.2.0"
+      }
+    },
    "node_modules/@testing-library/dom": {
      "version": "10.4.0",
      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
    "@storybook/test-runner": "0.22.0",
    "@storybook/theming": "8.6.12",
    "@storybook/web-components-webpack5": "8.6.12",
+    "@tailwindcss/container-queries": "0.1.1",
    "@types/chrome": "0.1.12",
    "@types/firefox-webext-browser": "120.0.4",
    "@types/inquirer": "8.2.10",