From c6a34a9ff8501fdb5a5680c4076a02be5857ae09 Mon Sep 17 00:00:00 2001
From: MSDrao <msandesh0055@gmail.com>
Date: Mon, 9 Feb 2026 21:45:39 -0600
Subject: [PATCH 1/3] Responsive Design implemented

---
 frontend/src/components/DataQuality.vue    | 24 +++++++-
 frontend/src/components/DataViewDrawer.vue | 12 ++--
 frontend/src/components/LineChart.vue      | 13 ++++-
 frontend/src/components/NodeChart.vue      | 13 ++++-
 frontend/src/components/PlotActions.vue    | 65 +++++++++++++++-------
 frontend/src/views/DistanceCharts.vue      |  4 +-
 frontend/src/views/TimeSeriesCharts.vue    |  4 +-
 7 files changed, 100 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/DataQuality.vue b/frontend/src/components/DataQuality.vue
index 9b0ed3b..fe662b1 100644
--- a/frontend/src/components/DataQuality.vue
+++ b/frontend/src/components/DataQuality.vue
@@ -4,7 +4,7 @@
       <v-expansion-panel-title>Data Quality</v-expansion-panel-title>
       <v-expansion-panel-text>
         <!-- create list of dataQuality options -->
-        <v-list density="compact" slim>
+        <v-list class="data-quality-list" density="compact" slim>
           <v-list-item
             v-for="item in chartStore.dataQualityOptions"
             :key="item.value"
@@ -16,6 +16,7 @@
                 v-model="dataQualityFlags"
                 :label="item.label"
                 :value="item.value"
+                class="data-quality-checkbox"
                 @update:model-value="qualityHasChanged()"
               >
                 <template #append>
@@ -53,3 +54,24 @@ function qualityHasChanged() {
   statsStore.toggleSeriesStatistics(showStatistics.value)
 }
 </script>
+
+<style scoped>
+.data-quality-checkbox {
+  width: 100%;
+}
+
+.data-quality-checkbox :deep(.v-label) {
+  white-space: nowrap;
+  line-height: 1;
+  font-size: 0.9rem;
+}
+
+.data-quality-list :deep(.v-list-item) {
+  padding-inline: 0;
+  min-height: 28px;
+}
+
+.data-quality-list :deep(.v-list-item__content) {
+  padding-block: 2px;
+}
+</style>
diff --git a/frontend/src/components/DataViewDrawer.vue b/frontend/src/components/DataViewDrawer.vue
index 98591ed..a6f8e72 100644
--- a/frontend/src/components/DataViewDrawer.vue
+++ b/frontend/src/components/DataViewDrawer.vue
@@ -3,15 +3,15 @@
     v-if="featureStore.activeFeature"
     v-model="show"
     location="right"
-    width="auto"
+    :width="drawerWidth"
+    :temporary="isMobile"
     order="1"
   >
     <v-container v-if="featureStore.activeFeature">
       <v-btn
-        v-if="featureStore.activeFeature"
+        v-if="featureStore.activeFeature && !isMobile"
         location="left"
         order="0"
-        postition="absolute"
         :style="{ bottom: '30%', transform: translate(), position: 'absolute' }"
         :icon="show ? mdiChevronRight : mdiChevronLeft"
         @click="show = !show"
@@ -31,15 +31,19 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useFeaturesStore } from '@/stores/features'
 import { mdiChevronRight, mdiChevronLeft, mdiChartScatterPlot } from '@mdi/js'
 import StaticMetadata from './StaticMetadata.vue'
 import { useRouter } from 'vue-router'
+import { useDisplay } from 'vuetify'
 
 const featureStore = useFeaturesStore()
 
 let show = ref(false)
