From 712119cb5e53d99361b186f9e6b5f20517dedcde Mon Sep 17 00:00:00 2001
From: Jason Kulatunga <jason@thesparktree.com>
Date: Sun, 25 Apr 2021 23:22:29 -0700
Subject: [PATCH] fixing ui when visible on small screen. tweak local contrib
 instructions. Fixing javascript mediaquery breakpoint for small screen.

---
 CONTRIBUTING.md                                               | 4 +++-
 webapp/frontend/src/@treo/tailwind/exported/variables.ts      | 2 +-
 .../src/app/modules/dashboard/dashboard.component.html        | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 3628466..294bc04 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -23,7 +23,9 @@ analogj/scrutiny
 The frontend is written in Angular.
 If you're working on the frontend and can use mocked data rather than a real backend, you can use
 ```
-cd webapp/frontend && ng serve
+cd webapp/frontend
+npm install
+ng serve
 ```
 
 However, if you need to also run the backend, and use real data, you'll need to run the following command:
diff --git a/webapp/frontend/src/@treo/tailwind/exported/variables.ts b/webapp/frontend/src/@treo/tailwind/exported/variables.ts
index 54b61d1..ac94dfd 100644
--- a/webapp/frontend/src/@treo/tailwind/exported/variables.ts
+++ b/webapp/frontend/src/@treo/tailwind/exported/variables.ts
@@ -1 +1 @@
-export const treoBreakpoints = {'xs': '(min-width:  0) and (max-width:  599px)', 'sm': '(min-width:  600px) and (max-width:  959px)', 'md': '(min-width:  960px) and (max-width:  1279px)', 'lg': '(min-width:  1280px) and (max-width:  1439px)', 'xl': '(min-width:  1440px)', 'lt-md': '(max-width:  959px)', 'lt-lg': '(max-width:  1279px)', 'lt-xl': '(max-width:  1439px)', 'gt-xs': '(min-width:  600px)', 'gt-sm': '(min-width:  960px)', 'gt-md': '(min-width:  1280px)'};
+export const treoBreakpoints = {'xs': '(min-width:  0) and (max-width:  599px)', 'sm': '(min-width:  600px) and (max-width:  959px)', 'md': '(min-width:  960px) and (max-width:  1279px)', 'lg': '(min-width:  1280px) and (max-width:  1439px)', 'xl': '(min-width:  1440px)', 'lt-md': '(max-width:  200px)', 'lt-lg': '(max-width:  1279px)', 'lt-xl': '(max-width:  1439px)', 'gt-xs': '(min-width:  600px)', 'gt-sm': '(min-width:  960px)', 'gt-md': '(min-width:  1280px)'};
diff --git a/webapp/frontend/src/app/modules/dashboard/dashboard.component.html b/webapp/frontend/src/app/modules/dashboard/dashboard.component.html
index e1d1ca1..82a723f 100644
--- a/webapp/frontend/src/app/modules/dashboard/dashboard.component.html
+++ b/webapp/frontend/src/app/modules/dashboard/dashboard.component.html
@@ -48,7 +48,7 @@
 
             <div class="flex flex-wrap w-full">
 
-                <div *ngFor="let disk of data.data | deviceSort" class="flex w-1/2 min-w-80 p-4">
+                <div *ngFor="let disk of data.data | deviceSort" class="flex gt-sm:w-1/2 min-w-80 p-4">
                     <div [ngClass]="{'border-green': disk.smart_results[0]?.smart_status == 'passed',
                                     'border-red': disk.smart_results[0]?.smart_status == 'failed' }"
                          class="relative flex flex-col flex-auto p-6 pr-3 pb-3 bg-card rounded border-l-4 shadow-md overflow-hidden">