[epiphany] Most visited: fix layout when removing an item

[Michael Catanzaro <mcatanzaro src gnome org>]

commit 46206b33fdbd79a436721284c0879e0a1818c98d
Author: Tobias Bernard <tbernard gnome org>
Date:   Thu Jul 18 13:45:38 2019 +0200

    Most visited: fix layout when removing an item
    
    Because of the additional div I had to introduce to make vertical
    centering work nicely, the overview div is no longer a direct parent
    to the items themselves. This change takes the new structure into
    account when adding items to the grid.

 embed/ephy-about-handler.c                           | 2 +-
 embed/web-process-extension/resources/js/overview.js | 9 +++++----
 src/resources/about.css                              | 4 ++--
 3 files changed, 8 insertions(+), 7 deletions(-)
---
diff --git a/embed/ephy-about-handler.c b/embed/ephy-about-handler.c
index ad782a68a..1d010a789 100644
--- a/embed/ephy-about-handler.c
+++ b/embed/ephy-about-handler.c
@@ -398,7 +398,7 @@ history_service_query_urls_cb (EphyHistoryService     *history,
                    "<div id=\"overview\">\n");
 
   g_string_append (data_str,
-                   "<div class=\"most-visited-grid\">\n");
+                   "<div id=\"most-visited-grid\">\n");
 
   for (l = urls; l; l = g_list_next (l)) {
     EphyHistoryURL *url = (EphyHistoryURL *)l->data;
diff --git a/embed/web-process-extension/resources/js/overview.js 
b/embed/web-process-extension/resources/js/overview.js
index 5334de2ef..62fd1c61d 100644
--- a/embed/web-process-extension/resources/js/overview.js
+++ b/embed/web-process-extension/resources/js/overview.js
@@ -95,9 +95,10 @@ Ephy.Overview = class Overview
     _onURLsChanged(urls)
     {
         let overview = document.getElementById('overview');
+        let grid = document.getElementById('most-visited-grid');
         if (overview.classList.contains('overview-empty')) {
-            while (overview.lastChild)
-                overview.removeChild(overview.lastChild);
+            while (grid.lastChild)
+                grid.removeChild(grid.lastChild);
             overview.classList.remove('overview-empty');
         }
 
@@ -117,7 +118,7 @@ Ephy.Overview = class Overview
                     this._removeItem(anchor);
                     event.preventDefault();
                 };
-                closeButton.innerHTML = '&#10006;';
+                closeButton.innerHTML = '';
                 closeButton.classList.add('overview-close-button');
                 anchor.appendChild(closeButton);
                 let thumbnailSpan = document.createElement('span');
@@ -126,7 +127,7 @@ Ephy.Overview = class Overview
                 let titleSpan = document.createElement('span');
                 titleSpan.classList.add('overview-title');
                 anchor.appendChild(titleSpan);
-                document.getElementById('overview').appendChild(anchor);
+                document.getElementById('most-visited-grid').appendChild(anchor);
                 item = new Ephy.Overview.Item(anchor);
                 this._items.push(item);
             }
diff --git a/src/resources/about.css b/src/resources/about.css
index f801774ba..cb464b68d 100644
--- a/src/resources/about.css
+++ b/src/resources/about.css
@@ -234,7 +234,7 @@ html.epiphany-html {
     justify-content: center;
 }
 
-.most-visited-grid {
+#most-visited-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
     grid-gap: 9px;
@@ -242,7 +242,7 @@ html.epiphany-html {
 }
 
 @media (min-width: 500px) {
-    .most-visited-grid {
+    #most-visited-grid {
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         grid-gap: 18px;
         margin: 18px;