Merge pull request #3159 from aignatov-bio/ai-sci-5249-update-dashboard-widget-size

Fix dashboard CSS [SCI-5249][SCI-5489]

app/assets/stylesheets/dashboard/calendar.scss

@@ -5,7 +5,6 @@
 
 .dashboard-container .calendar-widget {
   --calendar-day-size: 32px;
-  min-height: 320px;
 
   .dashboard-calendar {
     height: 100%;
@@ -40,9 +39,9 @@
       flex-basis: calc(100% - 42px);
       flex-grow: 1;
       grid-column-gap: 6px;
-      grid-row-gap: 6px;
+      grid-row-gap: 2px;
       grid-template-columns: repeat(7, 1fr);
-      grid-template-rows: repeat(7, 1fr);
+      grid-template-rows: repeat(auto-fit, minmax(1em, 1fr));
       justify-items: center;
       padding: 6px;
 

app/assets/stylesheets/dashboard/current_tasks.scss

@@ -62,6 +62,7 @@
   .filter-container {
     height: 36px;
     margin-right: 4px;
+    position: relative;
     width: 36px;
 
     .current-tasks-filters {

app/assets/stylesheets/dashboard/show.scss

@@ -12,19 +12,20 @@
 
 .dashboard-view {
   --dashboard-widgets-gap: 30px;
-  padding: calc(var(--dashboard-widgets-gap) / 2)
-           calc(var(--dashboard-widgets-gap) / 2)
+  padding: 15px
+           var(--dashboard-widgets-gap)
+           15px
            var(--dashboard-widgets-gap);
 }
 
 .dashboard-header {
-  padding-bottom: calc(var(--dashboard-widgets-gap) / 2);
+  padding-bottom: 15px;
 }
 
 .dashboard-container {
   --widget-header-size: 44px;
   display: grid;
-  grid-auto-rows: 28em;
+  grid-auto-rows: 26em;
   grid-column-gap: var(--dashboard-widgets-gap);
   grid-row-gap: var(--dashboard-widgets-gap);
   grid-template-columns: repeat(auto-fit, minmax(7em, 1fr));
@@ -101,6 +102,10 @@
   .dashboard-container {
     grid-auto-rows: 20em;
   }
+
+  .dashboard-view {
+    --dashboard-widgets-gap: 15px;
+  }
 }
 
 @media (min-height: 1080px) {
@@ -110,9 +115,6 @@
 }
 
 @media (max-width: 700px) {
-  .dashboard-view {
-    --dashboard-widgets-gap: 15px;
-  }
 
   .dashboard-container {
     --widget-header-size: 72px;

app/assets/stylesheets/shared/filter_dropdown.scss

@@ -102,7 +102,7 @@
       width: 460px;
     }
 
-    .footer {
+    .footer:not(.center) {
       .btn:last-child {
         margin-left: auto;
       }

app/views/dashboards/_current_tasks.html.erb

@@ -51,7 +51,7 @@
                     data-disable-placeholder="<%= t("dashboard.current_tasks.filter.select_experiment") %>"
                     data-placeholder="<%= t("dashboard.current_tasks.filter.select_experiment") %>"></select>
           </div>
-          <div class="footer">
+          <div class="footer center">
             <div class="btn btn-primary apply-filters"><%= t("dashboard.current_tasks.filter.apply") %></div>
           </div>
         </div>