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