Improve code

src/screens/Biometric/FaceRecognition/Section/Search.jsx

@@ -441,42 +441,73 @@ const Search = () => {
       backgroundColor: '#f7f7f7',
       borderRadius: '8px',
       margin: '1rem',
-      width: '100%', // Full width for large screens
-    },resultGrid: {
+      width: '100%',
+    },
+    resultGrid: {
       display: 'grid',
-      gridTemplateColumns: 'repeat(5, 1fr)',  // Membuat 5 kolom dalam grid
-      gap: '16px', // Jarak antar card
+      gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(5, 1fr)', // Adjust based on isMobile
+      gap: '16px',
     },
     resultItem: {
       border: '1px solid #ddd',
       borderRadius: '8px',
-      padding: '10px',
+      padding: '12px',
       boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
       textAlign: 'center',
+      transition: 'transform 0.3s ease', // Added transition for hover effect
+      cursor: 'pointer',
+    },
+    resultItemHover: {
+      transform: 'scale(1.05)', // Slightly enlarge the card on hover
     },
     resultTextContainer: {
-      marginBottom: '10px',
+      marginBottom: '12px',
+      padding: '5px 0',
     },
     resultText: {
-      fontSize: '14px',
+      fontSize: isMobile ? '12px' : '14px', // Adjust font size for mobile
       color: '#333',
+      margin: '5px 0',
     },
     resultImage: {
       width: '100%',
       height: 'auto',
       borderRadius: '8px',
+      objectFit: 'cover', // Ensure the image covers the area without distorting
+      maxHeight: '150px', // Maximum height for the image to keep cards uniform
     },
 
-    // Media query for mobile responsiveness
-    '@media screen and (max-width: 768px)': {
-      containerResultStyle: {
-        width: '100%', // Full width on mobile
+    // Media Queries for Responsiveness
+    '@media (max-width: 1200px)': {
+      resultGrid: {
+        gridTemplateColumns: 'repeat(4, 1fr)',  // 4 columns on smaller screens (desktop size)
       },
-      resultContainer: {
-        flexDirection: 'column', // Stack results vertically on small screens
+    },
+
+    '@media (max-width: 992px)': {
+      resultGrid: {
+        gridTemplateColumns: 'repeat(3, 1fr)',  // 3 columns for medium devices
+      },
+    },
+
+    '@media (max-width: 768px)': {
+      resultGrid: {
+        gridTemplateColumns: 'repeat(2, 1fr)',  // 2 columns for tablets and below
       },
       resultItem: {
-        width: '100%', // Make result items take full width on mobile
+        padding: '8px', // Adjust padding for smaller screens
+      },
+      resultText: {
+        fontSize: '12px', // Smaller font size for better readability on small screens
+      },
+      resultImage: {
+        maxHeight: '120px', // Limit image height for smaller devices
+      },
+    },
+
+    '@media (max-width: 480px)': {
+      resultGrid: {
+        gridTemplateColumns: '1fr', // 1 column for very small screens (mobile portrait)
       },
     },
   };
@@ -623,8 +654,8 @@ const Search = () => {
         </button>
       </div>
 
-      {/* Results Section */}
-      {
+        {/* Results Section */}
+        {
         showResult && results.length > 0 && (
           <div style={styles.containerResultStyle}>
             <h1 style={{ color: '#0542cc', textAlign: 'center' }}>Results</h1>