@kaizen/components 0.0.0-canary-guidance-block-codemod-20251215033932 → 0.0.0-canary-01-titleblock-20251216220648

package/dist/styles.css

@@ -148,6 +148,7 @@
     font-family: var(--typography-heading-1-font-family);
     font-weight: var(--typography-heading-1-font-weight);
     letter-spacing: var(--typography-heading-3-letter-spacing);
+    overflow-wrap: normal;
   }
 
   .Avatar-module_initials__85roP.Avatar-module_longName__02zNk::before {
@@ -10014,203 +10015,29 @@
     justify-content: flex-end;
     flex-grow: 1;
     flex-shrink: 0;
+    white-space: nowrap;
+  }
+  .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButtonMinimized__XePRS {
+    display: none;
     margin-inline-end: 0;
-    margin-inline-start: calc(1.5rem / 2);
   }
   @container (max-width: calc(768px - 1px)) {
     .MainActions-module_mainActionsContainer__pk-78 {
-      display: none;
+      justify-content: flex-start;
+      padding-left: 2.75rem;
     }
-  }
-}
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/* stylelint-disable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/* 16px */
-/* 16px */
-/* 16px */
-/*
-  Because these components are deprecated, we've kept any inline/non-token values as values from the Zen theme to prevent any style regressions,
-  as this is what consumers would have expected when pulling them in a the time.
-*/
-/* stylelint-enable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
-/** THIS IS AN AUTOGENERATED FILE **/
-@layer kz-components {
-  /* stylelint-disable no-descending-specificity */
-  .MobileActions-module_mobileActionsContainer__XoepA {
-    display: none;
-    z-index: 1030;
-    flex-direction: column;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    border-start-start-radius: var(--border-solid-border-radius, 7px);
-    border-start-end-radius: var(--border-solid-border-radius, 7px);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    overflow: hidden;
-    transform: translateY(calc(100% - 60px));
-    transition: 0.4s ease;
-    animation: MobileActions-module_slide-up__xezn3 1s ease;
-  }
-  .MobileActions-module_mobileActionsContainer__XoepA.MobileActions-module_isOpen__D40v5 {
-    transform: translateY(0%);
-  }
-  .MobileActions-module_mobileActionsContainer__XoepA.MobileActions-module_isOpen__D40v5 .MobileActions-module_mobileActionsMenuContainer__x--Eb {
-    visibility: visible;
-  }
-  @container (max-width: calc(768px - 1px)) {
-    .MobileActions-module_mobileActionsContainer__XoepA {
-      display: flex;
+    @media (max-width: 360px) {
+      .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButton__VbER1 {
+        display: none;
+        margin-inline-end: 0;
+      }
+      .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButtonMinimized__XePRS {
+        display: flex;
+        margin-inline-end: 3px;
+        margin-left: -0.5rem;
+      }
     }
   }
-  .MobileActions-module_mobileActionsTopRow__RXNFZ {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 60px;
-  }
-  .MobileActions-module_mobileActionsTopRow__RXNFZ.MobileActions-module_mobileActionsTopRowSingleButton__5EjiI {
-    justify-content: center;
-  }
-  .MobileActions-module_mobileActionsMenuContainer__x--Eb {
-    visibility: hidden;
-    width: 100%;
-    background: var(--color-white, #ffffff);
-    padding: var(--spacing-xs, 0.375rem) 0;
-    transition: visibility 0.4s;
-  }
-  .MobileActions-module_drawerHandleIcon__q9ewm {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-inline-end: calc(1.5rem / 2);
-    margin-inline-start: 0;
-  }
-  .MobileActions-module_drawerHandleLabelText__MwJTA + .MobileActions-module_drawerHandleIcon__q9ewm {
-    margin-inline-end: 0;
-    margin-inline-start: calc(1.5rem / 2);
-  }
-  .MobileActions-module_mobileActionsPrimaryLabel__8yfuH {
-    text-align: left;
-    text-decoration: none;
-    color: var(--color-white, #ffffff);
-    font-family: var(--typography-button-primary-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-weight: var(--typography-button-primary-font-weight, 500);
-    font-size: var(--typography-button-primary-font-size, 1.125rem);
-    line-height: var(--typography-button-primary-line-height, 1.5rem);
-    letter-spacing: var(--typography-button-primary-letter-spacing, normal);
-    padding-inline-end: 0;
-    padding-inline-start: 1.125rem;
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU {
-    display: flex;
-    position: relative;
-    justify-content: flex-start;
-    align-items: center;
-    height: 100%;
-    border: 0;
-    box-sizing: border-box;
-    color: var(--color-white, #ffffff);
-    background-color: var(--color-blue-500, #0168b3);
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:focus,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:focus {
-    background-color: var(--color-blue-600, #004970);
-    outline: none;
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:focus-visible,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:focus-visible {
-    height: 52px;
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:focus-visible::after,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:focus-visible::after {
-    content: "";
-    position: absolute;
-    background: transparent;
-    border-width: 2px;
-    border-style: var(--border-focus-ring-border-style, solid);
-    border-color: var(--color-blue-500, #0168b3);
-    inset: calc(-1 * calc(var(--border-focus-ring-border-width, 2px) * 2));
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:hover,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:hover {
-    text-decoration: none;
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:only-child,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:only-child {
-    flex-basis: 100%;
-    border-start-start-radius: var(--border-solid-border-radius, 7px);
-    border-start-end-radius: var(--border-solid-border-radius, 7px);
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:only-child:focus-visible,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:only-child:focus-visible {
-    flex-basis: calc(100% - 8px);
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:only-child:focus-visible::after,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:only-child:focus-visible::after {
-    border-start-start-radius: var(--border-focus-ring-border-radius, 10px);
-    border-start-end-radius: var(--border-focus-ring-border-radius, 10px);
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:not(:only-child) {
-    flex: 0 0 calc(100% - 3.75rem);
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:not(:only-child):focus-visible {
-    flex-basis: calc(100% - 3.75rem - 8px);
-    margin-left: 4px;
-    border-start-start-radius: var(--border-solid-border-radius, 7px);
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:not(:only-child):focus-visible + .MobileActions-module_mobileActionsExpandButton__XuHNU {
-    border-color: var(--color-white, #ffffff);
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:not(:only-child):focus-visible::after {
-    border-start-start-radius: var(--border-focus-ring-border-radius, 10px);
-  }
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:not(:only-child) {
-    flex: 0 0 3.75rem;
-    border-left: 2px solid var(--color-blue-200, #bde2f5);
-    justify-content: center;
-  }
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:not(:only-child):focus-visible {
-    border-color: var(--color-white, #ffffff);
-    flex-basis: calc(3.75rem - 8px);
-    margin-right: 4px;
-    border-start-end-radius: var(--border-solid-border-radius, 7px);
-  }
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:not(:only-child):focus-visible::after {
-    border-start-end-radius: var(--border-focus-ring-border-radius, 10px);
-  }
-  .MobileActions-module_mobileActionsChevronSquare__SPIsI {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    position: absolute;
-    inset-inline-end: 20px;
-    inset-inline-start: auto;
-  }
-  /* stylelint-enable no-descending-specificity */
-}
-@keyframes MobileActions-module_slide-up__xezn3 {
-  0% {
-    transform: translateY(100%);
-  }
-  50% {
-    transform: translateY(100%);
-  }
-  100% {
-    transform: translateY(calc(100% - 60px));
-  }
 }
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -10266,11 +10093,9 @@
   }
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRow__Ifqiu {
     background-color: var(--color-white, #ffffff);
-    margin-bottom: 3px;
   }
   .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_titleRow__Ifqiu {
     background-color: var(--color-white, #ffffff);
-    margin-bottom: 3px;
   }
   .TitleBlock-module_rowBelowSeparatorInner__3gNec, .TitleBlock-module_titleRowInner__SlArS {
     max-width: 1392px;
@@ -10282,20 +10107,36 @@
   }
   @container (max-width: calc(1080px - 1px)) {
     .TitleBlock-module_rowBelowSeparatorInner__3gNec, .TitleBlock-module_titleRowInner__SlArS {
-      margin: 0 12px;
+      padding-right: 20px;
+      margin: 0;
+    }
+    @media (max-width: 1023px) {
+      .TitleBlock-module_rowBelowSeparatorInner__3gNec, .TitleBlock-module_titleRowInner__SlArS {
+        padding-left: 20px;
+      }
+    }
+    @media (max-width: 759px) {
+      .TitleBlock-module_rowBelowSeparatorInner__3gNec, .TitleBlock-module_titleRowInner__SlArS {
+        padding-left: 0px;
+      }
     }
   }
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRowInner__SlArS {
     border-bottom: 1px solid var(--color-gray-300, #eaeaec);
   }
+  @container (max-width: 511px) {
+    .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRowInner__SlArS {
+      padding-bottom: 12px;
+    }
+  }
   .TitleBlock-module_titleRowInnerContent__NhTHV {
+    padding-block: 20px;
     position: relative;
     display: flex;
     width: 100%;
     align-items: center;
-    min-height: 5.25rem;
     justify-content: space-between;
-    border-bottom: 0.1875rem solid rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
+    border-bottom: 0.083rem solid rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
   }
   .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_titleRowInnerContent__NhTHV {
     border-bottom-color: rgba(var(--color-purple-700-rgb, 74, 35, 77), 0.2);
@@ -10308,6 +10149,12 @@
       border-bottom: none;
     }
   }
+  @media (max-width: 670px) {
+    .TitleBlock-module_titleRowInnerContent__NhTHV {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
   .TitleBlock-module_title__c5JWR {
     display: flex;
     align-items: center;
@@ -10390,10 +10237,10 @@
   }
   @container (max-width: calc(1080px - 1px)) {
     .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
-      font-size: var(--typography-heading-4-font-size, 1.125rem);
-      line-height: var(--typography-heading-4-line-height, 1.5rem);
-      letter-spacing: var(--typography-heading-4-letter-spacing, normal);
-      padding: 0;
+      font-size: var(--typography-heading-3-font-size, 1.375rem);
+      line-height: var(--typography-heading-3-line-height, 1.875rem);
+      letter-spacing: var(--typography-heading-3-letter-spacing, normal);
+      padding: 8px 0;
     }
   }
   .TitleBlock-module_avatar__mEjJ8 {
@@ -10422,10 +10269,14 @@
   }
   .TitleBlock-module_hamburger__qe4R0 {
     display: none;
-    margin-inline-end: var(--spacing-xs, 0.375rem);
-    margin-inline-start: 0;
   }
-  @container (max-width: calc(1080px - 1px)) {
+  @media (max-width: 1023px) and (hover: none) {
+    .TitleBlock-module_hamburger__qe4R0 {
+      display: flex;
+      align-items: center;
+    }
+  }
+  @media (max-width: 759px) {
     .TitleBlock-module_hamburger__qe4R0 {
       display: flex;
       align-items: center;
@@ -10528,9 +10379,13 @@
   .TitleBlock-module_rowBelowSeparatorInnerContent__g5H9w {
     display: flex;
     width: 100%;
-    margin-top: -0.1875rem;
     justify-content: space-between;
   }
+  @container (max-width: calc(768px - 1px)) {
+    .TitleBlock-module_rowBelowSeparatorInnerContent__g5H9w {
+      height: 3.75rem;
+    }
+  }
   .TitleBlock-module_titleAndAdjacent__Q7W-m {
     display: flex;
     min-width: 0;
@@ -10611,7 +10466,7 @@
     .TitleBlock-module_navigationTabEdgeShadowRight__xkIWc, .TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR {
       display: block;
       position: absolute;
-      top: 3.5625rem;
+      top: 3.667rem;
       width: 3.75rem;
       height: 3.75rem;
       background: linear-gradient(0deg, var(--color-purple-600, #5f3361), rgba(var(--color-purple-600-rgb, 95, 51, 97), 0));
@@ -10664,10 +10519,22 @@
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_secondaryActionsContainer__-4q0l, .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_secondaryActionsContainer__-4q0l, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_secondaryActionsContainer__-4q0l {
     color: var(--color-blue-500, #0168b3);
   }
+  .TitleBlock-module_secondaryActionsContainer__-4q0l .TitleBlock-module_secondaryOverflowCombinedMenu__CTddK {
+    display: none;
+  }
   @container (max-width: calc(1080px - 1px)) {
-    .TitleBlock-module_secondaryActionsContainer__-4q0l {
+    .TitleBlock-module_secondaryActionsContainer__-4q0l .TitleBlock-module_secondaryButtonContainer__xFL9X,
+    .TitleBlock-module_secondaryActionsContainer__-4q0l .TitleBlock-module_secondaryOverflowMenu__gvmgW {
       display: none;
     }
+    .TitleBlock-module_secondaryActionsContainer__-4q0l .TitleBlock-module_secondaryOverflowCombinedMenu__CTddK {
+      display: flex;
+    }
+  }
+  @container (max-width: calc(768px - 1px)) {
+    .TitleBlock-module_secondaryActionsContainer__-4q0l {
+      margin-top: -3px;
+    }
   }
   .TitleBlock-module_breadcrumb__lVNKz {
     appearance: none;
@@ -10705,6 +10572,11 @@
     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 (max-width: 1023px) {
+    .TitleBlock-module_breadcrumb__lVNKz {
+      display: none;
+    }
+  }
   @media only screen {
     @container (max-width: 1644px) {
       .TitleBlock-module_breadcrumb__lVNKz {
@@ -10716,12 +10588,8 @@
       }
     }
   }
-  @container (max-width: calc(1080px - 1px)) {
-    .TitleBlock-module_breadcrumb__lVNKz {
-      display: none;
-    }
-  }
   .TitleBlock-module_breadcrumbTextLink__ngx82 {
+    display: none;
     clip-path: rect(0 0 0 0);
     height: 1px;
     overflow: hidden;
@@ -10814,8 +10682,19 @@
     color: var(--color-blue-500, #0168b3);
     background-color: rgba(var(--color-blue-500-rgb, 1, 104, 179), 0.1);
   }
+  @media (max-width: 1023px) {
+    .TitleBlock-module_circle__68z-T {
+      display: none;
+    }
+  }
   /* stylelint-enable no-descending-specificity */
 }
+.TitleBlock-module_staticIcon__5jeBS {
+  display: none;
+  width: 20px;
+  height: 20px;
+}
+
 @keyframes TitleBlock-module_slide-fade__o5TnP {
   0% {
     display: none;

package/dist/types/TitleBlock/TitleBlock.d.ts

@@ -4,6 +4,6 @@ import { type TitleBlockProps } from './types';
  * {@link https://cultureamp.design/?path=/docs/components-titleblock-api-specification--docs Storybook}
  */
 export declare const TitleBlock: {
-    ({ title, variant, breadcrumb, avatar, subtitle, sectionTitle, sectionTitleDescription, renderSectionTitle, pageSwitcherSelect, handleHamburgerClick, primaryAction, defaultAction, secondaryActions, secondaryOverflowMenuItems, navigationTabs, collapseNavigationAreaWhenPossible, textDirection, surveyStatus, id, titleAutomationId, avatarAutomationId, subtitleAutomationId, sectionTitleAutomationId, sectionTitleDescriptionAutomationId, breadcrumbAutomationId, breadcrumbTextAutomationId, autoHideMobileActionsMenu, }: TitleBlockProps): JSX.Element;
+    ({ title, variant, breadcrumb, avatar, subtitle, sectionTitle, sectionTitleDescription, renderSectionTitle, pageSwitcherSelect, handleHamburgerClick, primaryAction, defaultAction, secondaryActions, secondaryOverflowMenuItems, navigationTabs, collapseNavigationAreaWhenPossible, textDirection, surveyStatus, id, titleAutomationId, avatarAutomationId, subtitleAutomationId, sectionTitleAutomationId, sectionTitleDescriptionAutomationId, breadcrumbAutomationId, breadcrumbTextAutomationId, }: TitleBlockProps): JSX.Element;
     displayName: string;
 };

package/dist/types/TitleBlock/subcomponents/MainActions.d.ts

@@ -1,13 +1,14 @@
-import { type DefaultActionProps, type PrimaryActionProps, type TitleBlockMenuItemProps } from '../types';
+import { type DefaultActionProps, type PrimaryActionProps, type SecondaryActionsProps, type TitleBlockMenuItemProps } from '../types';
 type MainActionsProps = {
     primaryAction?: PrimaryActionProps;
     defaultAction?: DefaultActionProps;
     reversed?: boolean;
-    overflowMenuItems?: TitleBlockMenuItemProps[];
+    secondaryActions?: SecondaryActionsProps;
+    secondaryOverflowMenuItems?: TitleBlockMenuItemProps[];
     showOverflowMenu?: boolean;
 };
 export declare const MainActions: {
-    ({ primaryAction, defaultAction, reversed, overflowMenuItems, showOverflowMenu, }: MainActionsProps): JSX.Element;
+    ({ primaryAction, defaultAction, secondaryActions, secondaryOverflowMenuItems, reversed, }: MainActionsProps): JSX.Element;
     displayName: string;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-guidance-block-codemod-20251215033932",
+  "version": "0.0.0-canary-01-titleblock-20251216220648",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Avatar/Avatar.module.css

@@ -95,6 +95,7 @@
     font-family: var(--typography-heading-1-font-family);
     font-weight: var(--typography-heading-1-font-weight);
     letter-spacing: var(--typography-heading-3-letter-spacing);
+    overflow-wrap: normal;
   }
 
   .initials.longName::before {

package/src/TitleBlock/TitleBlock.module.scss

@@ -10,11 +10,10 @@
 @import './variables';
 
 @layer kz-components {
-  $title-block-margin-width-on-medium-and-small: 12px;
   $breadcrumb-circle-width: 48px;
   $breadcrumb-breakpoint-width: $layout-content-max-width + $layout-content-side-margin * 2 +
     $breadcrumb-circle-width * 2.25;
-  $title-block-separator-height: 0.1875rem;
+  $title-block-separator-height: 0.083rem;
   $tab-container-height-default: $ca-grid * 3;
   $tab-container-height-small: $ca-grid * 2.5;
   $tab-container-height-default-collapsed: 0;
@@ -57,12 +56,10 @@
 
   .lightVariant .titleRow {
     background-color: $color-white;
-    margin-bottom: 3px; // needed to correctly position the active tab label :after element
   }
 
   .adminVariant .titleRow {
     background-color: $color-white;
-    margin-bottom: 3px; // needed to correctly position the active tab label :after element
   }
 
   %titleBlockInner {
@@ -74,7 +71,14 @@
     min-width: 0; // this is an important trick to prevent flexbox items from overflowing
 
     @include title-block-medium-and-small {
-      margin: 0 $title-block-margin-width-on-medium-and-small;
+      padding-right: 20px;
+      margin: 0;
+      @media (max-width: 1023px) {
+        padding-left: 20px;
+      }
+      @media (max-width: 759px) {
+        padding-left: 0px;
+      }
     }
   }
 
@@ -84,6 +88,10 @@
 
   .lightVariant .titleRowInner {
     border-bottom: 1px solid $color-gray-300;
+
+    @include title-block-xsmall {
+      padding-bottom: 12px;
+    }
   }
 
   .rowBelowSeparatorInner {
@@ -91,11 +99,11 @@
   }
 
   .titleRowInnerContent {
+    padding-block: 20px;
     position: relative;
     display: flex;
     width: 100%;
     align-items: center;
-    min-height: $ca-grid * 3.5;
     justify-content: space-between;
     border-bottom: $title-block-separator-height solid rgba($color-white-rgb, 0.1);
 
@@ -112,6 +120,11 @@
     @include title-block-medium-and-small {
       border-bottom: none;
     }
+
+    @media (max-width: 670px) {
+      flex-direction: column;
+      align-items: flex-start;
+    }
   }
 
   .title {
@@ -202,10 +215,10 @@
     }
 
     @include title-block-medium-and-small {
-      font-size: $typography-heading-4-font-size;
-      line-height: $typography-heading-4-line-height;
-      letter-spacing: $typography-heading-4-letter-spacing;
-      padding: 0;
+      font-size: $typography-heading-3-font-size;
+      line-height: $typography-heading-3-line-height;
+      letter-spacing: $typography-heading-3-letter-spacing;
+      padding: 8px 0;
     }
   }
 
@@ -238,10 +251,12 @@
 
   .hamburger {
     display: none;
+    @media (max-width: 1023px) and (hover: none) {
+      display: flex;
+      align-items: center;
+    }
 
-    @include ca-margin($end: $spacing-xs);
-
-    @include title-block-medium-and-small {
+    @media (max-width: 759px) {
       display: flex;
       align-items: center;
     }
@@ -351,8 +366,11 @@
   .rowBelowSeparatorInnerContent {
     display: flex;
     width: 100%;
-    margin-top: -$title-block-separator-height;
     justify-content: space-between;
+
+    @include title-block-small {
+      height: $tab-container-height-small;
+    }
   }
 
   .titleAndAdjacent {
@@ -518,9 +536,24 @@
       color: $color-blue-500;
     }
 
-    @include title-block-medium-and-small {
+    .secondaryOverflowCombinedMenu {
       display: none;
     }
+
+    @include title-block-medium-and-small {
+      .secondaryButtonContainer,
+      .secondaryOverflowMenu {
+        display: none;
+      }
+
+      .secondaryOverflowCombinedMenu {
+        display: flex;
+      }
+    }
+
+    @include title-block-small {
+      margin-top: -3px;
+    }
   }
 
   .breadcrumb {
@@ -561,6 +594,10 @@
       }
     }
 
+    @media (max-width: 1023px) {
+      display: none;
+    }
+
     @media only screen {
       @container (max-width: #{$breadcrumb-breakpoint-width}) {
         position: relative;
@@ -570,10 +607,6 @@
         @include ca-position($start: 0);
       }
     }
-
-    @include title-block-medium-and-small {
-      display: none;
-    }
   }
 
   @mixin visually-hidden {
@@ -595,6 +628,7 @@
   }
 
   .breadcrumbTextLink {
+    display: none;
     // We are using visually hidden here instead of display:none so that a screen reader
     // navigating via 'read mode' (which doesn't trigger hover/focus) will still hear this link name
     @include visually-hidden;
@@ -696,10 +730,20 @@
       color: $color-blue-500;
       background-color: rgba($color-blue-500-rgb, 0.1);
     }
+
+    @media (max-width: 1023px) {
+      display: none;
+    }
   }
   /* stylelint-enable no-descending-specificity */
 }
 
+.staticIcon {
+  display: none;
+  width: 20px;
+  height: 20px;
+}
+
 @keyframes slide-fade {
   0% {
     display: none;