From 68489edb51753fb4c105fe28420e2dfd18662358 Mon Sep 17 00:00:00 2001
From: Steffengreiner <steffen.greiner@qbic.uni-tuebingen.de>
Date: Mon, 2 Sep 2024 12:14:31 +0200
Subject: [PATCH] Experimental variables and groups are shown as cards with
 proper scrolling and size  (#815)

* Experimental Variables and Groups are shown in a dedicated css grid with proper scaling

* Update Zoom of application to be smaller
---
 .../themes/datamanager/components/card.css    | 40 +++++++++----------
 .../themes/datamanager/components/main.css    |  6 ++-
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/user-interface/frontend/themes/datamanager/components/card.css b/user-interface/frontend/themes/datamanager/components/card.css
index e99edfd35..adf65ffa6 100644
--- a/user-interface/frontend/themes/datamanager/components/card.css
+++ b/user-interface/frontend/themes/datamanager/components/card.css
@@ -48,22 +48,13 @@
   opacity: 0.05;
 }
 
-.experimental-group {
-  display: flex;
-  flex-direction: column;
-  flex: auto;
-  font-size: var(--lumo-font-size-s);
-  padding: var(--lumo-space-l);
-  max-width: 300px;
-}
-
 .card-collection {
   display: flex;
   align-content: space-evenly;
   flex-flow: column;
   gap: 1rem;
-  margin-left: 1.5rem;
-  margin-top: 1.5rem;
+  padding-left: 1.5rem;
+  padding-top: 1.5rem;
 }
 
 .card-collection .collection-title {
@@ -79,11 +70,10 @@
 }
 
 .card-collection .collection-content {
-  display: flex;
-  align-content: space-evenly;
-  flex-flow: row wrap;
-  gap: 1rem;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: auto;
+  grid-gap: 1rem;
 }
 
 .card-collection .collection-controls {
@@ -93,14 +83,21 @@
   gap: 0.5rem;
 }
 
-.experimental-group .header {
+.card-collection .experimental-group {
+  display: flex;
+  flex-direction: column;
+  font-size: var(--lumo-font-size-s);
+  padding: var(--lumo-space-l);
+}
+
+.card-collection .experimental-group .header {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   margin-bottom: var(--lumo-space-m);
 }
 
-.experimental-group .card-title {
+.card-collection.experimental-group .card-title {
   color: var(--lumo-secondary-text-color);
   font-size: var(--lumo-font-size-m);
   font-weight: bold;
@@ -108,14 +105,15 @@
   margin-bottom: 0.5rem;
 }
 
-.experimental-group .content {
-  display: inline-flex;
+.card-collection .experimental-group .content {
+  display: flex;
   flex-wrap: wrap;
   gap: var(--lumo-space-m);
   margin-bottom: var(--lumo-space-m);
+  flex-direction: column;
 }
 
-.experimental-group vaadin-icon {
+.card-collection .experimental-group vaadin-icon {
   cursor: pointer;
   width: 1em;
   color: darkgrey;
diff --git a/user-interface/frontend/themes/datamanager/components/main.css b/user-interface/frontend/themes/datamanager/components/main.css
index 959c673f3..fd796bd99 100644
--- a/user-interface/frontend/themes/datamanager/components/main.css
+++ b/user-interface/frontend/themes/datamanager/components/main.css
@@ -7,6 +7,8 @@
   grid-template-columns: 1fr;
   grid-template-rows: minmax(max-content, 95%) minmax(min-content, 5%);
   height: 100%;
+  /*Default design of components is too big for smaller screens*/
+  zoom: 90%;
   grid-template-areas:
     "content-area"
     "data-manager-footer";
@@ -71,8 +73,8 @@
 }
 
 .main.experiment {
-  grid-template-columns: minmax(max-content, 100%);
-  grid-template-rows: auto;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
   grid-template-areas:
     "experimentdetails";
 }