From 2cb26cca455775cedd83600ebe41a1dd230b88e4 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Wed, 30 Oct 2024 15:28:06 +0100
Subject: [PATCH] fix(ui): ecogestures spacing
---
src/components/CommonKit/Card/StyledEcogestureCard.tsx | 1 -
.../Ecogesture/EcogestureList/ecogestureList.scss | 7 +++----
src/components/Ecogesture/ecogestureTabsView.scss | 3 +++
3 files changed, 6 insertions(+), 5 deletions(-)
diff --git a/src/components/CommonKit/Card/StyledEcogestureCard.tsx b/src/components/CommonKit/Card/StyledEcogestureCard.tsx
index 4fd51eb55..f6b3ac02c 100644
--- a/src/components/CommonKit/Card/StyledEcogestureCard.tsx
+++ b/src/components/CommonKit/Card/StyledEcogestureCard.tsx
@@ -9,7 +9,6 @@ const CardBase = withStyles({
root: {
background: 'var(--grey-1)',
boxSizing: 'border-box',
- boxShadow: '0px 4px 16px black',
borderRadius: '4px',
padding: '0.5rem 1rem',
minHeight: '72px',
diff --git a/src/components/Ecogesture/EcogestureList/ecogestureList.scss b/src/components/Ecogesture/EcogestureList/ecogestureList.scss
index 06b4b1edf..31285c9d0 100644
--- a/src/components/Ecogesture/EcogestureList/ecogestureList.scss
+++ b/src/components/Ecogesture/EcogestureList/ecogestureList.scss
@@ -11,7 +11,7 @@
padding: 1rem 1.5rem 2.5rem 1.5rem;
gap: 1rem;
.efficiency-button-content {
- max-width: 52rem;
+ max-width: 53rem;
width: 100%;
display: flex;
flex-direction: column;
@@ -66,9 +66,8 @@
height: 8rem;
animation: appear 600ms ease;
display: flex;
- flex: 1;
- flex-basis: 45%;
- max-width: 48%;
+ flex: 1 0 calc(50% - 2 * 5px); // two elements per row
+ max-width: calc(50% - 5px);
}
.ecogesture-list-item > button {
height: 100%;
diff --git a/src/components/Ecogesture/ecogestureTabsView.scss b/src/components/Ecogesture/ecogestureTabsView.scss
index 707f60150..d2b09dcae 100644
--- a/src/components/Ecogesture/ecogestureTabsView.scss
+++ b/src/components/Ecogesture/ecogestureTabsView.scss
@@ -16,6 +16,9 @@
padding-top: 16px;
display: flex;
justify-content: center;
+ width: 100%;
+ max-width: 53rem;
+ margin-inline: auto;
button {
height: auto;
}
--
GitLab