+const display = useDisplay()
+const isMobile = computed(() => display.smAndDown.value)
+const drawerWidth = computed(() => (isMobile.value ? '100%' : 420))
 
 const translate = () => {
   if (show.value) {
diff --git a/frontend/src/components/LineChart.vue b/frontend/src/components/LineChart.vue
index 6c83855..36963a0 100644
--- a/frontend/src/components/LineChart.vue
+++ b/frontend/src/components/LineChart.vue
@@ -1,10 +1,11 @@
 <template>
   <v-container class="overflow-auto">
     <v-sheet
+      class="chart-sheet"
       :min-height="lgAndUp ? '65vh' : '50vh'"
-      :max-height="lgAndUp ? '100%' : '20vh'"
+      :max-height="lgAndUp ? '100%' : '75vh'"
+      :min-width="smAndDown ? '100%' : '500px'"
       max-width="100%"
-      min-width="500px"
     >
       <!-- Add Reset Zoom Icon -->
       <v-tooltip>
@@ -76,7 +77,7 @@ import { mdiChartBellCurveCumulative, mdiCloseBox, mdiMagnifyMinusOutline } from
 import { convertDateStringToSeconds } from '@/_helpers/time'
 import { useStatsStore } from '../stores/stats'
 
-const { lgAndUp } = useDisplay()
+const { lgAndUp, smAndDown } = useDisplay()
 const panel = ref(['plotActions'])
 
 const hasSelectedTimeseriesPoints = computed(() => selectedTimeseriesPoints.value.length > 0)
@@ -319,3 +320,9 @@ const removeSelectedTimeseriesPoint = (timeSeriesPoint, ref = false) => {
   }
 }
 </script>
+
+<style scoped>
+.chart-sheet {
+  width: 100%;
+}
+</style>
diff --git a/frontend/src/components/NodeChart.vue b/frontend/src/components/NodeChart.vue
index d0684e1..a4a7799 100644
--- a/frontend/src/components/NodeChart.vue
+++ b/frontend/src/components/NodeChart.vue
@@ -1,10 +1,11 @@
 <template>
   <v-container class="overflow-auto">
     <v-sheet
+      class="chart-sheet"
       :min-height="lgAndUp ? '65vh' : '50vh'"
-      :max-height="lgAndUp ? '100%' : '20vh'"
+      :max-height="lgAndUp ? '100%' : '75vh'"
+      :min-width="smAndDown ? '100%' : '500px'"
       max-width="100%"
-      min-width="500px"
     >
       <!-- Add Reset Zoom Icon -->
       <v-tooltip>
@@ -36,7 +37,7 @@ import { useChartsStore } from '@/stores/charts'
 import { storeToRefs } from 'pinia'
 import { mdiMagnifyMinusOutline } from '@mdi/js'
 
-const { lgAndUp } = useDisplay()
+const { lgAndUp, smAndDown } = useDisplay()
 
 const chartStore = useChartsStore()
 
@@ -178,3 +179,9 @@ const options = {
   }
 }
 </script>
+
+<style scoped>
+.chart-sheet {
+  width: 100%;
+}
+</style>
diff --git a/frontend/src/components/PlotActions.vue b/frontend/src/components/PlotActions.vue
index 1a8b435..ff59c48 100644
--- a/frontend/src/components/PlotActions.vue
+++ b/frontend/src/components/PlotActions.vue
@@ -3,26 +3,33 @@
     <v-expansion-panel value="plotActions">
       <v-expansion-panel-title>Actions</v-expansion-panel-title>
       <v-expansion-panel-text>
-        <v-btn :loading="downloading.chart" class="ma-1" color="input" @click="downloadChart()">
-          <v-icon :icon="mdiDownloadBox" />
-          Download Chart
-        </v-btn>
-        <v-btn :loading="downloading.csv" class="ma-1" color="input" @click="downCsv()">
-          <v-icon :icon="mdiFileDelimited" />
-          Download CSV
-        </v-btn>
-        <v-btn :loading="downloading.json" class="ma-1" color="input" @click="downJson()">
-          <v-icon :icon="mdiCodeJson" />
-          Download JSON
-        </v-btn>
-        <v-btn color="input" class="ma-1" @click="resetZoom()">
-          <v-icon :icon="mdiMagnifyMinusOutline" />
-          Reset Zoom
-        </v-btn>
-        <v-btn v-if="isNodeChart" color="input" class="ma-1" @click="resetData()">
-          <v-icon :icon="mdiEraser" />
-          Reset Data
-        </v-btn>
+        <div class="actions-wrap">
+          <v-btn
+            :loading="downloading.chart"
+            class="action-btn"
+            color="input"
+            @click="downloadChart()"
+          >
+            <v-icon :icon="mdiDownloadBox" />
+            Download Chart
+          </v-btn>
+          <v-btn :loading="downloading.csv" class="action-btn" color="input" @click="downCsv()">
+            <v-icon :icon="mdiFileDelimited" />
+            Download CSV
+          </v-btn>
+          <v-btn :loading="downloading.json" class="action-btn" color="input" @click="downJson()">
+            <v-icon :icon="mdiCodeJson" />
+            Download JSON
+          </v-btn>
+          <v-btn class="action-btn" color="input" @click="resetZoom()">
+            <v-icon :icon="mdiMagnifyMinusOutline" />
+            Reset Zoom
+          </v-btn>
+          <v-btn v-if="isNodeChart" class="action-btn" color="input" @click="resetData()">
+            <v-icon :icon="mdiEraser" />
+            Reset Data
+          </v-btn>
+        </div>
       </v-expansion-panel-text>
     </v-expansion-panel>
   </v-expansion-panels>
