bitwarden · Hinton · Jul 15, 2024 · Sep 6, 2024 · Sep 6, 2024
@@ -3,7 +3,7 @@
     {{ "changeEmailTwoFactorWarning" | i18n }}
   </bit-callout>
 
-  <div class="tw-w-1/2 tw-pr-2" formGroupName="step1">
+  <div class="@md:tw-w-1/2 @md:tw-pr-2" formGroupName="step1">
     <bit-form-field>
       <bit-label>{{ "masterPass" | i18n }}</bit-label>
       <input
@@ -31,7 +31,7 @@
     <p>{{ "changeEmailDesc" | i18n: formGroup.controls.step1.value.newEmail }}</p>
     <bit-callout type="warning">{{ "loggedOutWarning" | i18n }}</bit-callout>
 
-    <div class="tw-w-1/2 tw-pr-2">
+    <div class="@md:tw-w-1/2 @md:tw-pr-2">
       <bit-form-field>
         <bit-label>{{ "code" | i18n }}</bit-label>
         <input id="change-email_input_token" bitInput type="text" formControlName="token" />

@@ -3,7 +3,7 @@ <h1 bitTypography="h1" class="tw-mt-16 tw-pb-2.5 !tw-text-danger">{{ "dangerZone
 <div class="tw-rounded tw-border tw-border-solid tw-border-danger-600 tw-p-5">
   <p>{{ "dangerZoneDesc" | i18n }}</p>
 
-  <div class="tw-flex tw-flex-row tw-gap-2">
+  <div class="tw-flex tw-gap-2 tw-flex-wrap">
     <ng-content></ng-content>
   </div>
 </div>
@@ -7,8 +7,8 @@
   <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </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-grid @md:tw-grid-cols-2 tw-gap-6">
+    <div>
       <bit-form-field>
         <bit-label>{{ "name" | i18n }}</bit-label>
         <input bitInput formControlName="name" />
@@ -17,8 +17,12 @@
         <bit-label>{{ "email" | i18n }}</bit-label>
         <input bitInput formControlName="email" readonly />
       </bit-form-field>
+
+      <button bitButton bitFormButton type="submit" buttonType="primary">
+        {{ "save" | i18n }}
+      </button>
     </div>
-    <div class="tw-col-span-6">
+    <div>
       <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>
@@ -43,5 +47,4 @@
       </app-account-fingerprint>
     </div>
   </div>
-  <button bitButton bitFormButton type="submit" buttonType="primary">{{ "save" | i18n }}</button>
 </form>
@@ -4,6 +4,8 @@
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { NavigationModule } from "@bitwarden/components";
 
+const className = "tw-fixed-width";
+
 @Component({
   selector: "app-toggle-width",
   template: `<bit-nav-item
@@ -23,10 +25,10 @@
   }
 
   protected toggleWidth() {
-    if (document.body.style.minWidth === "unset") {
-      document.body.style.minWidth = "";
+    if (document.documentElement.classList.contains(className)) {
+      document.documentElement.classList.remove(className);
     } else {
-      document.body.style.minWidth = "unset";
+      document.documentElement.classList.add(className);
     }
   }
 }
diff --git a/apps/web/src/index.html b/apps/web/src/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html class="theme_light">
+<html class="theme_light tw-fixed-width">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=1010" />

diff --git a/apps/web/src/scss/base.scss b/apps/web/src/scss/base.scss
@@ -3,7 +3,6 @@ html {
 }
 
 body {
-  min-width: 1010px;
   position: relative;
 
   &.layout_frontend {
@@ -32,6 +31,12 @@ body {
   }
 }
 
+html.tw-fixed-width {
+  body {
+    min-width: 1010px;
+  }
+}
+
 .container {
   margin: 0 auto;
   max-width: none !important;

@@ -107,6 +107,75 @@ module.exports = {
     },
   },
   plugins: [
+    /**
+     * Custom plugin for media queries, which uses a `@` prefix. If the html has the
+     * class `tw-fixed-width` all variants will be applied.
+     *
+     * Based on https://github.com/tailwindlabs/tailwindcss-container-queries
+     * MIT License
+     *
+     * Copyright (c) 2023 Tailwind Labs
+     *
+     * Permission is hereby granted, free of charge, to any person obtaining a copy
+     * of this software and associated documentation files (the "Software"), to deal
+     * in the Software without restriction, including without limitation the rights
+     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+     * copies of the Software, and to permit persons to whom the Software is
+     * furnished to do so, subject to the following conditions:
+     *
+     * The above copyright notice and this permission notice shall be included in all
+     * copies or substantial portions of the Software.
+     *
+     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+     * SOFTWARE.
+     */
+    plugin(function ({ matchVariant, theme }) {
+      // Responsive
+      const values = theme("screens") ?? {};
+
+      matchVariant(
+        "@",
+        (value = "", { modifier }) => {
+          let parsed = parseFloat(value);
+
+          return parsed !== null
+            ? [`@media ${modifier ?? ""} (min-width: ${value})`, "html.fixed-width &"]
+            : [];
+        },
+        {
+          values,
+          sort(aVariant, zVariant) {
+            let a = parseFloat(aVariant.value);
+            let z = parseFloat(zVariant.value);
+
+            if (a === null || z === null) return 0;
+
+            // Sort values themselves regardless of unit
+            if (a - z !== 0) return a - z;
+
+            let aLabel = aVariant.modifier ?? "";
+            let zLabel = zVariant.modifier ?? "";
+
+            // Explicitly move empty labels to the end
+            if (aLabel === "" && zLabel !== "") {
+              return 1;
+            } else if (aLabel !== "" && zLabel === "") {
+              return -1;
+            }
+
+            // Sort labels alphabetically in the English locale
+            // We are intentionally overriding the locale because we do not want the sort to
+            // be affected by the machine's locale (be it a developer or CI environment)
+            return aLabel.localeCompare(zLabel, "en", { numeric: true });
+          },
+        },
+      );
+    }),
     plugin(function ({ matchUtilities, theme, addUtilities, addComponents, e, config }) {
       matchUtilities(
         {