Backed out changeset 608fd0b6c8de (bug 1840687) for causing failures on browser_html_scroll_restoration.js CLOSED TREE

browser/components/storybook/stories/message-bar.stories.mjs

@@ -33,19 +33,16 @@ message-bar-button = Click me, please!
   },
 };
 
-const Template = ({ button, dismissable, type }) =>
+const Template = ({ dismissable, type }) =>
   html`
     <message-bar type=${type} ?dismissable=${dismissable}>
       <span data-l10n-id="message-bar-text"></span>
-      ${button ? html`<button data-l10n-id="message-bar-button"></button>` : ""}
+      <button data-l10n-id="message-bar-button"></button>
     </message-bar>
   `;
 
 export const Basic = Template.bind({});
-Basic.args = { type: "", dismissable: false, button: true };
+Basic.args = { type: "", dismissable: false };
 
 export const Dismissable = Template.bind({});
-Dismissable.args = { type: "", dismissable: true, button: true };
-
-export const TextOnly = Template.bind({});
-TextOnly.args = { type: "", dismissable: false, button: false };
+Dismissable.args = { type: "", dismissable: true };

toolkit/content/widgets/message-bar.css

@@ -50,7 +50,6 @@
 ::slotted(button) {
   /* Enforce micro-button width. */
   min-width: -moz-fit-content !important;
-  margin: 0 !important;
 }
 
 /* MessageBar Grid Layout */
@@ -59,7 +58,7 @@
   background: var(--message-bar-background-color);
   color: var(--message-bar-text-color);
 
-  padding: 7px;
+  padding: 3px 7px;
   position: relative;
 
   border-radius: 4px;
@@ -75,18 +74,13 @@
 
 .content {
   margin: 0 4px;
-  display: flex;
-  flex-wrap: wrap;
+  display: inline-block;
   /* Ensure that the message bar content is vertically aligned. */
   align-items: center;
   /* Ensure that the message bar content is wrapped. */
   word-break: break-word;
 }
 
-:not(.infobar) > .content {
-  gap: 16px;
-}
-
 /* MessageBar icon style */
 
 .icon {