tor-browser

commit 8e86403e772b27d7e9acc7c54948f985755f829f
parent 0df0bf13337f9a21e29b0366fdb9fd925dd88eec
Author: Maxx Crawford <mcrawford@mozilla.com>
Date:   Wed, 22 Oct 2025 21:46:26 +0000

Bug 1995057 - Vertically center search bar when in fixed-search mode r=home-newtab-reviewers,ini

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

Diffstat:
M
browser/extensions/newtab/content-src/components/Base/Base.jsx
 | 
8
++++----
M
browser/extensions/newtab/content-src/components/Search/_Search.scss
 | 
4
+++-
M
browser/extensions/newtab/css/activity-stream.css
 | 
20
+++++++++++---------
M
browser/extensions/newtab/data/content/activity-stream.bundle.js
 | 
8
++++----

4 files changed, 22 insertions(+), 18 deletions(-)
diff --git a/browser/extensions/newtab/content-src/components/Base/Base.jsx b/browser/extensions/newtab/content-src/components/Base/Base.jsx
@@ -338,11 +338,11 @@ export class BaseContent extends React.PureComponent {
     const CSS_VAR_SPACE_XXLARGE = 32.04; // Custom Acorn themed variable (8 * 0.267rem);
 
     let layout = {
-      outerWrapperPaddingTop: 24,
-      searchWrapperPaddingTop: 16,
+      outerWrapperPaddingTop: 32.04,
+      searchWrapperPaddingTop: 16.02,
       searchWrapperPaddingBottom: CSS_VAR_SPACE_XXLARGE,
-      searchWrapperFixedScrollPaddingTop: 27,
-      searchWrapperFixedScrollPaddingBottom: 27,
+      searchWrapperFixedScrollPaddingTop: 24.03,
+      searchWrapperFixedScrollPaddingBottom: 24.03,
       searchInnerWrapperMinHeight: 52,
       logoAndWordmarkWrapperHeight: 0,
       logoAndWordmarkWrapperMarginBottom: 0,
diff --git a/browser/extensions/newtab/content-src/components/Search/_Search.scss b/browser/extensions/newtab/content-src/components/Search/_Search.scss
@@ -371,7 +371,7 @@ $glyph-forward: url('chrome://browser/skin/forward.svg');
 }
 
 @media (height > 700px) {
-  .fixed-search {
+  .activity-stream .fixed-search {
     .search-wrapper {
       $search-height: $search-height-new;
       $search-icon-size: 24px;
@@ -387,6 +387,8 @@ $glyph-forward: url('chrome://browser/skin/forward.svg');
       inset-block-start: 0;
       width: 100%;
       z-index: 3;
+      display: flex;
+      align-items: center;
 
       .search-inner-wrapper {
         min-height: $search-height;
diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css
@@ -1772,7 +1772,7 @@ main section {
 }
 
 @media (height > 700px) {
-  .fixed-search .search-wrapper {
+  .activity-stream .fixed-search .search-wrapper {
     border-bottom: solid 1px var(--newtab-border-color);
     padding: var(--space-xlarge) 0;
     background-color: var(--newtab-overlay-color);
@@ -1782,31 +1782,33 @@ main section {
     inset-block-start: 0;
     width: 100%;
     z-index: 3;
+    display: flex;
+    align-items: center;
   }
-  .fixed-search .search-wrapper .search-inner-wrapper {
+  .activity-stream .fixed-search .search-wrapper .search-inner-wrapper {
     min-height: 52px;
   }
-  .fixed-search .search-wrapper input {
+  .activity-stream .fixed-search .search-wrapper input {
     background-position-x: 16px;
     background-size: 24px;
   }
-  .fixed-search .search-wrapper input:dir(rtl) {
+  .activity-stream .fixed-search .search-wrapper input:dir(rtl) {
     background-position-x: right 16px;
   }
-  .fixed-search .search-wrapper .search-handoff-button .fake-caret {
+  .activity-stream .fixed-search .search-wrapper .search-handoff-button .fake-caret {
     inset-block-start: var(--space-large);
   }
-  .fixed-search .search-wrapper .logo-and-wordmark {
+  .activity-stream .fixed-search .search-wrapper .logo-and-wordmark {
     display: none;
   }
-  .fixed-search .search-handoff-button {
+  .activity-stream .fixed-search .search-handoff-button {
     background-position-x: var(--space-large);
     background-size: 24px;
   }
-  .fixed-search .search-handoff-button:dir(rtl) {
+  .activity-stream .fixed-search .search-handoff-button:dir(rtl) {
     background-position-x: right var(--space-large);
   }
-  .fixed-search .search-handoff-button .fake-caret {
+  .activity-stream .fixed-search .search-handoff-button .fake-caret {
     inset-block-start: var(--space-small);
   }
 }
diff --git a/browser/extensions/newtab/data/content/activity-stream.bundle.js b/browser/extensions/newtab/data/content/activity-stream.bundle.js
@@ -16541,11 +16541,11 @@ class BaseContent extends (external_React_default()).PureComponent {
     const CSS_VAR_SPACE_XXLARGE = 32.04; // Custom Acorn themed variable (8 * 0.267rem);
 
     let layout = {
-      outerWrapperPaddingTop: 24,
-      searchWrapperPaddingTop: 16,
+      outerWrapperPaddingTop: 32.04,
+      searchWrapperPaddingTop: 16.02,
       searchWrapperPaddingBottom: CSS_VAR_SPACE_XXLARGE,
-      searchWrapperFixedScrollPaddingTop: 27,
-      searchWrapperFixedScrollPaddingBottom: 27,
+      searchWrapperFixedScrollPaddingTop: 24.03,
+      searchWrapperFixedScrollPaddingBottom: 24.03,
       searchInnerWrapperMinHeight: 52,
       logoAndWordmarkWrapperHeight: 0,
       logoAndWordmarkWrapperMarginBottom: 0