From 21f04af1436b8cf9509e8cf74cdad5a20a846c1c Mon Sep 17 00:00:00 2001
From: Lidia Zuin <102308961+lidiazuin@users.noreply.github.com>
Date: Mon, 28 Oct 2024 11:16:02 +0100
Subject: [PATCH] Fixing page width overflow after bottom cards change (#276)

---
 preview-src/docs-hub.adoc | 12 ++++++------
 preview-src/docs-ndl.adoc |  2 +-
 src/css/docs-ndl.css      | 12 +++++++-----
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/preview-src/docs-hub.adoc b/preview-src/docs-hub.adoc
index 38b3ad36..7d07c22c 100644
--- a/preview-src/docs-hub.adoc
+++ b/preview-src/docs-hub.adoc
@@ -7,7 +7,7 @@
 // :page-disablefeedback: true
 :page-toclevels: -1
 
-[.display.cards.not-selectable]
+[.cards.not-selectable]
 == Developer tools documentation
 
 Use Neo4j tools to query and manage your databases, import data, and create graphical visualizations. 
@@ -15,7 +15,7 @@ Use Neo4j tools to query and manage your databases, import data, and create grap
 === Neo4j Bloom/Explore
 
 [.icon]
-image:icons/ndl/science-molecule.svg[]
+image:icons/ndl/icon-scientist.svg[]
 
 [.description]
 Visualize and explore graph data using natural language search and an intuitive and graphical interface.
@@ -27,7 +27,7 @@ link:{docs-home}/aura/preview/explore/introduction/[Explore (Aura)]
 === Neo4j Browser/Query
 
 [.icon]
-image:icons/ndl/data-science.svg[]
+image:icons/ndl/icon-scientist.svg[]
 
 [.description]
 Write and execute Cypher queries and visualize the results in nodes and relationships.
@@ -44,7 +44,7 @@ link:{docs-home}/aura/preview/query/introduction/[Query (Aura)]
 Neo4j Data Importer
 
 [.icon]
-image:icons/ndl/query-browser.svg[]
+image:icons/ndl/icon-scientist.svg[]
 
 [.description]
 Learn how to model and import data to your Neo4j database.
@@ -60,7 +60,7 @@ link:{docs-home}/data-importer[]
 Neo4j Desktop
 
 [.icon]
-image:icons/ndl/neo4j-tools.svg[]
+image:icons/ndl/icon-scientist.svg[]
 
 [.description]
 Learn how to experience Neo4j on your local desktop.
@@ -73,7 +73,7 @@ link:{docs-home}/desktop-manual[]
 === Neo4j Ops Manager
 
 [.icon]
-image:icons/ndl/query-browser.svg[]
+image:icons/ndl/icon-scientist.svg[]
 
 [.category]
 Neo4j Ops Manager
diff --git a/preview-src/docs-ndl.adoc b/preview-src/docs-ndl.adoc
index 86a1699b..3318844e 100644
--- a/preview-src/docs-ndl.adoc
+++ b/preview-src/docs-ndl.adoc
@@ -199,7 +199,7 @@ xref:tutorials:index.adoc[All tutorials]
 --
 
 
-[.cards.icon-s.align-center]
+[.cards.bottom-cards]
 == Other resources
 
 === Join forums and discussions
diff --git a/src/css/docs-ndl.css b/src/css/docs-ndl.css
index 7acd2c8f..88526834 100644
--- a/src/css/docs-ndl.css
+++ b/src/css/docs-ndl.css
@@ -588,6 +588,11 @@ body.docs-ndl .cards .sectionbody > div.sect2 {
   /* margin-right: 1rem; */
 }
 
+body.docs-ndl .cards.bottom-cards .sectionbody > div.sect2 {
+  flex: 0 1 49%;
+}
+  /* margin-right: 1rem; */
+
 body.docs-ndl.explainer .sectionbody > div.sect2 {
   flex: 0 1 49%;
 }
@@ -733,11 +738,6 @@ body.docs-ndl .widget.highlights:nth-of-type(even) .openblock {
   /* margin-right:40px; */
 }
 
-/* For the bottom cards */
-body.docs-ndl .cards:nth-last-child(-n+2) .sectionbody {
-  flex: 0 0 152%;
-}
-
 body.docs-ndl body.docs-ndl .cards .sect2 .icon img {
   width: 4rem;
   height: 4rem;
@@ -940,6 +940,7 @@ body.docs-ndl .cards .sect2 .ulist ul li {
     margin: 1rem auto;
   }
 
+  body.docs-ndl .bottom-cards .sect2 > a,
   body.docs-ndl .cards .sect2 > a {
     align-items: center;
   }
@@ -953,6 +954,7 @@ body.docs-ndl .cards .sect2 .ulist ul li {
     text-align: left;
   }
 
+  body.docs-ndl .cards.bottom-cards .sectionbody > div.sect2,
   body.docs-ndl .cards .sectionbody > div.sect2 {
     /* min-width: 90%; */
     flex: 1 1 100%;