@@ -175,3 +182,21 @@ const resetData = () => {
   // props.chosenPlot.chart.update()
 }
 </script>
+
+<style scoped>
+.actions-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.action-btn {
+  width: 100%;
+  justify-content: flex-start;
+}
+
+.action-btn :deep(.v-btn__content) {
+  white-space: normal;
+  gap: 6px;
+}
+</style>
diff --git a/frontend/src/views/DistanceCharts.vue b/frontend/src/views/DistanceCharts.vue
index d851664..d26b684 100644
--- a/frontend/src/views/DistanceCharts.vue
+++ b/frontend/src/views/DistanceCharts.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container v-if="chartStore.hasNodeData" fluid fill-height>
     <v-row>
-      <v-col sm="2">
+      <v-col :cols="12" :lg="3" :xl="3">
         <v-sheet class="elevation-1" color="input">
           <v-card-title> Variables </v-card-title>
           <v-tabs v-model="activePlt" direction="vertical" color="primary">
@@ -27,7 +27,7 @@
         <PlotActions :chosen-plot="activeNodeChart" @reset-data="resetData" />
       </v-col>
       <v-divider v-if="lgAndUp" class="my-2" vertical />
-      <v-col sm="10">
+      <v-col :cols="12" :lg="9" :xl="9">
         <v-window v-model="activePlt">
           <v-window-item v-for="plt in chartStore.nodeCharts" :key="plt.abbreviation" :value="plt">
             <NodeChart
diff --git a/frontend/src/views/TimeSeriesCharts.vue b/frontend/src/views/TimeSeriesCharts.vue
index 50be20f..7dc1c61 100644
--- a/frontend/src/views/TimeSeriesCharts.vue
+++ b/frontend/src/views/TimeSeriesCharts.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container v-if="hasData" fluid fill-height>
     <v-row>
-      <v-col sm="2">
+      <v-col :cols="12" :lg="3" :xl="3">
         <v-card class="elevation-1" color="input">
           <v-card-title> Variables </v-card-title>
           <v-tabs v-model="activePlt" direction="vertical" color="primary">
@@ -27,7 +27,7 @@
         <PlotActions :chosen-plot="activeReachChart" />
       </v-col>
       <v-divider v-if="lgAndUp" class="my-2" vertical />
-      <v-col sm="10">
+      <v-col :cols="12" :lg="9" :xl="9">
         <v-window v-model="activePlt">
           <v-window-item v-for="plt in timeSeriesCharts" :key="plt.abbreviation" :value="plt">
             <LineChart v-if="plt" class="chart" :data="chartStore.chartData" :chosen-plot="plt" />

From eec15043587140513f3240f681b50dfa11740574 Mon Sep 17 00:00:00 2001
From: MSDrao <msandesh0055@gmail.com>
Date: Thu, 19 Feb 2026 13:03:37 -0600
Subject: [PATCH 2/3] Revert "Responsive Design implemented"

This reverts commit c6a34a9ff8501fdb5a5680c4076a02be5857ae09.
---
 frontend/src/components/DataQuality.vue    | 24 +-------
 frontend/src/components/DataViewDrawer.vue | 12 ++--
 frontend/src/components/LineChart.vue      | 13 +----
 frontend/src/components/NodeChart.vue      | 13 +----
 frontend/src/components/PlotActions.vue    | 65 +++++++---------------
 frontend/src/views/DistanceCharts.vue      |  4 +-
 frontend/src/views/TimeSeriesCharts.vue    |  4 +-
 7 files changed, 35 insertions(+), 100 deletions(-)

