Merge pull request #170 from AnalogJ/fixes_webui

fixing ui when visible on small screen.

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:

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)'};

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