feat(frontend): Improve mobile and tablet responsive layouts (#223)

Improved the mobile and tablet user experience with a more compact and usable layout.
Fixed - the output text container was appearing outside of viewport for certain screen sizes

UI/UX Changes for tablet and mobile viewports.
Original and default layout remains the same:
- CSS fix for overflow and displaying containers outside of viewport
- Set up responsive design with media queries
- Reordered buttons for better cohesion with cogstack color theme: Deidentify and Use Example buttons first, then Redact checkbox below
- Reduced padding and gaps throughout mobile layout for more compact design
- Fixed scrolling issues on viewports <1280px by properly constraining viewport-container height
- Reduced border sizes on mobile from 15px to 5px for cleaner appearance
- Reorganised mobile middle container for logo to be a watermark background

Bug fix
- Removed unused import that called defunct variable (deid_text) from views.py

Author: dcstang

anoncat-demo-app/app/anoncat/views.py

@@ -1,6 +1,5 @@
 from django.shortcuts import render
 from medcat.cat import CAT
-from medcat.utils.ner import deid_text
 from rest_framework.decorators import api_view
 from rest_framework.response import Response
 

anoncat-demo-app/app/frontend/src/App.vue

@@ -3,12 +3,12 @@
     <div class="title">
       <div class="cs-title">
         <img src="./assets/cs-logo.png" class="logo">
-        CogStack
+        <span class="cs-text">CogStack</span>
       </div>
       <div class="app-title">
-        Anon
+        <span class="anon-text">Anon</span>
         <img src="./assets/logo.png" class="logo">
-        AT
+        <span class="anon-text">AT</span>
       </div>
       <span class="help">
         <v-icon icon="mdi-help-circle-outline" @click="helpModal = true"></v-icon>
@@ -202,5 +202,87 @@ export default {
   }
 }
 
+/* Mobile header adjustments */
+@media (max-width: 767px) {
+  .wrapper {
+    height: 120px !important;
+  }
+
+  .title {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px;
+  }
+
+  .cs-title {
+    width: 100%;
+    text-align: center;
+    font-size: 24px;
+    margin-bottom: 5px;
+  }
+
+  .cs-title .logo {
+    height: 32px;
+  }
+
+  .app-title {
+    width: 100%;
+    padding: 0;
+    font-size: 36px;
+    text-align: center;
+  }
+
+  .app-title .logo {
+    height: 36px;
+  }
+
+  .help {
+    top: 10px;
+    right: 10px;
+    font-size: 20px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .wrapper {
+    height: 130px !important;
+  }
+
+  .title {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 15px 10px;
+  }
+
+  .cs-title {
+    width: 100%;
+    text-align: center;
+    font-size: 28px;
+    margin-bottom: 8px;
+  }
+
+  .cs-title .logo {
+    height: 40px;
+  }
+
+  .app-title {
+    width: 100%;
+    padding: 0;
+    font-size: 48px;
+    text-align: center;
+  }
+
+  .app-title .logo {
+    height: 48px;
+  }
+
+  .help {
+    top: 15px;
+    right: 15px;
+  }
+}
+
 
 </style>