PM-20397 Misc notification bar UI tweaks (#14558)

* PM-20637

* turncate save button

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"]};
   }
 `;

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]};
   }
 `;

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 {