tor-browser

commit 8d8f98199584e12513faa978f358c835b4a19522
parent 0f038fc60815e52a0f45832777bee98027e708b9
Author: Reem H <42309026+reemhamz@users.noreply.github.com>
Date:   Thu, 11 Dec 2025 03:01:10 +0000

Bug 1967365 - Fix customization menu lines from showing in wallpaper selection window. r=home-newtab-reviewers,npypchenko

Differential Revision: https://phabricator.services.mozilla.com/D275905

Diffstat:
M
browser/extensions/newtab/content-src/components/WallpaperCategories/_WallpaperCategories.scss
 | 
17
+++++++----------
M
browser/extensions/newtab/css/activity-stream.css
 | 
15
++++++---------

2 files changed, 13 insertions(+), 19 deletions(-)
diff --git a/browser/extensions/newtab/content-src/components/WallpaperCategories/_WallpaperCategories.scss b/browser/extensions/newtab/content-src/components/WallpaperCategories/_WallpaperCategories.scss
@@ -202,6 +202,8 @@
   border: none;
 
   &.category {
+    --wallpaper-panel-width: 430px;
+
     background-color: var(--newtab-background-color-secondary);
     color: var(--newtab-text-primary-color);
     display: unset;
@@ -211,19 +213,14 @@
     height: 100%;
     // Can get rid of padding and replace height with
     // 'height: stretch' when bug 1789477 lands.
-    padding-block-end: var(--space-xxlarge);
-    inset-inline-start: var(--space-xlarge);
+    padding: var(--space-xlarge);
     position: absolute;
     inset-block-start: 0;
-    width: 380px;
+    inset-inline-start: 100%;
+    width: var(--wallpaper-panel-width);
     z-index: 2;
-    transform: translateX(100%);
     overflow-y: auto;
 
-    &:dir(rtl) {
-      transform: translateX(-100%);
-    }
-
     fieldset {
       border: none;
       display: grid;
@@ -237,13 +234,13 @@
       &.wallpaper-list-exit,
       &.wallpaper-list-enter-done,
       &.wallpaper-list-exit-done {
-        transition: transform 300ms;
+        transition: inset-inline-start 300ms;
       }
     }
 
     &.wallpaper-list-enter-done,
     &.wallpaper-list-enter-active {
-      transform: translateX(0);
+      inset-inline-start: calc(100% - var(--wallpaper-panel-width));
     }
   }
 
diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css
@@ -2631,6 +2631,7 @@ main section {
   border: none;
 }
 .wallpaper-list.category {
+  --wallpaper-panel-width: 430px;
   background-color: var(--newtab-background-color-secondary);
   color: var(--newtab-text-primary-color);
   display: unset;
@@ -2638,18 +2639,14 @@ main section {
   grid-auto-rows: unset;
   grid-template-columns: unset;
   height: 100%;
-  padding-block-end: var(--space-xxlarge);
-  inset-inline-start: var(--space-xlarge);
+  padding: var(--space-xlarge);
   position: absolute;
   inset-block-start: 0;
-  width: 380px;
+  inset-inline-start: 100%;
+  width: var(--wallpaper-panel-width);
   z-index: 2;
-  transform: translateX(100%);
   overflow-y: auto;
 }
-.wallpaper-list.category:dir(rtl) {
-  transform: translateX(-100%);
-}
 .wallpaper-list.category fieldset {
   border: none;
   display: grid;
@@ -2659,11 +2656,11 @@ main section {
 }
 @media (prefers-reduced-motion: no-preference) {
   .wallpaper-list.category.wallpaper-list-enter, .wallpaper-list.category.wallpaper-list-exit, .wallpaper-list.category.wallpaper-list-enter-done, .wallpaper-list.category.wallpaper-list-exit-done {
-    transition: transform 300ms;
+    transition: inset-inline-start 300ms;
   }
 }
 .wallpaper-list.category.wallpaper-list-enter-done, .wallpaper-list.category.wallpaper-list-enter-active {
-  transform: translateX(0);
+  inset-inline-start: calc(100% - var(--wallpaper-panel-width));
 }
 .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light {
   display: inline-block;