display cards in row, taking all width

kendraio · Oct 26, 2023 · 5bc7807 · 5bc7807
1 parent 75d6136
commit 5bc7807
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 2 deletions.
diff --git a/src/app/blocks/batch-block/batch-block.component.scss b/src/app/blocks/batch-block/batch-block.component.scss
@@ -0,0 +1,20 @@
+.batch-block-flex {
+    background-color: black;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px 20px;
+    overflow: hidden;
+}
+
+.multi-wrapper {
+  flex: 1;
+  overflow: hidden;
+  min-width: 250px;
+  max-width: 50%;
+
+  &:last-child {
+    flex-shrink: 0;
+  }
+}
diff --git a/src/app/blocks/batch-block/batch-block.component.ts b/src/app/blocks/batch-block/batch-block.component.ts
@@ -23,7 +23,8 @@ export class BatchBlockComponent implements OnInit, OnChanges {
   hasError = false;
   errorMessage = '';
 
-  @HostBinding('class.batch-block-flex') flex: false;
+  @HostBinding('class.batch-block-flex')
+  flex: boolean = false;
 
   constructor() { }
 

diff --git a/src/styles.scss b/src/styles.scss
@@ -104,9 +104,13 @@ app-workflow-cell-renderer app-actions-block.block-wrapper {
 }
 
 .batch-block-flex {
+  background-color: red;
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 10px 20px;
+  overflow: hidden;
 }
 
 .tag-list {

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -172,6 +172,12 @@ dynamic-material-form-control:not(:last-child) {
   //  box-shadow: 0;
   //  background-color: #f3f3f3;
   //}
+
+  img {
+    object-fit: contain;
+    width: 100%;
+    padding: 40px;
+  }
 }