chore(deps): upgrade prettier, and tailwind (#2351)

src/components/Common/Button/index.tsx

@@ -13,7 +13,7 @@ export type ButtonType =
 // Helper type to override types (overrides onClick)
 type MergeElementProps<
   T extends React.ElementType,
-  P extends Record<string, unknown>
+  P extends Record<string, unknown>,
 > = Omit<React.ComponentProps<T>, keyof P> & P;
 
 type ElementTypes = 'button' | 'a';

src/components/Common/Dropdown/index.tsx

@@ -57,7 +57,7 @@ const DropdownItems = ({
     >
       <Menu.Items
         className={[
-          'absolute right-0 z-40 mt-2 -mr-1 w-56 origin-top-right rounded-md p-1 shadow-lg',
+          'absolute right-0 z-40 -mr-1 mt-2 w-56 origin-top-right rounded-md p-1 shadow-lg',
           dropdownType === 'ghost'
             ? 'border border-gray-700 bg-gray-800 bg-opacity-80 backdrop-blur'
             : 'bg-indigo-600',

src/components/Common/Modal/index.tsx

@@ -91,7 +91,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
       <Transition.Child
         appear
         as="div"
-        className="fixed top-0 bottom-0 left-0 right-0 z-50 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-70"
+        className="fixed bottom-0 left-0 right-0 top-0 z-50 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-70"
         enter="transition-opacity duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
@@ -116,7 +116,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
           </div>
         </Transition>
         <Transition
-          className={`hide-scrollbar relative inline-block w-full overflow-auto bg-gray-800 px-4 pt-4 pb-4 text-left align-bottom shadow-xl ring-1 ring-gray-700 transition-all sm:my-8 sm:max-w-3xl sm:rounded-lg sm:align-middle ${dialogClass}`}
+          className={`hide-scrollbar relative inline-block w-full overflow-auto bg-gray-800 px-4 pb-4 pt-4 text-left align-bottom shadow-xl ring-1 ring-gray-700 transition-all sm:my-8 sm:max-w-3xl sm:rounded-lg sm:align-middle ${dialogClass}`}
           role="dialog"
           aria-modal="true"
           aria-labelledby="modal-headline"
@@ -135,7 +135,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
           ref={modalRef}
         >
           {backdrop && (
-            <div className="absolute top-0 left-0 right-0 z-0 h-64 max-h-full w-full">
+            <div className="absolute left-0 right-0 top-0 z-0 h-64 max-h-full w-full">
               <CachedImage
                 type="tmdb"
                 alt=""

src/components/Common/MultiRangeSlider/index.tsx

@@ -83,7 +83,7 @@ const MultiRangeSlider = ({
           max={max}
           value={valueMax}
           step="1"
-          className={`pointer-events-none absolute top-0 left-0 right-0 z-20 h-2 w-full cursor-pointer appearance-none rounded-lg bg-transparent`}
+          className={`pointer-events-none absolute left-0 right-0 top-0 z-20 h-2 w-full cursor-pointer appearance-none rounded-lg bg-transparent`}
           onChange={(e) => {
             const value = Number(e.target.value);
 

src/components/Common/SensitiveInput/index.tsx

@@ -35,8 +35,8 @@ const SensitiveInput = ({ as = 'input', ...props }: SensitiveInputProps) => {
           isHidden
             ? 'password'
             : props.type !== 'password'
-            ? props.type ?? 'text'
-            : 'text'
+              ? (props.type ?? 'text')
+              : 'text'
         }
       />
       <button

src/components/Common/SlideOver/index.tsx

@@ -72,7 +72,7 @@ const SlideOver = ({
                 onClick={(e) => e.stopPropagation()}
               >
                 <div className="flex h-full flex-col rounded-lg bg-gray-800 bg-opacity-80 shadow-xl ring-1 ring-gray-700 backdrop-blur">
-                  <header className="space-y-1 border-b border-gray-700 py-4 px-4">
+                  <header className="space-y-1 border-b border-gray-700 px-4 py-4">
                     <div className="flex items-center justify-between space-x-3">
                       <h2 className="text-overseerr text-2xl font-bold leading-7">
                         {title}

src/components/Common/Table/index.tsx

@@ -78,7 +78,7 @@ type TableProps = {
 const Table = ({ children }: TableProps) => {
   return (
     <div className="flex flex-col">
-      <div className="my-2 -mx-4 overflow-x-auto md:mx-0 lg:mx-0">
+      <div className="-mx-4 my-2 overflow-x-auto md:mx-0 lg:mx-0">
         <div className="inline-block min-w-full py-2 align-middle">
           <div className="overflow-hidden rounded-lg shadow md:mx-0 lg:mx-0">
             <table className="min-w-full">{children}</table>