ntp: ensure cross-window sections collapse (#1387)

* ntp: ensure cross-window sections collapse

* style regression

Author: shakyShane

special-pages/pages/new-tab/app/favorites/components/Favorites.js

@@ -23,7 +23,7 @@ export const ROW_CAPACITY = 6;
 /**
  * Note: These values MUST match exactly what's defined in the CSS.
  */
-const ITEM_HEIGHT = 90;
+const ITEM_HEIGHT = 96;
 const ROW_GAP = 8;
 
 /**

special-pages/pages/new-tab/app/favorites/components/FavoritesProvider.js

@@ -116,9 +116,7 @@ export function FavoritesProvider({ children }) {
         (cb) => {
             if (!service.current) return;
             return service.current.onConfig((event) => {
-                if (event.source === 'manual') {
-                    cb(event.data);
-                }
+                cb(event.data);
             });
         },
         [service],

special-pages/pages/new-tab/app/favorites/components/Tile.module.css

@@ -8,6 +8,7 @@
     outline: none;
     padding-left: var(--sp-3);
     padding-right: var(--sp-3);
+    height: 96px;
 
     &:focus-visible .icon {
         box-shadow: var(--focus-ring);
@@ -33,7 +34,7 @@
     justify-items: center;
     width: var(--icon-width);
     height: var(--icon-width);
-    margin-bottom: 4px;
+    margin-bottom: 6px;
     border-radius: var(--border-radius-lg);
 }
 
@@ -88,13 +89,25 @@
         height: calc(32 * var(--px-in-rem));
         width: calc(32 * var(--px-in-rem));
     }
+
+    /*&[data-state="loading favicon-src"] {*/
+    /*    outline: 1px solid blue;*/
+    /*}*/
+
+    /*&[data-state="did load favicon-src"] {*/
+    /*    outline: 1px solid green;*/
+    /*}*/
+
+    /*&[data-state="did load fallback"] {*/
+    /*    outline: 1px dotted orange;*/
+    /*}*/
 }
 
 .text {
     width: var(--icon-width);
     text-align: center;
     font-size: calc(10 * var(--px-in-rem));
-    line-height: 1.1;
+    line-height: calc(13 * var(--px-in-rem));
     font-weight: 400;
     overflow: hidden;
     text-overflow: ellipsis;