responsive table

resources/views/agency.blade.php

@@ -22,16 +22,17 @@
             </div>
         </div>
 
-        <div class="flex" style="gap:10px">
-            <div class="relative w-fit">
+        <div class="flex flex-col lg:flex-row gap-2 w-full">
+            <div class="relative w-full lg:w-fit">
                 <input type="text" placeholder="Carian"
                     class="w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500" />
-                <div class="pointer-events-none absolute text-gray-500 text-xs" style="top: 50%; transform: translateY(-50%); right:10px">
+                <div class="pointer-events-none absolute text-gray-500 text-xs"
+                    style="top: 50%; transform: translateY(-50%); right:10px">
                     <i class="fas fa-search"></i>
                 </div>
             </div>
 
-            <div class="relative w-fit">
+            <div class="relative w-full lg:w-fit">
                 <select
                     class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
                     <option value="all" selected>Agensi</option>
@@ -40,7 +41,7 @@
                 </select>
             </div>
 
-            <div class="relative w-fit">
+            <div class="relative w-full lg:w-fit">
                 <select
                     class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
                     <option value="all" selected>Status Prestasi</option>
@@ -49,13 +50,13 @@
                     <option value="3">Baik</option>
                 </select>
             </div>
-
         </div>
 
+
         <div class="border rounded">
             <h5 class="font-semibold m-5">Senarai Agensi</h5>
             <div class="overflow-x-auto overflow-hidden rounded-[10px]">
-                <table class="w-full text-sm text-left text-gray-700 border-collapse">
+                <table class="min-w-[800px] text-sm text-left text-gray-700 border-collapse">
                     <thead>
                         <tr>
                             <th class="text-xs px-4 py-2">Bil</th>

resources/views/agency_performance.blade.php

@@ -22,8 +22,8 @@
             </div>
         </div>
 
-        <div class="flex" style="gap:10px">
-            <div class="relative w-fit">
+        <div class="flex flex-col lg:flex-row gap-2 w-full">
+            <div class="relative w-full lg:w-fit">
                 <input type="text" placeholder="Carian"
                     class="w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500" />
                 <div class="pointer-events-none absolute text-gray-500 text-xs"
@@ -32,7 +32,7 @@
                 </div>
             </div>
 
-            <div class="relative w-fit">
+            <div class="relative w-full lg:w-fit">
                 <select
                     class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
                     <option value="all" selected>Agensi</option>
@@ -41,7 +41,7 @@
                 </select>
             </div>
 
-            <div class="relative w-fit">
+            <div class="relative w-full lg:w-fit">
                 <select
                     class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
                     <option value="all" selected>Status Prestasi</option>
@@ -50,13 +50,13 @@
                     <option value="3">Baik</option>
                 </select>
             </div>
-
         </div>
 
+
         <div class="border rounded">
             <h5 class="font-semibold m-5">Senarai Agensi</h5>
             <div class="overflow-x-auto overflow-hidden rounded-[10px]">
-                <table class="w-full text-sm text-left text-gray-700 border-collapse">
+                <table class="min-w-[800px] text-sm text-left text-gray-700 border-collapse">
                     <thead>
                         <tr>
                             <th class="text-xs px-4 py-2">Bil</th>