From fdcd47908dd7bd1167569d27852182d97152e8ee Mon Sep 17 00:00:00 2001
From: David Tang <dcstang@gmail.com>
Date: Tue, 11 Nov 2025 22:32:17 +0000
Subject: [PATCH] feat(frontend): Improve mobile and tablet responsive layouts

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
---
 anoncat-demo-app/app/anoncat/views.py         |   1 -
 anoncat-demo-app/app/frontend/src/App.vue     |  88 ++++-
 .../app/frontend/src/views/HomeView.vue       | 363 +++++++++++++++++-
 3 files changed, 438 insertions(+), 14 deletions(-)

diff --git a/anoncat-demo-app/app/anoncat/views.py b/anoncat-demo-app/app/anoncat/views.py
index fa9ab9ca8..2fdd892ec 100644
--- a/anoncat-demo-app/app/anoncat/views.py
+++ b/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
 
diff --git a/anoncat-demo-app/app/frontend/src/App.vue b/anoncat-demo-app/app/frontend/src/App.vue
index dfc028115..87a7fc0cf 100644
--- a/anoncat-demo-app/app/frontend/src/App.vue
+++ b/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>
diff --git a/anoncat-demo-app/app/frontend/src/views/HomeView.vue b/anoncat-demo-app/app/frontend/src/views/HomeView.vue
index 9dfb95ecb..77a26ea2a 100644
--- a/anoncat-demo-app/app/frontend/src/views/HomeView.vue
+++ b/anoncat-demo-app/app/frontend/src/views/HomeView.vue
@@ -1,25 +1,25 @@
 <template>
   <v-container fluid class="viewport-container">
     <v-row no-gutters class="viewport">
-      <v-col class="col" cols="5">
+      <v-col class="col" cols="12" lg="4">
         <div class="col-container">
           <div class="border">
-            <v-textarea class="texts-height" rows="32" label="Input Text" variant="solo-filled" v-model="inputText" clearable>
+            <v-textarea class="texts-height" :rows="isDesktop ? 32 : 10" label="Input Text" variant="solo-filled" v-model="inputText" clearable>
             </v-textarea>
           </div>
         </div>
       </v-col>
-      <v-col class="col" col="2">
+      <v-col class="col" cols="12" lg="4">
         <div class="col-container centered">
-          <img src="../assets/logo.png" class="image-size" />
-          <div>
+          <img src="../assets/logo.png" class="image-size center-logo" />
+          <div class="button-group">
             <v-btn @click="deidentify" color="light-blue">Deidentify</v-btn>
             <v-checkbox class="redact-check" label="Redact" v-model="redact"></v-checkbox>
             <v-btn @click="fillExampleText" color="purple">Use Example</v-btn>
           </div>
         </div>
       </v-col>
-      <v-col class="col" cols="5">
+      <v-col class="col" cols="12" lg="4">
         <div class="col-container">
           <div class="border">
             <div class="output-text">
@@ -43,9 +43,16 @@ export default {
     return {
       inputText: '',
       redact: false,
-      outputText: ''
+      outputText: '',
+      isDesktop: window.innerWidth >= 1280
     }
   },
+  mounted() {
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+  },
   methods: {
     deidentify () {
       const payload = {text: this.inputText, redact: this.redact}
@@ -56,6 +63,9 @@ export default {
     },
     fillExampleText () {
       this.inputText = EXAMPLE_TEXT
+    },
+    handleResize() {
+      this.isDesktop = window.innerWidth >= 1280
     }
   }
 }
