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

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>

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"),
   ],
 };

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 }} --" />

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 }}"
           >