You can use code in userChrome.css for the URL bar breakout and leave ui.prefersReducedMotion at 0 (or reset this pref to hide it from about:config).

• https://www.userchrome.org/megabar-styling-firefox-address-bar.html#mbarstyler

I changed ui.prefersReducedMotion to 0

and copied the above-mentioned code in my userChrome.csss file but the enlargement is still there when I open a new tab.

I tested my own code from that time and it still works in Firefox 88 on Linux. You may have to adjust some property values.

/* https://searchfox.org/mozilla-release/source/browser/themes/shared/urlbar-searchbar.inc.css */

#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
  --urlbar-height: 28px !important;
  --urlbar-toolbar-height: 30px !important;

  width: 100% !important;
  top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
  left: 0 !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-input-container,
#urlbar-input-container {
  height: var(--urlbar-height) !important;
  width: 100% !important;
  padding-block: unset !important;
  padding-inline: unset !important;
  transition: none !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-background {
  animation: none !important;
}

• https://www.userchrome.org/what-is-userchrome-css.html
• https://www.userchrome.org/how-create-userchrome-css.html

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

• toolkit.legacyUserProfileCustomizations.stylesheets = true

• https://www.userchrome.org/firefox-changes-userchrome-css.html

If you keep the reduced motion setting set to 1, there are some ideas in this thread:

https://old.reddit.com/r/FirefoxCSS/comments/i0p219/any_way_to_restore_just_the_animated_tab_throbber/

Thank you for your replies. Unfortunately none of these solutions worked for me. There might be a conflict in the .css file (I should mention that I have changed the appearance of tabs, making them more rounded and I have changed the colour of the bookmarked folders to yellow).

I could copy/paste my userChrome.csss file here, if anyone would be willing to take a look. Many thanks!

This forum sometimes butchers code, so if you don't mind, you could paste your userChrome.css file contents on a site like the following and then post a link to your shared paste back here:

https://pastebin.com/

There is a selector for "Syntax Highlighting" that you can change to CSS to make it easier to read.