From 02cbc37ac56eccefacfb1d35a6a4c7e8f59c0cea Mon Sep 17 00:00:00 2001
From: Daniel Riera <driera@livefront.com>
Date: Mon, 12 May 2025 17:23:06 -0400
Subject: [PATCH] PM-20397 Misc notification bar UI tweaks (#14558)

* PM-20637

* turncate save button
---
 .../content/components/notification/container.ts  |  2 +-
 .../content/components/notification/footer.ts     | 15 +++++++++------
 .../content/components/rows/button-row.ts         |  2 +-
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/apps/browser/src/autofill/content/components/notification/container.ts b/apps/browser/src/autofill/content/components/notification/container.ts
index c7c7ae16cde..1a78854f5dc 100644
--- a/apps/browser/src/autofill/content/components/notification/container.ts
+++ b/apps/browser/src/autofill/content/components/notification/container.ts
@@ -94,7 +94,7 @@ const notificationContainerStyles = (theme: Theme) => css`
   }
 
   [class*="${notificationBodyClassPrefix}-"] {
-    margin: ${spacing["3"]} 0 ${spacing["1.5"]} ${spacing["3"]};
+    margin: ${spacing["3"]} 0 0 ${spacing["3"]};
     padding-right: ${spacing["3"]};
   }
 `;
diff --git a/apps/browser/src/autofill/content/components/notification/footer.ts b/apps/browser/src/autofill/content/components/notification/footer.ts
index 73fe9084595..03d0d475e85 100644
--- a/apps/browser/src/autofill/content/components/notification/footer.ts
+++ b/apps/browser/src/autofill/content/components/notification/footer.ts
@@ -8,7 +8,7 @@ import {
   NotificationTypes,
 } from "../../../notification/abstractions/notification-bar";
 import { OrgView, FolderView, I18n, CollectionView } from "../common-types";
-import { spacing, themes } from "../constants/styles";
+import { spacing } from "../constants/styles";
 
 import { NotificationButtonRow } from "./button-row";
 
@@ -37,7 +37,7 @@ export function NotificationFooter({
   const primaryButtonText = i18n.saveAction;
 
   return html`
-    <div class=${notificationFooterStyles({ theme })}>
+    <div class=${notificationFooterStyles({ isChangeNotification })}>
       ${!isChangeNotification
         ? NotificationButtonRow({
             collections,
@@ -56,13 +56,16 @@ export function NotificationFooter({
   `;
 }
 
-const notificationFooterStyles = ({ theme }: { theme: Theme }) => css`
+const notificationFooterStyles = ({
+  isChangeNotification,
+}: {
+  isChangeNotification: boolean;
+}) => css`
   display: flex;
-  background-color: ${themes[theme].background.alt};
-  padding: 0 ${spacing[3]} ${spacing[3]} ${spacing[3]};
+  padding: ${spacing[2]} ${spacing[4]} ${isChangeNotification ? spacing[1] : spacing[4]}
+    ${spacing[4]};
 
   :last-child {
     border-radius: 0 0 ${spacing["4"]} ${spacing["4"]};
-    padding-bottom: ${spacing[4]};
   }
 `;
diff --git a/apps/browser/src/autofill/content/components/rows/button-row.ts b/apps/browser/src/autofill/content/components/rows/button-row.ts
index 3527d050b81..7e81d846cb7 100644
--- a/apps/browser/src/autofill/content/components/rows/button-row.ts
+++ b/apps/browser/src/autofill/content/components/rows/button-row.ts
@@ -62,7 +62,7 @@ const buttonRowStyles = css`
 
   > button {
     max-width: min-content;
-    flex: 1 1 50%;
+    flex: 1 1 25%;
   }
 
   > div {