12383 fix KPIs max-width (#12419)

* Set indicator max width * Fixes to do the left arrangement Co-authored-by: Petrica Nanca <petrica.nanca@metasfresh.com>
metasfresh · Jan 27, 2022 · 3332cfd · 3332cfd
1 parent dd40304
commit 3332cfd
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/frontend/src/assets/css/indicator.css b/frontend/src/assets/css/indicator.css
@@ -4,6 +4,7 @@
 }
 
 .kpis-wrapper {
+    clear: both;
     height: auto;
     margin: -.5rem;
     display: flex;
@@ -38,6 +39,10 @@
     border-radius: 5px;
     box-shadow: 0 2px 7px 0 rgba(0,0,0,0.2);
     margin-right: 10px;
+    max-width: 380px;
+    min-width: 230px;
+    margin-bottom: 10px;
+    box-sizing: border-box;
 }
 
 .indicator-draggable {
@@ -54,6 +59,10 @@
     margin-top: -0.3rem;
 }
 
+.indicator-card {
+    max-width: 380px;
+}
+
 .indicator-amount {
     font-size: 2.2rem;
     font-weight: bold;
@@ -127,7 +136,7 @@
 @media screen and (max-width: 901px) {
     .indicator {
         border-right: 1px solid $brand-border-color;
-        width: calc(50% - 1rem);
+        width: calc(100% - 1rem);
         margin: .5rem;
         display: inline-block;
         text-align: center;

diff --git a/frontend/src/components/dashboard/DraggableWrapper.js b/frontend/src/components/dashboard/DraggableWrapper.js
@@ -268,6 +268,7 @@ export class DraggableWrapper extends Component {
             removeCard={this.removeCard}
             entity={'indicators'}
             transparent={!editmode}
+            className="indicator-card"
           >
             <RawChart
               id={indicator.id}