@kaizen/components 0.0.0-canary-04-23-tb-mcqs-20251223032014 → 0.0.0-canary-01-24-tb-mcqs-20251223225141

package/dist/styles.css

@@ -10267,9 +10267,11 @@
   .TitleBlock-module_avatar__mEjJ8 > * {
     max-width: 100%;
   }
-  @container (min-width: 1080px) {
-    .TitleBlock-module_avatar__mEjJ8 {
-      display: block;
+  @media (min-width: 1080px) and (max-width: 1095px) {
+    @container (min-width: 1065px) {
+      .TitleBlock-module_avatar__mEjJ8 {
+        display: block;
+      }
     }
   }
   .TitleBlock-module_avatar__mEjJ8.TitleBlock-module_withBorder__D8Mz2 {
@@ -10577,7 +10579,7 @@
     border-style: var(--border-focus-ring-border-style, solid);
     inset: calc(-2 * var(--border-focus-ring-border-width, 2px) - var(--border-focus-ring-border-width, 2px));
   }
-  @media (min-width: 1080px) {
+  @media (min-width: 1080px) and (max-width: 1095px) {
     @container (min-width: 1065px) {
       .TitleBlock-module_breadcrumb__lVNKz {
         display: flex;
@@ -10589,6 +10591,16 @@
       }
     }
   }
+  @container (min-width: 1080px) {
+    .TitleBlock-module_breadcrumb__lVNKz {
+      display: flex;
+      position: relative;
+      transform: translateY(0);
+      margin-inline: 0 var(--spacing-12);
+      inset-inline-end: auto;
+      inset-inline-start: 0;
+    }
+  }
   .TitleBlock-module_breadcrumbTextLink__ngx82 {
     clip-path: rect(0 0 0 0);
     height: 1px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-04-23-tb-mcqs-20251223032014",
+  "version": "0.0.0-canary-01-24-tb-mcqs-20251223225141",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/TitleBlock/TitleBlock.module.scss

@@ -243,7 +243,7 @@
       max-width: 100%;
     }
 
-    @container (min-width: #{$layout-breakpoints-large}) {
+    @include title-block-media-mixed-width {
       display: block;
     }
 
@@ -607,6 +607,15 @@
 
       @include ca-position($start: 0);
     }
+
+    @include title-block-min-container-1080 {
+      display: flex;
+      position: relative;
+      transform: translateY(0);
+      margin-inline: 0 var(--spacing-12);
+
+      @include ca-position($start: 0);
+    }
   }
 
   @mixin visually-hidden {

package/src/TitleBlock/_mixins.scss

@@ -43,13 +43,20 @@
 }
 
 @mixin title-block-min-media-1080 {
-  @media (min-width: 1080px) {
+  @media (min-width: #{$layout-breakpoints-large}) {
+    @content;
+  }
+}
+
+@mixin title-block-min-container-1080 {
+  @container (min-width: #{$layout-breakpoints-large}) {
     @content;
   }
 }
 
 @mixin title-block-media-mixed-width {
-  @media (min-width: 1080px) {
+  // 1080
+  @media (min-width: #{$layout-breakpoints-large}) and (max-width: 1095px) {
     // Note: There is a diff of 15px between the media and container query
     // at full width
     @container (min-width: 1065px) {