diff --git a/frontend/src/components/DataQuality.vue b/frontend/src/components/DataQuality.vue
index fe662b1..9b0ed3b 100644
--- a/frontend/src/components/DataQuality.vue
+++ b/frontend/src/components/DataQuality.vue
@@ -4,7 +4,7 @@
       <v-expansion-panel-title>Data Quality</v-expansion-panel-title>
       <v-expansion-panel-text>
         <!-- create list of dataQuality options -->
-        <v-list class="data-quality-list" density="compact" slim>
+        <v-list density="compact" slim>
           <v-list-item
             v-for="item in chartStore.dataQualityOptions"
             :key="item.value"
@@ -16,7 +16,6 @@
                 v-model="dataQualityFlags"
                 :label="item.label"
                 :value="item.value"
-                class="data-quality-checkbox"
                 @update:model-value="qualityHasChanged()"
               >
                 <template #append>
@@ -54,24 +53,3 @@ function qualityHasChanged() {
   statsStore.toggleSeriesStatistics(showStatistics.value)
 }
 </script>
-
-<style scoped>
-.data-quality-checkbox {
-  width: 100%;
-}
-
-.data-quality-checkbox :deep(.v-label) {
-  white-space: nowrap;
-  line-height: 1;
-  font-size: 0.9rem;
-}
-
-.data-quality-list :deep(.v-list-item) {
-  padding-inline: 0;
-  min-height: 28px;
-}
-
-.data-quality-list :deep(.v-list-item__content) {
-  padding-block: 2px;
-}
-</style>
diff --git a/frontend/src/components/DataViewDrawer.vue b/frontend/src/components/DataViewDrawer.vue
index a6f8e72..98591ed 100644
--- a/frontend/src/components/DataViewDrawer.vue
+++ b/frontend/src/components/DataViewDrawer.vue
@@ -3,15 +3,15 @@
     v-if="featureStore.activeFeature"
     v-model="show"
     location="right"
-    :width="drawerWidth"
-    :temporary="isMobile"
+    width="auto"
     order="1"
   >
     <v-container v-if="featureStore.activeFeature">
       <v-btn
-        v-if="featureStore.activeFeature && !isMobile"
+        v-if="featureStore.activeFeature"
         location="left"
         order="0"
+        postition="absolute"
         :style="{ bottom: '30%', transform: translate(), position: 'absolute' }"
         :icon="show ? mdiChevronRight : mdiChevronLeft"
         @click="show = !show"
@@ -31,19 +31,15 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { useFeaturesStore } from '@/stores/features'
 import { mdiChevronRight, mdiChevronLeft, mdiChartScatterPlot } from '@mdi/js'
 import StaticMetadata from './StaticMetadata.vue'
 import { useRouter } from 'vue-router'
-import { useDisplay } from 'vuetify'
 
 const featureStore = useFeaturesStore()
 
 let show = ref(false)
-const display = useDisplay()
-const isMobile = computed(() => display.smAndDown.value)
-const drawerWidth = computed(() => (isMobile.value ? '100%' : 420))
 
 const translate = () => {
   if (show.value) {
diff --git a/frontend/src/components/LineChart.vue b/frontend/src/components/LineChart.vue
index 36963a0..6c83855 100644
--- a/frontend/src/components/LineChart.vue
+++ b/frontend/src/components/LineChart.vue
@@ -1,11 +1,10 @@
 <template>
   <v-container class="overflow-auto">
     <v-sheet
-      class="chart-sheet"
       :min-height="lgAndUp ? '65vh' : '50vh'"
-      :max-height="lgAndUp ? '100%' : '75vh'"
-      :min-width="smAndDown ? '100%' : '500px'"
+      :max-height="lgAndUp ? '100%' : '20vh'"
       max-width="100%"
+      min-width="500px"
     >
       <!-- Add Reset Zoom Icon -->
       <v-tooltip>
@@ -77,7 +76,7 @@ import { mdiChartBellCurveCumulative, mdiCloseBox, mdiMagnifyMinusOutline } from
 import { convertDateStringToSeconds } from '@/_helpers/time'
 import { useStatsStore } from '../stores/stats'
 
-const { lgAndUp, smAndDown } = useDisplay()
+const { lgAndUp } = useDisplay()
 const panel = ref(['plotActions'])
 
 const hasSelectedTimeseriesPoints = computed(() => selectedTimeseriesPoints.value.length > 0)
@@ -320,9 +319,3 @@ const removeSelectedTimeseriesPoint = (timeSeriesPoint, ref = false) => {
   }
 }
 </script>
-
-<style scoped>
-.chart-sheet {
-  width: 100%;
-}
-</style>
diff --git a/frontend/src/components/NodeChart.vue b/frontend/src/components/NodeChart.vue
index a4a7799..d0684e1 100644
--- a/frontend/src/components/NodeChart.vue
+++ b/frontend/src/components/NodeChart.vue
@@ -1,11 +1,10 @@
 <template>
   <v-container class="overflow-auto">
     <v-sheet
-      class="chart-sheet"
       :min-height="lgAndUp ? '65vh' : '50vh'"
-      :max-height="lgAndUp ? '100%' : '75vh'"
-      :min-width="smAndDown ? '100%' : '500px'"
+      :max-height="lgAndUp ? '100%' : '20vh'"
       max-width="100%"
+      min-width="500px"
     >
       <!-- Add Reset Zoom Icon -->
       <v-tooltip>
@@ -37,7 +36,7 @@ import { useChartsStore } from '@/stores/charts'
 import { storeToRefs } from 'pinia'
 import { mdiMagnifyMinusOutline } from '@mdi/js'
 
-const { lgAndUp, smAndDown } = useDisplay()
+const { lgAndUp } = useDisplay()
 
 const chartStore = useChartsStore()
 
@@ -179,9 +178,3 @@ const options = {
   }
 }
 </script>
