From 4a71a09b28dfc222547b2671d620a70ce29b3c4e Mon Sep 17 00:00:00 2001
From: Michel Gabriel <michel.gabriel@geocat.net>
Date: Wed, 25 Oct 2023 11:25:15 +0200
Subject: [PATCH] Rename `.grid` to `.gn-grid` to avoid conflicting classnames,
 and some additional styling so content doesn't break between columns.

---
 docs/manual/docs/index.fr.md                  |  2 +-
 docs/manual/docs/index.md                     |  2 +-
 .../overrides/assets/stylesheets/extra.css    | 21 ++++++++++---------
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/docs/manual/docs/index.fr.md b/docs/manual/docs/index.fr.md
index a491841fe52..82d06c56a6e 100644
--- a/docs/manual/docs/index.fr.md
+++ b/docs/manual/docs/index.fr.md
@@ -7,7 +7,7 @@ hide:
 
 Bienvenue à GeoNetwork. Cette documentation est organisée en guides spécifiques destinés à différents publics.
 
-<div class="grid cards" markdown>
+<div class="gn-grid cards" markdown>
 
 :fontawesome-solid-signs-post: [Vue d'ensemble](overview/index.md)
 
diff --git a/docs/manual/docs/index.md b/docs/manual/docs/index.md
index 5780bdfdb5e..b634f53ce16 100644
--- a/docs/manual/docs/index.md
+++ b/docs/manual/docs/index.md
@@ -7,7 +7,7 @@ hide:
 
 Welcome to GeoNetwork. This documentation is organized into specific guides targeting different audience. 
 
-<div class="grid cards" markdown>
+<div class="gn-grid cards" markdown>
 
 :fontawesome-solid-signs-post:   [Overview](overview/index.md)
 
diff --git a/docs/manual/overrides/assets/stylesheets/extra.css b/docs/manual/overrides/assets/stylesheets/extra.css
index 8155e94365e..6717012747c 100644
--- a/docs/manual/overrides/assets/stylesheets/extra.css
+++ b/docs/manual/overrides/assets/stylesheets/extra.css
@@ -10,43 +10,44 @@ img + em, .browser-border + em, .browser-mockup + em {
 }
 
 /* grid */
-.md-typeset .grid {
+.md-typeset .gn-grid {
   column-count: 2;
   column-gap: 2em;
   margin-bottom: 20px;
 }
-.md-typeset .grid dl {
+.md-typeset .gn-grid dl {
   display: grid;
   grid-template-columns: repeat(auto-fit,minmax(16rem,1fr));
   margin: 0;
 }
-.md-typeset .grid.cards dt, .md-typeset .grid.cards dd {
+.md-typeset .gn-grid.cards dt, .md-typeset .gn-grid.cards dd {
   border: 0.05rem solid var(--md-default-fg-color--lightest);
   border-radius: 0.1rem;
   display: block;
   margin: 0;
   padding: 0.8rem;
   transition: border .25s,box-shadow .25s;
+  break-inside: avoid;
 }
-.md-typeset .grid.cards dt {
+.md-typeset .gn-grid.cards dt {
   font-weight: bold;
+  margin-top: 0.5rem;
 }
-.md-typeset .grid.cards dt .twemoji {
+.md-typeset .gn-grid.cards dt .twemoji {
   margin-right: 5px;
 }
-.md-typeset .grid.cards dd {
-  margin-bottom: 0.8rem;
+.md-typeset .gn-grid.cards dd {
   margin-top: -1px;
 }
-.md-typeset .grid.cards dd p {
+.md-typeset .gn-grid.cards dd p {
   margin: 0;
 }
 @media (max-width: 768px) {
-  .md-typeset .grid dl {
+  .md-typeset .gn-grid dl {
     display: inline-block;
     margin-bottom: 20px;
   }
-  .md-typeset .grid.cards dt, .md-typeset .grid.cards dd {
+  .md-typeset .gn-grid.cards dt, .md-typeset .gn-grid.cards dd {
     width: calc(100vw - 1.2rem - 1.2rem);
   }
 }