@@ -64,10 +74,13 @@ export default {
 <style scoped>
 .viewport-container {
   padding: 0 3px;
+  overflow-y: auto;
+  margin-top: 0;
 }
 
 .viewport {
-  height: calc(100vh - 75px);
+  height: calc(100vh - 95px);
+  padding-top: 10px;
 }
 
 .col {
@@ -80,12 +93,19 @@ export default {
 }
 
 .col-container {
-  border: 30px solid var(--vt-c-text-dark-2);
+  border: 10px solid var(--vt-c-text-dark-2);
   height: 100%;
 }
 
 .texts-height {
-  height: calc(100%);
+  height: 100%;
+}
+
+.texts-height :deep(.v-input__control),
+.texts-height :deep(.v-field),
+.texts-height :deep(.v-field__field),
+.texts-height :deep(textarea) {
+  height: 100%;
 }
 
 .centered {
@@ -114,4 +134,327 @@ export default {
   margin-left: 30px;
 }
 
+/* Responsive adjustments for mobile/tablet (stacked layout) */
+@media (max-width: 767px) {
+  .viewport-container {
+    padding-top: 10px;
+    height: calc(100vh - 120px);
+    overflow-y: auto;
+  }
+
+  .viewport {
+    height: auto;
+    min-height: 100%;
+    padding-top: 0;
+  }
+
+  .col {
+    height: auto;
+    min-height: auto;
+  }
+
+  .col-container {
+    height: auto;
+    min-height: auto;
+    border: 5px solid var(--vt-c-text-dark-2);
+    margin-bottom: 5px;
+  }
+
+  .border {
+    height: auto;
+  }
+
+  .texts-height {
+    height: auto;
+    min-height: auto;
+  }
+
+  .texts-height :deep(.v-input__control),
+  .texts-height :deep(.v-field),
+  .texts-height :deep(.v-field__field),
+  .texts-height :deep(textarea) {
+    height: auto;
+  }
+
+  .output-text {
+    min-height: 200px;
+    height: auto;
+  }
+
+  .centered {
+    padding: 8px;
+    min-height: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 6px;
+    position: relative;
+  }
+
+  .centered::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: url('../assets/logo.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 120px auto;
+    opacity: 0.1;
+    z-index: 0;
+  }
+
+  .centered .image-size {
+    display: none;
+  }
+
+  .centered > div {
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: 100%;
+    align-items: stretch;
+    position: relative;
+    z-index: 1;
+  }
+
+  .centered div {
+    padding: 0 !important;
+  }
+
+  .centered .button-group {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .centered .button-group > .v-btn {
+    width: 100%;
+  }
+
+  .centered .button-group > .v-btn:first-child {
+    order: 1;
+  }
+
+  .centered .button-group > .v-btn:last-child {
+    order: 2;
+  }
+
+  .centered .redact-check {
+    margin: 0;
+    order: 3;
+  }
+
+  .image-size {
+    width: 120px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .viewport-container {
+    padding-top: 10px;
+    height: calc(100vh - 130px);
+    overflow-y: auto;
+  }
+
+  .viewport {
+    height: auto;
+    min-height: 100%;
+    padding-top: 0;
+  }
+
+  .col {
+    height: auto;
+    min-height: auto;
+  }
+
+  .col-container {
+    height: auto;
+    min-height: auto;
+    border: 10px solid var(--vt-c-text-dark-2);
+    margin-bottom: 5px;
+  }
+
+  .border {
+    height: auto;
+    max-height: 400px;
+  }
+
+  .texts-height {
+    height: auto;
+    min-height: auto;
+    max-height: 400px;
+  }
+
+  .texts-height :deep(.v-input__control),
+  .texts-height :deep(.v-field),
+  .texts-height :deep(.v-field__field),
+  .texts-height :deep(textarea) {
+    height: auto;
+    max-height: 400px;
+  }
+
+  .output-text {
+    min-height: 200px;
+    height: auto;
+  }
+
+  .centered {
+    padding: 15px;
+    min-height: auto;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto;
+    gap: 10px;
+    align-items: center;
+  }
+
+  .centered div {
+    padding: 0 !important;
+  }
+
+  .centered .image-size {
+    grid-column: 1;
+    grid-row: 1 / 3;
+    width: 100px;
+    margin: 0;
+  }
+
+  .centered > div {
+    grid-column: 2 / 4;
+    grid-row: 1 / 3;
+    padding: 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto;
+    gap: 10px;
+    align-items: center;
+  }
+
+  .centered .button-group > .v-btn:first-child {
+    grid-column: 1;
+    grid-row: 1;
+    max-width: 200px;
+  }
+
+  .centered .button-group > .v-btn:last-child {
+    grid-column: 2;
+    grid-row: 1;
+    max-width: 200px;
+  }
+
+  .centered .redact-check {
+    grid-column: 1 / 3;
+    grid-row: 2;
+    margin: 0;
+    justify-self: start;
+  }
+
+  .image-size {
+    width: 120px;
+  }
+}
+
+@media (min-width: 1024px) and (max-width: 1279px) {
+  .viewport-container {
+    padding-top: 10px;
+    height: calc(100vh - 95px);
+    overflow-y: auto;
+  }
+
+  .viewport {
+    height: auto;
+    min-height: 100%;
+    padding-top: 0;
+  }
+
+  .col {
+    height: auto;
+    min-height: auto;
+  }
+
+  .col-container {
+    height: auto;
+    border: 10px solid var(--vt-c-text-dark-2);
+    margin-bottom: 5px;
+  }
+
+  .border {
+    height: auto;
+    max-height: 400px;
+  }
+
+  .texts-height {
+    height: auto;
+    min-height: auto;
+    max-height: 400px;
+  }
+
+  .texts-height :deep(.v-input__control),
+  .texts-height :deep(.v-field),
+  .texts-height :deep(.v-field__field),
+  .texts-height :deep(textarea) {
+    height: auto;
+    max-height: 400px;
+  }
+
+  .output-text {
+    min-height: 200px;
+    height: auto;
+    max-height: 400px;
+  }
+
+  .centered {
+    padding: 15px;
+    min-height: auto;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto;
+    gap: 10px;
+    align-items: center;
+  }
+
+  .centered .image-size {
+    grid-column: 1;
+    grid-row: 1 / 3;
+    width: 120px;
+    margin: 0;
+  }
+
+  .centered > div {
+    grid-column: 2 / 4;
+    grid-row: 1 / 3;
+    padding: 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto;
+    gap: 10px;
+    align-items: center;
+  }
+
+  .centered .button-group > .v-btn:first-child {
+    grid-column: 1;
+    grid-row: 1;
+    max-width: 200px;
+  }
+
+  .centered .button-group > .v-btn:last-child {
+    grid-column: 2;
+    grid-row: 1;
+    max-width: 200px;
+  }
+
+  .centered .redact-check {
+    grid-column: 1 / 3;
+    grid-row: 2;
+    margin: 0;
+    justify-self: start;
+  }
+}
+
 </style>
\ No newline at end of file