topic Re: The New Tab UI change is terrible in Discussions

The New Tab UI change is terrible

David_H23 — Fri, 19 Sep 2025 18:18:59 GMT

Screenshot of what the new UI looks like for me

I just updated to 143.0.1 from 142.0.1, and it suddenly changed the UI of the New Tab page and made it much uglier. All of the icons are too far apart, which wastes space, and I hate the rounded corners. I don't have a screenshot of what it looked like before. I tried looking up this problem, but I couldn't find any ways to change it back that worked. I remember using an about:config option before to change it back to the better layout, but now I can't find any that works.

I can't find browser.newtabpage.activity-stream.newtabLayouts.variant-a and browser.newtabpage.activity-stream.newtabLayouts.variant-b anymore, while browser.newtabpage.activity-stream.newtabShortcuts.refresh false does absolutely nothing. How do I change it back to the old UI?

Re: The New Tab UI change is terrible

David_H23 — Fri, 19 Sep 2025 19:46:00 GMT

Also, not related to the New Tab page, but I thought I'd reply to the post I just made instead of making another one: how do I get rid of this unnecessary blue pin button that appears when I move a tab across the taskbar at the top of the browser? This started happening when I updated to 143.0.1. I can't find any settings (including in about:config) to disable it.

Re: The New Tab UI change is terrible

Agentvirtuel — Sat, 20 Sep 2025 03:24:42 GMT

Hello

https://connect.mozilla.org/t5/ideas/add-an-option-to-disable-this-new-quot-drag-to-pin-unpin-tab/idi-p/103816

Re: The New Tab UI change is terrible

David_H23 — Sat, 20 Sep 2025 05:21:52 GMT

Thank you for the response, but unfortunately this doesn't provide any solutions to this problem.

Re: The New Tab UI change is terrible

David_H23 — Sat, 20 Sep 2025 05:24:59 GMT

Sorry, clicked the wrong thing by accident.

Thank you for the response, but unfortunately this doesn't provide any solutions to this problem.

Re: The New Tab UI change is terrible

Agentvirtuel — Sat, 20 Sep 2025 06:17:31 GMT

Hello

https://connect.mozilla.org/t5/discussions/feedback-for-the-new-tab-layout-variants-in-the-home-page/m-p/105812/highlight/true#M40900

Take a look at https://www.camp-firefox.de/forum/thema/139018-änderungenn-der-kachelansicht-bei-startseite-und-neuem-tab/?postID=1267261#post1267261

A test, with the help of userContent.css file.

Without userContent.css

With userContent.css

@-moz-document url(about:newtab), url(about:home) { li.top-site-outer { margin-top: -10px !important; margin-bottom: 0px !important; margin-left: 0px !important; } .top-site-outer .tile .icon-wrapper { min-width: 100% !important; min-height: 100% !important; border-radius: 8px !important; } .top-site-outer .rich-icon { border: 5px solid white !important; border-radius: 8px !important; } .top-site-outer .title.pinned span { padding: 0 0px !important; } }

Re: The New Tab UI change is terrible

David_H23 — Sat, 20 Sep 2025 21:42:07 GMT

Sadly, all this does is make the icons in each tile bigger. It doesn't fix the spacing between each tile, the tile size, or the rounded corners. I want a solution that makes it look exactly like how it was before.

Re: The New Tab UI change is terrible

Agentvirtuel — Sun, 21 Sep 2025 05:35:23 GMT

Hello

https://www.reddit.com/r/FirefoxCSS/comments/1niummp/how_do_i_remove_excess_space_between_pinned

A test.

Without userContent.css

With userContent.css

.top-site-outer { width: 90px !important; }

Re: The New Tab UI change is terrible

crex — Sun, 21 Sep 2025 18:46:10 GMT

I myself much prefer the earlier design. Here's what I came up with to revert to it. It reverts spacing, rounded corners, and also moves the pin icon (if you have pinned tabs) and the 3-dot-menu of the tabs to their old positions.

Additionally, I noticed that the customize button was changed. I don't mind the new version (pen icon + text appearing upon hover instead of just the gear icon). But as I was just in the flow of reverting all changes when I did, I included that.

@-moz-document url(about:home), url(about:newtab) { /* * Fix "Activity Stream Refresh" */ /* Bigger Gap between rows */ ul.top-sites-list { row-gap: var(--space-xlarge) !important } /* Smaller Gap between columns */ li.top-site-outer { width: calc(var(--size-item-large) * 3) !important } /* Smaller border radius */ .tile, .top-site-outer { border-radius: var(--border-radius-medium) !important } .top-site-icon { border-radius: var(--border-radius-small) !important } /* Show Pin next to Website title */ .icon-pin-small { display: none !important } div.title.has-icon.pinned > span::before { color: var(--icon-color) !important; content: " "; display: inline-block; width: 14px; height: 12px; background-image: url("chrome://browser/skin/pin-12.svg"); background-repeat: no-repeat; vertical-align: middle; } .darkWallpaper li.top-site-outer:not(:hover, :active, .active) div.title.has-icon.pinned > span::before { filter: invert(100%) } /* Move 3-dot-menu to the top */ .context-menu-button { inset-inline-end: 3px !important; top: -20px !important; height: 20px !important; width: 20px !important; } .top-site-outer .context-menu { inset-block-start: 0 !important } /* Light background on hover */ .darkWallpaper li.top-site-outer:not(:hover, :active, .active), .darkWallpaper .top-site-outer .context-menu-button { color-scheme: dark !important } .darkWallpaper li.top-site-outer { color-scheme: light !important } .darkWallpaper .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) { background-color: rgba(255, 255, 255, 70%) !important } /* Non-circular Icons for sites without favicon */ .top-site-outer .tile .icon-wrapper.letter-fallback { border-radius: inherit !important } .top-site-outer .tile .icon-wrapper.letter-fallback::before { color: #fff } /* Customize button */ button.personalize-button { background-image: url("chrome://global/skin/icons/settings.svg"); background-repeat: no-repeat; background-color: transparent !important; background-size: var(--icon-size-default) !important; vertical-align: middle; fill: currentColor; color: var(--icon-color) !important; height: 16px !important; width: 16px !important; min-width: 16px !important; padding: 15px !important; transition: unset !important; box-shadow: unset !important; } button.personalize-button:hover { background-color: var(--newtab-element-hover-color) !important } button.personalize-button div, button.personalize-button label { display: none !important } .darkWallpaper .personalize-button:not(:hover, :active) { color-scheme: dark !important } }

Re: The New Tab UI change is terrible

David_H23 — Sun, 21 Sep 2025 19:30:24 GMT

Thank you so much! This seems to look pretty much exactly like it did before!

Re: The New Tab UI change is terrible

David_H23 — Sun, 21 Sep 2025 19:32:51 GMT

Thank you for responding again. This does look a lot better than the CSS you suggested before, but crex's solution above is more accurate to the New Tab page's previous look.