[WIP] Minimize impact of sharing CSS.

apps/browser/src/autofill/content/components/notification/confirmation/body.ts

@@ -59,7 +59,6 @@ export function NotificationConfirmationBody({
   `;
 }
 
-// Allow sharing of styles between notifications (@TODO isolate structural/presentational component layer)
 export const iconContainerStyles = (error?: string | boolean) => css`
   > svg {
     width: ${!error ? "50px" : "40px"};

apps/browser/src/autofill/content/components/notification/confirmation/container.ts

@@ -113,9 +113,14 @@ function getConfirmationMessage(i18n: I18n, type?: NotificationType, error?: str
   if (error) {
     return i18n.saveFailureDetails;
   }
+
+  /* @TODO This partial string return and later concatenation with the cipher name is needed
+   * to handle cipher name overflow cases, but is risky for i18n concerns. Fix concatenation
+   * with cipher name overflow when a tag replacement solution is available.
+   */
   return type === NotificationTypes.Add
-    ? i18n.loginSaveConfirmation
-    : i18n.loginUpdatedConfirmation;
+    ? i18n.notificationLoginSaveConfirmation
+    : i18n.notificationLoginUpdatedConfirmation;
 }
 
 function getHeaderMessage(i18n: I18n, type?: NotificationType, error?: string) {

apps/browser/src/autofill/content/components/notification/confirmation/footer.ts

@@ -4,9 +4,9 @@ import { html } from "lit";
 import { Theme } from "@bitwarden/common/platform/enums";
 
 import { ActionButton } from "../../buttons/action-button";
-import { AdditionalTasksButtonContent } from "../../buttons/additional-tasks/button-content";
 import { I18n } from "../../common-types";
-import { notificationFooterStyles } from "../footer";
+import { spacing, themes } from "../../constants/styles";
+import { ExternalLink } from "../../icons";
 
 export type NotificationConfirmationFooterProps = {
   i18n: I18n;
@@ -22,7 +22,7 @@ export function NotificationConfirmationFooter({
   const primaryButtonText = i18n.nextSecurityTaskAction;
 
   return html`
-    <div class=${[maxWidthMinContent, notificationFooterStyles({ theme })]}>
+    <div class=${[maxWidthMinContent, notificationConfirmationFooterStyles({ theme })]}>
       ${ActionButton({
         handleClick: handleButtonClick,
         buttonText: AdditionalTasksButtonContent({ buttonText: primaryButtonText, theme }),
@@ -35,3 +35,29 @@ export function NotificationConfirmationFooter({
 const maxWidthMinContent = css`
   max-width: min-content;
 `;
+
+const notificationConfirmationFooterStyles = ({ theme }: { theme: Theme }) => css`
+  background-color: ${themes[theme].background.alt};
+  padding: 0 ${spacing[3]} ${spacing[3]} ${spacing[3]};
+
+  :last-child {
+    border-radius: 0 0 ${spacing["4"]} ${spacing["4"]};
+    padding-bottom: ${spacing[4]};
+  }
+`;
+
+function AdditionalTasksButtonContent({ buttonText, theme }: { buttonText: string; theme: Theme }) {
+  return html`
+    <div class=${additionalTasksButtonContentStyles({ theme })}>
+      <span>${buttonText}</span>
+      ${ExternalLink({ theme, color: themes[theme].text.contrast })}
+    </div>
+  `;
+}
+
+const additionalTasksButtonContentStyles = ({ theme }: { theme: Theme }) => css`
+  gap: ${spacing[2]};
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+`;

apps/browser/src/autofill/content/components/notification/confirmation/message.ts

@@ -28,28 +28,31 @@ export function NotificationConfirmationMessage({
     <div class=${containerStyles}>
       ${message || buttonText
         ? html`
-            <span class=${itemNameStyles(theme)} title=${itemName}> ${itemName} </span>
-            <span
-              title=${message || buttonText}
-              class=${notificationConfirmationMessageStyles(theme)}
-            >
-              ${message || nothing}
-              ${buttonText
-                ? html`
-                    <a
-                      title=${buttonText}
-                      class=${notificationConfirmationButtonTextStyles(theme)}
-                      @click=${handleClick}
-                      @keydown=${(e: KeyboardEvent) => handleButtonKeyDown(e, () => handleClick(e))}
-                      aria-label=${buttonAria}
-                      tabindex="0"
-                      role="button"
-                    >
-                      ${buttonText}
-                    </a>
-                  `
-                : nothing}
-            </span>
+            <div class=${singleLineWrapperStyles}>
+              <span class=${itemNameStyles(theme)} title=${itemName}> ${itemName} </span>
+              <span
+                title=${message || buttonText}
+                class=${notificationConfirmationMessageStyles(theme)}
+              >
+                ${message || nothing}
+                ${buttonText
+                  ? html`
+                      <a
+                        title=${buttonText}
+                        class=${notificationConfirmationButtonTextStyles(theme)}
+                        @click=${handleClick}
+                        @keydown=${(e: KeyboardEvent) =>
+                          handleButtonKeyDown(e, () => handleClick(e))}
+                        aria-label=${buttonAria}
+                        tabindex="0"
+                        role="button"
+                      >
+                        ${buttonText}
+                      </a>
+                    `
+                  : nothing}
+              </span>
+            </div>
           `
         : nothing}
       ${messageDetails
@@ -61,14 +64,18 @@ export function NotificationConfirmationMessage({
 
 const containerStyles = css`
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
+  flex-direction: column;
   gap: ${spacing[1]};
   width: 100%;
 `;
 
-export const baseTextStyles = css`
-  flex-grow: 1;
+const singleLineWrapperStyles = css`
+  display: inline;
+  white-space: normal;
+  word-break: break-word;
+`;
+
+const baseTextStyles = css`
   overflow-x: hidden;
   text-align: left;
   text-overflow: ellipsis;
@@ -82,6 +89,9 @@ export const notificationConfirmationMessageStyles = (theme: Theme) => css`
 
   color: ${themes[theme].text.main};
   font-weight: 400;
+  white-space: normal;
+  word-break: break-word;
+  display: inline;
 `;
 
 const itemNameStyles = (theme: Theme) => css`
@@ -91,6 +101,10 @@ const itemNameStyles = (theme: Theme) => css`
   font-weight: 400;
   white-space: nowrap;
   max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+  vertical-align: bottom;
 `;
 
 export const notificationConfirmationButtonTextStyles = (theme: Theme) => css`