Style/responsive (#397)

* refactor: remove useEffect and items to show state

* style: add css to hide spinner on input:number

* style: decrease width of select and input feilds

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

src/frontend/src/assets/css/index.css

@@ -76,6 +76,16 @@ body {
   }
 }
 
+.no-spinner::-webkit-inner-spin-button,
+.no-spinner::-webkit-outer-spin-button {
+    -webkit-appearance: none; /* Chrome, Safari, Edge, Opera */
+    margin: 0;
+}
+
+.no-spinner {
+    -moz-appearance: textfield; /* Firefox */
+}
+
 #pdf-page-wrapper
   > div.react-pdf__Page
   > div.react-pdf__Page__textContent.textLayer {

src/frontend/src/components/LandingPage/UserAndRoles/index.tsx

@@ -1,4 +1,3 @@
-import { useState, useEffect } from 'react';
 import { FlexRow } from '@Components/common/Layouts';
 // import Icon from '@Components/common/Icon';
 import { motion } from 'framer-motion';
@@ -9,24 +8,6 @@ import {
 } from '@Constants/animations';
 
 export default function UserAndRoles() {
-  const [itemsToShow, setItemsToShow] = useState(1);
-
-  useEffect(() => {
-    function handleResize() {
-      if (window.innerWidth < 768) {
-        setItemsToShow(1);
-      } else if (window.innerWidth < 1024) {
-        setItemsToShow(2);
-      } else {
-        setItemsToShow(3);
-      }
-    }
-
-    window.addEventListener('resize', handleResize);
-    handleResize();
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
   return (
     <section className="user-and-roles naxatw-bg-[#F9F3EA]">
       <div className="!naxatw-w-full naxatw-px-[1.25rem] naxatw-py-24 md:naxatw-px-[4.375rem]">
@@ -42,21 +23,14 @@ export default function UserAndRoles() {
           gap={5}
           className="naxatw-mt-20 naxatw-items-center naxatw-justify-between"
         >
-          {/* <button
-            type="button"
-            className="naxatw-flex naxatw-h-12 naxatw-w-12 naxatw-items-center naxatw-justify-center naxatw-rounded-full naxatw-border naxatw-border-landing-blue naxatw-bg-white hover:naxatw-animate-loader"
-            onClick={() => {}}
-          >
-            <Icon name="west" />
-          </button> */}
           <motion.div
             variants={containerAnimationVariant}
             initial="hidden"
             whileInView="visible"
             viewport={{ once: true }}
             className="naxatw-mx-auto naxatw-grid naxatw-w-[90%] naxatw-grid-cols-1 naxatw-gap-5 md:naxatw-grid-cols-2 lg:naxatw-grid-cols-3"
           >
-            {userAndRolesData.slice(0, itemsToShow).map(singleItem => (
+            {userAndRolesData.map(singleItem => (
               <motion.div
                 key={singleItem.id}
                 variants={fadeUpVariant}

src/frontend/src/components/Projects/Pagination/index.tsx

@@ -55,7 +55,7 @@ export default function Pagination({
             valueKey="value"
             placeholder="Select"
             direction="top"
-            className="naxatw-h-9 !naxatw-w-[64px] naxatw-rounded-lg naxatw-border md:!naxatw-w-20"
+            className="naxatw-h-9 !naxatw-w-[64px] naxatw-rounded-lg naxatw-border md:!naxatw-w-16"
           />
         </FlexRow>
         <FlexRow gap={2}>
@@ -71,7 +71,7 @@ export default function Pagination({
                   page >= lastPage ? lastPage : page <= 1 ? 1 : page;
                 handlePaginationState({ activePage: validPage });
               }}
-              className="naxatw-w-12 naxatw-border-b-2 naxatw-px-1 naxatw-py-0"
+              className="no-spinner naxatw-w-8 naxatw-border-b-2 naxatw-px-1 naxatw-py-0 naxatw-text-center"
             />
           </FlexRow>
         </FlexRow>