Add mobile view for dashboard

app/assets/stylesheets/dashboard/calendar.scss

@@ -1,7 +1,10 @@
 // scss-lint:disable SelectorDepth
 // scss-lint:disable NestingDepth
 
+
+
 .dashboard-container .calendar-widget {
+  --calendar-day-size: 32px;
   grid-column: 10 / span 3;
   grid-row: 1 / span 6;
   min-height: 320px;
@@ -57,12 +60,12 @@
         animation-timing-function: $timing-function-sharp;
         border-radius: 50%;
         display: flex;
-        height: 32px;
+        height: var(--calendar-day-size);
         justify-content: center;
         position: relative;
         transition: .3s;
         user-select: none;
-        width: 32px;
+        width: var(--calendar-day-size);
 
         &.adjacent-month {
           color: $color-alto;
@@ -75,9 +78,9 @@
             border-radius: 50%;
             cursor: pointer;
             display: flex;
-            height: 30px;
+            height: calc(var(--calendar-day-size) - 2px);
             justify-content: center;
-            width: 30px;
+            width: calc(var(--calendar-day-size) - 2px);
 
             &:hover {
               background: $color-concrete;
@@ -91,9 +94,9 @@
             border-radius: 50%;
             content: "";
             height: 4px;
-            left: 14px;
+            left: calc((var(--calendar-day-size) / 2) - 2px);
             position: absolute;
-            top: 24px;
+            top: calc((var(--calendar-day-size) / 2) + 8px);
             width: 4px;
           }
         }
@@ -143,3 +146,11 @@
     }
   }
 }
+
+@media (max-width: 700px) {
+  .dashboard-container .calendar-widget {
+    --calendar-day-size: 28px;
+    grid-column: 1 / span 12;
+    grid-row: 2;
+  }
+}

app/assets/stylesheets/dashboard/current_tasks.scss

@@ -335,3 +335,59 @@
     }
   }
 }
+
+@media (max-width: 700px) {
+  .dashboard-container .current-tasks-widget {
+    --widget-header-size: 72px;
+    grid-row: 1;
+    min-height: 450px;
+
+    .widget-title {
+      flex-basis: 100%;
+      line-height: 36px;
+    }
+
+    .actions-container {
+      flex-grow: 0;
+      padding: 0;
+    }
+
+    .current-tasks-navbar {
+      flex-basis: 0;
+      flex-grow: 1;
+    }
+
+    .search-container {
+      margin-right: 5px;
+
+      .task-search-field {
+        width: 150px;
+
+        &:focus {
+          width: 150px;
+        }
+      }
+    }
+
+    .current-tasks-list {
+      .current-task-item {
+        .item-row {
+          flex-wrap: wrap;
+
+          .task-due-date {
+            @include font-small;
+
+            .fas {
+              display: none;
+            }
+          }
+
+          .task-progress-container {
+            flex-basis: 100%;
+            max-width: none;
+          }
+        }
+      }
+    }
+  }
+}

app/assets/stylesheets/dashboard/quick_start.scss

@@ -1,3 +1,6 @@
+// scss-lint:disable SelectorDepth
+// scss-lint:disable NestingDepth
+
 .dashboard-container .quick-start-widget {
   grid-column: 1 / span 2;
   grid-row: 7 / span 6;
@@ -34,3 +37,12 @@
     grid-row: 5 / span 4;
   }
 }
+
+@media (max-width: 700px) {
+  .dashboard-container .quick-start-widget {
+    --widget-header-size: 36px;
+    grid-column: 1 / span 12;
+    grid-row: 4;
+    min-height: 300px;
+  }
+}

app/assets/stylesheets/dashboard/recent_work.scss

@@ -83,3 +83,41 @@
     }
   }
 }
+
+@media (max-width: 700px) {
+  .dashboard-container .recent-work-widget {
+    --widget-header-size: 72px;
+    grid-row: 3;
+    min-height: 450px;
+
+    .widget-title {
+      flex-basis: 100%;
+      line-height: 36px;
+    }
+
+    .recent-work-container {
+      .recent-work-item {
+        flex-wrap: wrap;
+        margin: 5px 0;
+
+        .object-name {
+          flex-basis: 100%;
+          line-height: 18px;
+        }
+
+        .object-type {
+          flex-basis: 0;
+          flex-grow: 1;
+          line-height: 18px;
+        }
+
+        .object-changed {
+          flex-basis: 0;
+          flex-grow: 1;
+          line-height: 18px;
+          text-align: right;
+        }
+      }
+    }
+  }
+}

app/assets/stylesheets/dashboard/show.scss

@@ -1,6 +1,9 @@
+// scss-lint:disable SelectorDepth
+// scss-lint:disable NestingDepth
+
 .dashboard-container {
-  --widget-header-size: 44px;
   --dashboard-widgets-gap: 30px;
+  --widget-header-size: 44px;
   display: grid;
   grid-column-gap: var(--dashboard-widgets-gap);
   grid-row-gap: var(--dashboard-widgets-gap);
@@ -19,7 +22,6 @@
       align-items: center;
       border-bottom: $border-tertiary;
       display: flex;
-
       height: var(--widget-header-size);
       padding-left: 16px;
 
@@ -54,3 +56,18 @@
     --dashboard-widgets-gap: 16px;
   }
 }
+
+@media (max-width: 700px) {
+  .dashboard-container {
+    --widget-header-size: 72px;
+    grid-template-rows: auto;
+
+    .widget-header {
+      flex-wrap: wrap;
+
+      .sci-secondary-navbar {
+        height: 36px;
+      }
+    }
+  }
+}

app/assets/stylesheets/shared_styles/elements/navigation.scss

@@ -1,6 +1,7 @@
 .sci-secondary-navbar {
   display: flex;
   height: 100%;
+  overflow-x: auto;
 
   .navbar-link {
     @include font-small;
@@ -13,6 +14,7 @@
     position: relative;
     text-decoration: none;
     text-transform: uppercase;
+    white-space: nowrap;
 
     &:hover {
       color: $color-volcano;