Merge branch 'main' into PM-26250-Explore-options-to-enable-direct-importer-for-mac-app-store-build

libs/components/src/color-password/color-password.component.ts

@@ -14,7 +14,7 @@ type CharacterType = "letter" | "emoji" | "special" | "number";
 @Component({
   selector: "bit-color-password",
   template: `@for (character of passwordCharArray(); track $index; let i = $index) {
-    <span [class]="getCharacterClass(character)">
+    <span [class]="getCharacterClass(character)" class="tw-font-mono">
       <span>{{ character }}</span>
       @if (showCount()) {
         <span class="tw-whitespace-nowrap tw-text-xs tw-leading-5 tw-text-main">{{ i + 1 }}</span>

libs/components/src/color-password/color-password.stories.ts

@@ -4,7 +4,7 @@ import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for
 
 import { ColorPasswordComponent } from "./color-password.component";
 
-const examplePassword = "Wq$Jk😀7jlI  DX#rS5Sdi!z ";
+const examplePassword = "Wq$Jk😀7jlI  DX#rS5Sdi!z0O ";
 
 export default {
   title: "Component Library/Color Password",

libs/components/src/navigation/side-nav.component.html

@@ -23,7 +23,11 @@
     (keydown)="handleKeyDown($event)"
   >
     <ng-content></ng-content>
-    <div class="tw-sticky tw-bottom-0 tw-left-0 tw-z-20 tw-mt-auto tw-w-full tw-bg-background-alt3">
+    <!-- 53rem = ~850px -->
+    <!-- This is a magic number. This number was selected by going to the UI and finding the number that felt the best to me and design. No real rhyme or reason :) -->
+    <div
+      class="[@media(min-height:53rem)]:tw-sticky tw-bottom-0 tw-left-0 tw-z-20 tw-mt-auto tw-w-full tw-bg-background-alt3"
+    >
       <bit-nav-divider></bit-nav-divider>
       @if (data.open) {
         <ng-content select="[slot=footer]"></ng-content>

libs/vault/src/cipher-view/item-details/item-details-v2.component.html

@@ -10,7 +10,7 @@
       <div class="tw-flex tw-items-center tw-justify-center" style="width: 40px; height: 40px">
         <app-vault-icon [cipher]="cipher()" [coloredIcon]="true"></app-vault-icon>
       </div>
-      <h2 bitTypography="h4" class="tw-ml-2 tw-mt-2" data-testid="item-name">
+      <h2 bitTypography="h4" class="tw-ml-2 tw-mt-2 tw-select-auto" data-testid="item-name">
         {{ cipher().name }}
       </h2>
     </div>