adjust chart and popup for mobile screens.

Author: alifarooq93

components/LineChart.vue

@@ -8,7 +8,9 @@
       ×
     </button>
 
-    <Line :data="data" :options="options" />
+    <div class="w-full" style="height: 300px; max-height: 50vh;">
+      <Line :data="data" :options="options" />
+    </div>
   </div>
 </template>
 
@@ -68,6 +70,7 @@ const data = computed(() => ({
 
 const options = computed(() => ({
   responsive: true,
+  maintainAspectRatio: false,
   plugins: {
     title: {
       display: true,

components/PopupInfo.vue

@@ -3,9 +3,9 @@
     class="absolute bottom-30 left-1/2 transform -translate-x-1/2 bg-white dark:bg-slate-900 text-black dark:text-white p-4 rounded-lg shadow-lg z-[101] w-[90%] max-w-xl"
   >
     <div class="relative">
-      <h2 v-if="title" class="text-lg font-bold text-white text-center">
+      <p v-if="title" class="pr-10 text-sm md:text-xl lg:text-2xl font-bold text-white text-center">
         {{ title }}
-      </h2>
+      </p>
       <button
         class="absolute top-0 right-0 text-white text-xl hover:text-red-400"
         @click="handleClose"

pages/index.vue

@@ -93,7 +93,7 @@
         />
         <div
           v-if="selectedItem?.properties?.options?.display_option === 'line chart'"
-          class="absolute bottom-40 left-1/2 transform -translate-x-1/2 bg-slate-900 text-black p-4 rounded-lg shadow-lg z-[101] w-[90%] max-w-2xl"
+          class="absolute bottom-10 left-1/2 transform -translate-x-1/2 bg-slate-900 text-white p-4 rounded-lg shadow-lg z-[101] w-[95%] max-w-4xl sm:w-4/5 sm:max-w-2xl"
         >
           <LineChart
             v-if="selectedItem" :chart-data="chartData" :selected-item="selectedItem" class="mt-4"