Experimental variables and groups are shown as cards with proper scro…

…lling and size (#815)

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

* Update Zoom of application to be smaller

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,29 +83,37 @@
   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;
   white-space: nowrap;
   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;

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";
 }