Mobil visibility fix

resources/js/Pages/IkeaRoot.vue

@@ -22,6 +22,10 @@ import filterimg from "@/assets/eglass-filter.png";
 import searchimg from "@/assets/search-icon.svg";
 import Popper from "vue3-popper";
 
+
+const screenWidth = ref(screen.width)
+const screenHeight = ref(screen.height)
+
 const sdropdown = ref([
   { text: "Description", value: "typeName" },
   { text: "Item name", value: "name" },
@@ -45,11 +49,14 @@ const rates = ref([]);
 const options_items = ref([]);
 const itemCode = ref(null);
 
+const gChartWidth = screenWidth.value > 420 ? 400 : (screenWidth.value - 12 - 5);
+const gChartHeight = gChartWidth == 400 ? 250 : (screenWidth.value *65/100) - 20;
+console.log('GCH',screenWidth.value, screenHeight.value, gChartWidth,gChartHeight);
 const options = {
   region: 150,
 
-  width: 400,
-  height: 310,
+  width:  gChartWidth,
+  height: gChartHeight,
 };
 
 const chart_settings = {
@@ -480,14 +487,14 @@ watch(ccodes, (codes) => {
       <div class="mr-auto">
         <form @submit.prevent="submit">
           <div>
-          <div class="grid grid-cols-3">
-            <div>
+          <div class="grid lg:grid-cols-3 md:grid-cols-1 sm:grid-cols-1">
+            <div class="w-full">
               <div>
                 <span class="font-extrabold font-mono">Dynamic search:</span>
               </div>
               <div>
                 <input
-                  class="rounded-md"
+                  class="rounded-md w-full"
                   v-model="form.text"
                   @input="async_search"
                 />