-
-<style scoped>
-.chart-sheet {
-  width: 100%;
-}
-</style>
diff --git a/frontend/src/components/PlotActions.vue b/frontend/src/components/PlotActions.vue
index ff59c48..1a8b435 100644
--- a/frontend/src/components/PlotActions.vue
+++ b/frontend/src/components/PlotActions.vue
@@ -3,33 +3,26 @@
     <v-expansion-panel value="plotActions">
       <v-expansion-panel-title>Actions</v-expansion-panel-title>
       <v-expansion-panel-text>
-        <div class="actions-wrap">
-          <v-btn
-            :loading="downloading.chart"
-            class="action-btn"
-            color="input"
-            @click="downloadChart()"
-          >
-            <v-icon :icon="mdiDownloadBox" />
-            Download Chart
-          </v-btn>
-          <v-btn :loading="downloading.csv" class="action-btn" color="input" @click="downCsv()">
-            <v-icon :icon="mdiFileDelimited" />
-            Download CSV
-          </v-btn>
-          <v-btn :loading="downloading.json" class="action-btn" color="input" @click="downJson()">
-            <v-icon :icon="mdiCodeJson" />
-            Download JSON
-          </v-btn>
-          <v-btn class="action-btn" color="input" @click="resetZoom()">
-            <v-icon :icon="mdiMagnifyMinusOutline" />
-            Reset Zoom
-          </v-btn>
-          <v-btn v-if="isNodeChart" class="action-btn" color="input" @click="resetData()">
-            <v-icon :icon="mdiEraser" />
-            Reset Data
-          </v-btn>
-        </div>
+        <v-btn :loading="downloading.chart" class="ma-1" color="input" @click="downloadChart()">
+          <v-icon :icon="mdiDownloadBox" />
+          Download Chart
+        </v-btn>
+        <v-btn :loading="downloading.csv" class="ma-1" color="input" @click="downCsv()">
+          <v-icon :icon="mdiFileDelimited" />
+          Download CSV
+        </v-btn>
+        <v-btn :loading="downloading.json" class="ma-1" color="input" @click="downJson()">
+          <v-icon :icon="mdiCodeJson" />
+          Download JSON
+        </v-btn>
+        <v-btn color="input" class="ma-1" @click="resetZoom()">
+          <v-icon :icon="mdiMagnifyMinusOutline" />
+          Reset Zoom
+        </v-btn>
+        <v-btn v-if="isNodeChart" color="input" class="ma-1" @click="resetData()">
+          <v-icon :icon="mdiEraser" />
+          Reset Data
+        </v-btn>
       </v-expansion-panel-text>
     </v-expansion-panel>
   </v-expansion-panels>
@@ -182,21 +175,3 @@ const resetData = () => {
   // props.chosenPlot.chart.update()
 }
 </script>
