From 656238a82ec88ea9cab6dfc92171fd9b92690655 Mon Sep 17 00:00:00 2001
From: sabrina-bongiovanni
 <116291154+sabrina-bongiovanni@users.noreply.github.com>
Date: Tue, 30 Jan 2024 16:24:58 +0100
Subject: [PATCH] fix: layout for LocationItem and VenuesSmall fixed for tablet
 (#505)

---
 RELEASE.md                                              | 1 +
 src/components/ItaliaTheme/View/Commons/VenuesSmall.jsx | 2 +-
 src/theme/ItaliaTheme/Components/_cardLocationItem.scss | 5 +++++
 src/theme/site.scss                                     | 1 +
 4 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 src/theme/ItaliaTheme/Components/_cardLocationItem.scss

diff --git a/RELEASE.md b/RELEASE.md
index e56a87832..b42fd3346 100644
--- a/RELEASE.md
+++ b/RELEASE.md
@@ -52,6 +52,7 @@
 - Sistemato il layout e la visualizzazione della vista del CT Cartella Modulistica per gestire al meglio gli elementi
   titolo, titolo del modulo e link al download in caso di testi lunghi, specialmente su mobile
 - Colore di sfondo per il blocco icone impostato sul colore primario. Sistemato il contrasto tra descrizione e lo sfondo
+- Layout delle card per i luoghi migliorato per dispositivi tablet
 - Risolto un problema di visualizzazione e allineamento delle immagini per le card dei blocchi elenco che rappresentano Persone,
   migliorata la visualizzazione e il layout su dispositivi tablet (intervallo dimensioni: 992px-1199px)
 
diff --git a/src/components/ItaliaTheme/View/Commons/VenuesSmall.jsx b/src/components/ItaliaTheme/View/Commons/VenuesSmall.jsx
index 79bf7b33d..a2f82034e 100644
--- a/src/components/ItaliaTheme/View/Commons/VenuesSmall.jsx
+++ b/src/components/ItaliaTheme/View/Commons/VenuesSmall.jsx
@@ -29,7 +29,7 @@ const Location = ({ location, show_icon }) => {
   const image = Image({ item: location, loading: 'lazy', sizes: '80px' });
   return (
     location && (
-      <div className="card card-teaser shadow border-left-card mt-3 rounded">
+      <div className="card card-teaser shadow border-left-card mt-3 rounded location-item">
         {show_icon && <Icon icon={'it-pin'} />}
         <div className="card-body">
           <div className="card-title h5">{location.title}</div>
diff --git a/src/theme/ItaliaTheme/Components/_cardLocationItem.scss b/src/theme/ItaliaTheme/Components/_cardLocationItem.scss
new file mode 100644
index 000000000..f8279a491
--- /dev/null
+++ b/src/theme/ItaliaTheme/Components/_cardLocationItem.scss
@@ -0,0 +1,5 @@
+@media (min-width: #{map-get($grid-breakpoints, lg)}) and (max-width: #{map-get($grid-breakpoints, xl)}) {
+  .card-wrapper.card-teaser-wrapper .card-teaser.location-item {
+    flex: 0 0 100%;
+  }
+}
diff --git a/src/theme/site.scss b/src/theme/site.scss
index 0dcf7462e..375b4c411 100644
--- a/src/theme/site.scss
+++ b/src/theme/site.scss
@@ -128,6 +128,7 @@
 @import 'ItaliaTheme/Components/breadcrumbs';
 @import 'ItaliaTheme/Components/card';
 @import 'ItaliaTheme/Components/cardPersona';
+@import 'ItaliaTheme/Components/cardLocationItem';
 @import 'ItaliaTheme/Components/contactsCard';
 @import 'ItaliaTheme/Components/navscroll';
 @import 'ItaliaTheme/Components/customerSatisfaction';