-
-<style scoped>
-.actions-wrap {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.action-btn {
-  width: 100%;
-  justify-content: flex-start;
-}
-
-.action-btn :deep(.v-btn__content) {
-  white-space: normal;
-  gap: 6px;
-}
-</style>
diff --git a/frontend/src/views/DistanceCharts.vue b/frontend/src/views/DistanceCharts.vue
index d26b684..d851664 100644
--- a/frontend/src/views/DistanceCharts.vue
+++ b/frontend/src/views/DistanceCharts.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container v-if="chartStore.hasNodeData" fluid fill-height>
     <v-row>
-      <v-col :cols="12" :lg="3" :xl="3">
+      <v-col sm="2">
         <v-sheet class="elevation-1" color="input">
           <v-card-title> Variables </v-card-title>
           <v-tabs v-model="activePlt" direction="vertical" color="primary">
@@ -27,7 +27,7 @@
         <PlotActions :chosen-plot="activeNodeChart" @reset-data="resetData" />
       </v-col>
       <v-divider v-if="lgAndUp" class="my-2" vertical />
-      <v-col :cols="12" :lg="9" :xl="9">
+      <v-col sm="10">
         <v-window v-model="activePlt">
           <v-window-item v-for="plt in chartStore.nodeCharts" :key="plt.abbreviation" :value="plt">
             <NodeChart
diff --git a/frontend/src/views/TimeSeriesCharts.vue b/frontend/src/views/TimeSeriesCharts.vue
index 7dc1c61..50be20f 100644
--- a/frontend/src/views/TimeSeriesCharts.vue
+++ b/frontend/src/views/TimeSeriesCharts.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container v-if="hasData" fluid fill-height>
     <v-row>
-      <v-col :cols="12" :lg="3" :xl="3">
+      <v-col sm="2">
         <v-card class="elevation-1" color="input">
           <v-card-title> Variables </v-card-title>
           <v-tabs v-model="activePlt" direction="vertical" color="primary">
@@ -27,7 +27,7 @@
         <PlotActions :chosen-plot="activeReachChart" />
       </v-col>
       <v-divider v-if="lgAndUp" class="my-2" vertical />
-      <v-col :cols="12" :lg="9" :xl="9">
+      <v-col sm="10">
         <v-window v-model="activePlt">
           <v-window-item v-for="plt in timeSeriesCharts" :key="plt.abbreviation" :value="plt">
             <LineChart v-if="plt" class="chart" :data="chartStore.chartData" :chosen-plot="plt" />

From 81e2709a794908a25a6f359998f43157eddcf9b8 Mon Sep 17 00:00:00 2001
From: MSDrao <msandesh0055@gmail.com>
Date: Thu, 19 Feb 2026 13:24:05 -0600
Subject: [PATCH 3/3] overlay style layout

---
 frontend/src/views/DistanceCharts.vue   | 108 +++++++++++++++++++++++-
 frontend/src/views/TimeSeriesCharts.vue | 108 +++++++++++++++++++++++-
 2 files changed, 210 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/DistanceCharts.vue b/frontend/src/views/DistanceCharts.vue
index d851664..cd0ee6b 100644
--- a/frontend/src/views/DistanceCharts.vue
+++ b/frontend/src/views/DistanceCharts.vue
@@ -1,7 +1,8 @@
 <template>
   <v-container v-if="chartStore.hasNodeData" fluid fill-height>
     <v-row>
-      <v-col sm="2">
+      <!-- Left panel visible on large screens -->
+      <v-col v-if="lgAndUp" :cols="12" :lg="3" :xl="3">
         <v-sheet class="elevation-1" color="input">
           <v-card-title> Variables </v-card-title>
           <v-tabs v-model="activePlt" direction="vertical" color="primary">
@@ -26,8 +27,64 @@
         <v-divider v-if="lgAndUp" class="my-2" />
         <PlotActions :chosen-plot="activeNodeChart" @reset-data="resetData" />
       </v-col>
+
+      <!-- Mobile: slim toggle button attached to the overlay (caret icon) -->
+      <v-btn
+        v-if="!lgAndUp"
+        class="filters-fab"
+        :class="{ open: showFilters }"
+        elevation="2"
+        icon
+        :aria-label="showFilters ? 'Close filters' : 'Open filters'"
+        :style="{ left: showFilters ? `${drawerWidth}px` : '0px' }"
+        @click="showFilters = !showFilters"
+      >
+        <v-icon v-if="!showFilters" :icon="mdiChevronRight" size="20" color="black" />
+        <v-icon v-else :icon="mdiChevronLeft" size="20" color="black" />
+      </v-btn>
+
+      <!-- Drawer overlay for mobile filters -->
+      <v-navigation-drawer v-model="showFilters" temporary scrim width="320" left>
+        <v-toolbar flat>
+          <v-toolbar-title>Filters</v-toolbar-title>
+          <v-spacer />
+          <v-btn
+            icon
+            class="drawer-close-btn"
+            aria-label="Close filters"
+            @click="showFilters = false"
+          >
+            <v-icon :icon="mdiClose" size="18" color="black" />
+          </v-btn>
+        </v-toolbar>
+        <v-divider />
+        <v-sheet flat class="pa-2" color="input">
+          <v-card-title class="pa-0"> Variables </v-card-title>
+          <v-tabs v-model="activePlt" direction="vertical" color="primary">
+            <v-tab v-for="plt in chartStore.nodeCharts" :key="plt.abbreviation" :value="plt">
+              <template v-if="lgAndUp">
+                {{ plt.name }}
+              </template>
+              <template v-else>
+                {{ plt.abbreviation }}
+              </template>
+              <v-tooltip activator="parent" location="start" max-width="300px">
+                {{ plt.help }}
+              </v-tooltip>
+            </v-tab>
+          </v-tabs>
+        </v-sheet>
+        <TimeRangeSelector />
+        <v-divider class="my-2" />
+        <PlotOptions />
+        <v-divider class="my-2" />
+        <DataQuality />
+        <v-divider class="my-2" />
+        <PlotActions :chosen-plot="activeNodeChart" @reset-data="resetData" />
+      </v-navigation-drawer>
+
       <v-divider v-if="lgAndUp" class="my-2" vertical />
-      <v-col sm="10">
+      <v-col :cols="12" :lg="9" :xl="9">
         <v-window v-model="activePlt">
           <v-window-item v-for="plt in chartStore.nodeCharts" :key="plt.abbreviation" :value="plt">
             <NodeChart
@@ -64,7 +121,8 @@
 import NodeChart from '@/components/NodeChart.vue'
 import { useChartsStore } from '../stores/charts'
 import { useFeaturesStore } from '../stores/features'
-import { onMounted, computed } from 'vue'
+import { onMounted, computed, ref } from 'vue'
+import { mdiChevronRight, mdiChevronLeft, mdiClose } from '@mdi/js'
 import { useDisplay } from 'vuetify'
 import PlotOptions from '@/components/PlotOptions.vue'
 import PlotActions from '@/components/PlotActions.vue'
@@ -92,10 +150,54 @@ const goToTimeSeriesPlot = (e) => {
   e.preventDefault()
   chartTab.value = 'timeseries'
 }
+const drawerWidth = 320
+const showFilters = ref(false)
 </script>
 
 <style scoped>
 .chart {
   height: 100%;
 }
+
+.filters-fab {
+  position: fixed;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1200;
+  background: #ffffff;
+  color: #000;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  width: 32px;
+  height: 48px;
+  min-width: 36px;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    left 0.12s ease,
+    transform 0.12s ease,
+    background 0.12s ease;
+  padding: 0;
+}
+.filters-fab.open {
+  transform: translateY(-50%) scale(1.02);
+  background: #f5f5f5;
+}
+
+.filters-fab .v-icon {
+  font-size: 20px;
+  color: #000;
+  line-height: 1;
+}
+.drawer-close-icon {
+  font-size: 16px;
+  color: #000;
+}
+
+.drawer-close-btn {
+  color: rgba(0, 0, 0, 0.7);
+}
 </style>
diff --git a/frontend/src/views/TimeSeriesCharts.vue b/frontend/src/views/TimeSeriesCharts.vue
index 50be20f..09444f1 100644
--- a/frontend/src/views/TimeSeriesCharts.vue
+++ b/frontend/src/views/TimeSeriesCharts.vue
@@ -1,7 +1,8 @@
 <template>
   <v-container v-if="hasData" fluid fill-height>
     <v-row>
-      <v-col sm="2">
+      <!-- Left panel shown only on large screens -->
+      <v-col v-if="lgAndUp" :cols="12" :lg="3" :xl="3">
         <v-card class="elevation-1" color="input">
           <v-card-title> Variables </v-card-title>
           <v-tabs v-model="activePlt" direction="vertical" color="primary">
@@ -26,8 +27,64 @@
         <v-divider v-if="lgAndUp" class="my-2" />
         <PlotActions :chosen-plot="activeReachChart" />
       </v-col>
+
+      <!-- Mobile: slim toggle button attached to the overlay (caret icon) -->
+      <v-btn
+        v-if="!lgAndUp"
+        class="filters-fab"
+        :class="{ open: showFilters }"
+        elevation="2"
+        icon
+        :aria-label="showFilters ? 'Close filters' : 'Open filters'"
+        :style="{ left: showFilters ? `${drawerWidth}px` : '0px' }"
+        @click="showFilters = !showFilters"
+      >
+        <v-icon v-if="!showFilters" :icon="mdiChevronRight" size="20" color="black" />
+        <v-icon v-else :icon="mdiChevronLeft" size="20" color="black" />
+      </v-btn>
+
+      <!-- Drawer overlay for mobile filters -->
+      <v-navigation-drawer v-model="showFilters" temporary scrim width="320" left>
+        <v-toolbar flat>
+          <v-toolbar-title>Filters</v-toolbar-title>
+          <v-spacer />
+          <v-btn
+            icon
+            class="drawer-close-btn"
+            aria-label="Close filters"
+            @click="showFilters = false"
+          >
+            <v-icon :icon="mdiClose" size="18" color="black" />
+          </v-btn>
+        </v-toolbar>
+        <v-divider />
+        <v-card flat class="pa-2" color="input">
+          <v-card-title class="pa-0"> Variables </v-card-title>
+          <v-tabs v-model="activePlt" direction="vertical" color="primary">
+            <v-tab v-for="plt in timeSeriesCharts" :key="plt.abbreviation" :value="plt">
+              <template v-if="lgAndUp">
+                {{ plt.name }}
+              </template>
+              <template v-else>
+                {{ plt.abbreviation }}
+              </template>
+              <v-tooltip activator="parent" location="start" max-width="300px">
+                {{ plt.help }}
+              </v-tooltip>
+            </v-tab>
+          </v-tabs>
+        </v-card>
+        <TimeRangeSelector />
+        <v-divider class="my-2" />
+        <PlotOptions />
+        <v-divider class="my-2" />
+        <DataQuality />
+        <v-divider class="my-2" />
+        <PlotActions :chosen-plot="activeReachChart" />
+      </v-navigation-drawer>
+
       <v-divider v-if="lgAndUp" class="my-2" vertical />
-      <v-col sm="10">
+      <v-col :cols="12" :lg="9" :xl="9">
         <v-window v-model="activePlt">
           <v-window-item v-for="plt in timeSeriesCharts" :key="plt.abbreviation" :value="plt">
             <LineChart v-if="plt" class="chart" :data="chartStore.chartData" :chosen-plot="plt" />
@@ -47,7 +104,8 @@ import TimeRangeSelector from '@/components/TimeRangeSelector.vue'
 import { useChartsStore } from '../stores/charts'
 import { useFeaturesStore } from '@/stores/features'
 import { useDisplay } from 'vuetify'
-import { onMounted, computed } from 'vue'
+import { onMounted, computed, ref } from 'vue'
+import { mdiChevronRight, mdiChevronLeft, mdiClose } from '@mdi/js'
 import { storeToRefs } from 'pinia'
 
 const { lgAndUp } = useDisplay()
@@ -68,10 +126,54 @@ let timeSeriesCharts = computed(() => {
 })
 
 onMounted(() => {})
+const drawerWidth = 320
+const showFilters = ref(false)
 </script>
 
 <style scoped>
 .chart {
   height: 100%;
 }
+
+.filters-fab {
+  position: fixed;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1200;
+  background: #ffffff;
+  color: #000;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  width: 32px;
+  height: 48px;
+  min-width: 36px;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    left 0.12s ease,
+    transform 0.12s ease,
+    background 0.12s ease;
+  padding: 0;
+}
+.filters-fab.open {
+  transform: translateY(-50%) scale(1.02);
+  background: #f5f5f5;
+}
+
+.filters-fab .v-icon {
+  font-size: 20px;
+  color: #000;
+  line-height: 1;
+}
+.drawer-close-icon {
+  font-size: 16px;
+  color: #000;
+}
+
+.drawer-close-btn {
+  color: rgba(0, 0, 0, 0.7);
+}
 </style>