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

.prettierignore

@@ -4,15 +4,17 @@ dist/
 config/
 pnpm-lock.yaml
 cypress/config/settings.cypress.json
+.github
+.vscode
 
 # assets
 src/assets/
-public/
-!public/sw.js
 docs/
-!/public/
+public/*
-/public/*
+!public/sw.js
-!/public/sw.js
 
 # helm charts
 **/charts
+
+# Prettier breaks GitHub alert syntax in markdown
+*.md

.prettierrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: [require('./merged-prettier-plugin.js')],
+  plugins: ['prettier-plugin-organize-imports', 'prettier-plugin-tailwindcss'],
   singleQuote: true,
   trailingComma: 'es5',
   overrides: [
@@ -27,5 +27,11 @@ module.exports = {
         rangeEnd: 0,
       },
     },
+    {
+      files: 'public/offline.html',
+      options: {
+        rangeEnd: 0,
+      },
+    },
   ],
 };

merged-prettier-plugin.js

@@ -1,21 +0,0 @@
-/* eslint-disable */
-const tailwind = require('prettier-plugin-tailwindcss');
-const organizeImports = require('prettier-plugin-organize-imports');
-
-const combinedFormatter = {
-  ...tailwind,
-  parsers: {
-    ...tailwind.parsers,
-    ...Object.keys(organizeImports.parsers).reduce((acc, key) => {
-      acc[key] = {
-        ...tailwind.parsers[key],
-        preprocess(code, options) {
-          return organizeImports.parsers[key].preprocess(code, options);
-        },
-      };
-      return acc;
-    }, {}),
-  },
-};
-
-module.exports = combinedFormatter;

package.json

@@ -16,7 +16,7 @@
     "migration:generate": "ts-node -r tsconfig-paths/register --project server/tsconfig.json ./node_modules/typeorm/cli.js migration:generate -d server/datasource.ts",
     "migration:create": "ts-node -r tsconfig-paths/register --project server/tsconfig.json ./node_modules/typeorm/cli.js migration:create -d server/datasource.ts",
     "migration:run": "ts-node -r tsconfig-paths/register --project server/tsconfig.json ./node_modules/typeorm/cli.js migration:run -d server/datasource.ts",
-    "format": "prettier --loglevel warn --write --cache .",
+    "format": "prettier --log-level warn --write --cache .",
     "format:check": "prettier --check --cache .",
     "typecheck": "pnpm typecheck:server && pnpm typecheck:client",
     "typecheck:server": "tsc --project server/tsconfig.json --noEmit",
@@ -116,9 +116,9 @@
   "devDependencies": {
     "@commitlint/cli": "17.4.4",
     "@commitlint/config-conventional": "17.4.4",
-    "@tailwindcss/aspect-ratio": "0.4.2",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "0.5.10",
+    "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/typography": "0.5.16",
+    "@tailwindcss/typography": "^0.5.16",
     "@types/bcrypt": "6.0.0",
     "@types/cookie-parser": "1.4.10",
     "@types/country-flag-icons": "1.2.2",
@@ -144,7 +144,7 @@
     "@types/yup": "0.29.14",
     "@typescript-eslint/eslint-plugin": "7.18.0",
     "@typescript-eslint/parser": "7.18.0",
-    "autoprefixer": "10.4.23",
+    "autoprefixer": "^10.4.23",
     "baseline-browser-mapping": "^2.8.32",
     "commitizen": "4.3.1",
     "copyfiles": "2.4.1",
@@ -152,7 +152,7 @@
     "cypress": "14.5.4",
     "cz-conventional-changelog": "3.3.0",
     "eslint": "8.57.1",
-    "eslint-config-next": "^14.2.4",
+    "eslint-config-next": "^14.2.35",
     "eslint-config-prettier": "8.6.0",
     "eslint-plugin-formatjs": "4.9.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
@@ -163,11 +163,11 @@
     "husky": "8.0.3",
     "lint-staged": "13.1.2",
     "nodemon": "3.1.11",
-    "postcss": "8.5.6",
+    "postcss": "^8.5.6",
-    "prettier": "2.8.4",
+    "prettier": "3.8.1",
-    "prettier-plugin-organize-imports": "3.2.2",
+    "prettier-plugin-organize-imports": "4.3.0",
-    "prettier-plugin-tailwindcss": "0.2.3",
+    "prettier-plugin-tailwindcss": "0.6.14",
-    "tailwindcss": "3.2.7",
+    "tailwindcss": "3.4.19",
     "ts-node": "10.9.2",
     "tsc-alias": "1.8.16",
     "tsconfig-paths": "4.2.0",

server/api/github.ts

@@ -57,7 +57,7 @@ interface GithubCommit {
       sha: string;
       url: string;
       html_url: string;
-    }
+    },
   ];
 }
 

server/api/jellyfin.ts

@@ -420,7 +420,7 @@ class JellyfinAPI extends ExternalAPI {
   }
 
   public async getEpisodes<
-    T extends { includeMediaInfo?: boolean } | undefined = undefined
+    T extends { includeMediaInfo?: boolean } | undefined = undefined,
   >(
     seriesID: string,
     seasonID: string,

server/api/pushover.ts

@@ -21,7 +21,7 @@ export const mapSounds = (sounds: {
       ({
         name,
         description,
-      } as PushoverSound)
+      }) as PushoverSound
   );
 
 class PushoverAPI extends ExternalAPI {

server/api/themoviedb/interfaces.ts

@@ -392,8 +392,10 @@ export interface TmdbPersonCombinedCredits {
   crew: TmdbPersonCreditCrew[];
 }
 
-export interface TmdbSeasonWithEpisodes
+export interface TmdbSeasonWithEpisodes extends Omit<
-  extends Omit<TmdbTvSeasonResult, 'episode_count'> {
+  TmdbTvSeasonResult,
+  'episode_count'
+> {
   episodes: TmdbTvEpisodeResult[];
   external_ids: TmdbExternalIds;
 }

server/entity/User.ts

@@ -271,7 +271,7 @@ export class User {
     });
 
     const movieQuotaLimit = !canBypass
-      ? this.movieQuotaLimit ?? defaultQuotas.movie.quotaLimit
+      ? (this.movieQuotaLimit ?? defaultQuotas.movie.quotaLimit)
       : 0;
     const movieQuotaDays = this.movieQuotaDays ?? defaultQuotas.movie.quotaDays;
 
@@ -295,7 +295,7 @@ export class User {
       : 0;
 
     const tvQuotaLimit = !canBypass
-      ? this.tvQuotaLimit ?? defaultQuotas.tv.quotaLimit
+      ? (this.tvQuotaLimit ?? defaultQuotas.tv.quotaLimit)
       : 0;
     const tvQuotaDays = this.tvQuotaDays ?? defaultQuotas.tv.quotaDays;
 

server/lib/notifications/agents/webhook.ts

@@ -122,7 +122,7 @@ class WebhookAgent
             `{{${keymapKey}}}`,
             typeof keymapValue === 'function'
               ? keymapValue(payload, type)
-              : get(payload, keymapValue) ?? ''
+              : (get(payload, keymapValue) ?? '')
           );
         });
       } else if (finalPayload[key] && typeof finalPayload[key] === 'object') {

server/lib/search.ts

@@ -59,8 +59,7 @@ searchProviders.push({
 
     const successfulResponses = responses.filter(
       (r) => r.status === 'fulfilled'
-    ) as
+    ) as (
-      | (
       | PromiseFulfilledResult<TmdbMovieDetails>
       | PromiseFulfilledResult<TmdbTvDetails>
       | PromiseFulfilledResult<TmdbPersonDetails>
@@ -185,8 +184,7 @@ searchProviders.push({
 
     const successfulResponses = responses.filter(
       (r) => r.status === 'fulfilled'
-    ) as
+    ) as (
-      | (
       | PromiseFulfilledResult<TmdbSearchMovieResponse>
       | PromiseFulfilledResult<TmdbSearchTvResponse>
     )[];

server/migration/postgres/1734786596045-AddTelegramMessageThreadId.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class AddTelegramMessageThreadId1734786596045
+export class AddTelegramMessageThreadId1734786596045 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'AddTelegramMessageThreadId1734786596045';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/migration/postgres/1743107707465-AddUserAvatarCacheFields.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class AddUserAvatarCacheFields1743107707465
+export class AddUserAvatarCacheFields1743107707465 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'AddUserAvatarCacheFields1743107707465';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/migration/postgres/1765233385034-AddUniqueConstraintToPushSubscription.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class AddUniqueConstraintToPushSubscription1765233385034
+export class AddUniqueConstraintToPushSubscription1765233385034 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'AddUniqueConstraintToPushSubscription1765233385034';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/migration/sqlite/1608217312474-AddUserRequestDeleteCascades.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class AddUserRequestDeleteCascades1608219049304
+export class AddUserRequestDeleteCascades1608219049304 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'AddUserRequestDeleteCascades1608219049304';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/migration/sqlite/1608477467935-AddLastSeasonChangeMedia.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class AddLastSeasonChangeMedia1608477467935
+export class AddLastSeasonChangeMedia1608477467935 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'AddLastSeasonChangeMedia1608477467935';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/migration/sqlite/1608477467936-ForceDropImdbUniqueConstraint.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class ForceDropImdbUniqueConstraint1608477467935
+export class ForceDropImdbUniqueConstraint1608477467935 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'ForceDropImdbUniqueConstraint1608477467936';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/migration/sqlite/1609236552057-RemoveTmdbIdUniqueConstraint.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class RemoveTmdbIdUniqueConstraint1609236552057
+export class RemoveTmdbIdUniqueConstraint1609236552057 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'RemoveTmdbIdUniqueConstraint1609236552057';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/migration/sqlite/1610522845513-AddMediaAddedFieldToMedia.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class AddMediaAddedFieldToMedia1610522845513
+export class AddMediaAddedFieldToMedia1610522845513 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'AddMediaAddedFieldToMedia1610522845513';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/migration/sqlite/1611757511674-SonarrRadarrSyncServiceFields.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class SonarrRadarrSyncServiceFields1611757511674
+export class SonarrRadarrSyncServiceFields1611757511674 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'SonarrRadarrSyncServiceFields1611757511674';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/migration/sqlite/1612482778137-AddResetPasswordGuidAndExpiryDate.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class AddResetPasswordGuidAndExpiryDate1612482778137
+export class AddResetPasswordGuidAndExpiryDate1612482778137 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'AddResetPasswordGuidAndExpiryDate1612482778137';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/migration/sqlite/1613955393450-UpdateUserSettingsRegions.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class UpdateUserSettingsRegions1613955393450
+export class UpdateUserSettingsRegions1613955393450 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'UpdateUserSettingsRegions1613955393450';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/migration/sqlite/1614334195680-AddTelegramSettingsToUserSettings.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class AddTelegramSettingsToUserSettings1614334195680
+export class AddTelegramSettingsToUserSettings1614334195680 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'AddTelegramSettingsToUserSettings1614334195680';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/migration/sqlite/1617624225464-CreateTagsFieldonMediaRequest.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class CreateTagsFieldonMediaRequest1617624225464
+export class CreateTagsFieldonMediaRequest1617624225464 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'CreateTagsFieldonMediaRequest1617624225464';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/migration/sqlite/1617730837489-AddUserSettingsNotificationAgentsField.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class AddUserSettingsNotificationAgentsField1617730837489
+export class AddUserSettingsNotificationAgentsField1617730837489 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'AddUserSettingsNotificationAgentsField1617730837489';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/migration/sqlite/1618912653565-CreateUserPushSubscriptions.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class CreateUserPushSubscriptions1618912653565
+export class CreateUserPushSubscriptions1618912653565 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'CreateUserPushSubscriptions1618912653565';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/migration/sqlite/1619339817343-AddUserSettingsNotificationTypes.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class AddUserSettingsNotificationTypes1619339817343
+export class AddUserSettingsNotificationTypes1619339817343 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'AddUserSettingsNotificationTypes1619339817343';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/migration/sqlite/1635079863457-AddPushbulletPushoverUserSettings.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class AddPushbulletPushoverUserSettings1635079863457
+export class AddPushbulletPushoverUserSettings1635079863457 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'AddPushbulletPushoverUserSettings1635079863457';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/migration/sqlite/1660632269368-AddWatchlistSyncUserSetting.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class AddWatchlistSyncUserSetting1660632269368
+export class AddWatchlistSyncUserSetting1660632269368 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'AddWatchlistSyncUserSetting1660632269368';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/migration/sqlite/1660714479373-AddMediaRequestIsAutoRequestedField.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class AddMediaRequestIsAutoRequestedField1660714479373
+export class AddMediaRequestIsAutoRequestedField1660714479373 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'AddMediaRequestIsAutoRequestedField1660714479373';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/migration/sqlite/1727907530757-AddUserSettingsStreamingRegion.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class AddUserSettingsStreamingRegion1727907530757
+export class AddUserSettingsStreamingRegion1727907530757 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'AddUserSettingsStreamingRegion1727907530757';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/migration/sqlite/1734287582736-AddTelegramMessageThreadId.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class AddTelegramMessageThreadId1734287582736
+export class AddTelegramMessageThreadId1734287582736 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'AddTelegramMessageThreadId1734287582736';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/migration/sqlite/1743107645301-AddUserAvatarCacheFields.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class AddUserAvatarCacheFields1743107645301
+export class AddUserAvatarCacheFields1743107645301 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'AddUserAvatarCacheFields1743107645301';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/migration/sqlite/1765233385034-AddUniqueConstraintToPushSubscription.ts

@@ -1,8 +1,6 @@
 import type { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class AddUniqueConstraintToPushSubscription1765233385034
+export class AddUniqueConstraintToPushSubscription1765233385034 implements MigrationInterface {
-  implements MigrationInterface
-{
   name = 'AddUniqueConstraintToPushSubscription1765233385034';
 
   public async up(queryRunner: QueryRunner): Promise<void> {

server/models/common.ts

@@ -149,7 +149,7 @@ export const mapWatchProviders = (watchProvidersResult: {
         link: provider.link,
         buy: mapWatchProviderDetails(provider.buy ?? []),
         flatrate: mapWatchProviderDetails(provider.flatrate ?? []),
-      } as WatchProviders)
+      }) as WatchProviders
   );
 
 export const mapWatchProviderDetails = (
@@ -162,10 +162,10 @@ export const mapWatchProviderDetails = (
         logoPath: provider.logo_path,
         id: provider.provider_id,
         name: provider.provider_name,
-      } as WatchProviderDetails)
+      }) as WatchProviderDetails
   );
 
 const siteUrlCreator = (site: Video['site'], key: string): string =>
   ({
     YouTube: `https://www.youtube.com/watch?v=${key}`,
-  }[site]);
+  })[site];

server/subscriber/IssueCommentSubscriber.ts

@@ -13,9 +13,7 @@ import type { EntitySubscriberInterface, InsertEvent } from 'typeorm';
 import { EventSubscriber } from 'typeorm';
 
 @EventSubscriber()
-export class IssueCommentSubscriber
+export class IssueCommentSubscriber implements EntitySubscriberInterface<IssueComment> {
-  implements EntitySubscriberInterface<IssueComment>
-{
   public listenTo(): typeof IssueComment {
     return IssueComment;
   }

server/subscriber/MediaRequestSubscriber.ts

@@ -40,9 +40,7 @@ const sanitizeDisplayName = (displayName: string): string => {
 };
 
 @EventSubscriber()
-export class MediaRequestSubscriber
+export class MediaRequestSubscriber implements EntitySubscriberInterface<MediaRequest> {
-  implements EntitySubscriberInterface<MediaRequest>
-{
   private async notifyAvailableMovie(
     entity: MediaRequest,
     event?: UpdateEvent<MediaRequest>

server/types/error.ts

@@ -1,7 +1,10 @@
 import type { ApiErrorCode } from '@server/constants/error';
 
 export class ApiError extends Error {
-  constructor(public statusCode: number, public errorCode: ApiErrorCode) {
+  constructor(
+    public statusCode: number,
+    public errorCode: ApiErrorCode
+  ) {
     super();
 
     this.name = 'apiError';

src/components/Blacklist/index.tsx

@@ -385,7 +385,7 @@ const BlacklistedItem = ({ item, revalidateList }: BlacklistedItemProps) => {
           </div>
         </div>
 
-        <div className="z-10 mt-4 ml-4 flex w-full flex-col justify-center overflow-hidden pr-4 text-sm sm:ml-2 sm:mt-0 xl:flex-1 xl:pr-0">
+        <div className="z-10 ml-4 mt-4 flex w-full flex-col justify-center overflow-hidden pr-4 text-sm sm:ml-2 sm:mt-0 xl:flex-1 xl:pr-0">
           <div className="card-field">
             <span className="card-field-name">Status</span>
             <Badge badgeType="danger">

src/components/BlacklistedTagsSelector/index.tsx

@@ -329,7 +329,7 @@ const BlacklistedTagImportForm = forwardRef<
 const VerifyClearIndicator = <
   Option,
   IsMuti extends boolean,
-  Group extends GroupBase<Option>
+  Group extends GroupBase<Option>,
 >(
   props: ClearIndicatorProps<Option, IsMuti, Group>
 ) => {

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

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>

src/components/Discover/DiscoverMovieGenre/index.tsx

@@ -43,7 +43,7 @@ const DiscoverMovieGenre = () => {
   return (
     <>
       <PageTitle title={title} />
-      <div className="mt-1 mb-5">
+      <div className="mb-5 mt-1">
         <Header>{title}</Header>
       </div>
       <ListView

src/components/Discover/DiscoverMovieKeyword/index.tsx

@@ -49,7 +49,7 @@ const DiscoverMovieKeyword = () => {
   return (
     <>
       <PageTitle title={title} />
-      <div className="mt-1 mb-5">
+      <div className="mb-5 mt-1">
         <Header>{title}</Header>
       </div>
       <ListView

src/components/Discover/DiscoverMovieLanguage/index.tsx

@@ -52,7 +52,7 @@ const DiscoverMovieLanguage = () => {
   return (
     <>
       <PageTitle title={title} />
-      <div className="mt-1 mb-5">
+      <div className="mb-5 mt-1">
         <Header>{title}</Header>
       </div>
       <ListView

src/components/Discover/DiscoverNetwork/index.tsx

@@ -45,7 +45,7 @@ const DiscoverTvNetwork = () => {
   return (
     <>
       <PageTitle title={title} />
-      <div className="mt-1 mb-5">
+      <div className="mb-5 mt-1">
         <Header>
           {firstResultData?.network.logoPath ? (
             <div className="relative mb-6 flex h-24 justify-center sm:h-32">

src/components/Discover/DiscoverSliderEdit/index.tsx

@@ -195,7 +195,7 @@ const DiscoverSliderEdit = ({
           className={`absolute -bottom-2 left-0 w-full border-t-4 border-indigo-500`}
         />
       )}
-      <div className="flex w-full flex-col rounded-t-lg border-t border-l border-r border-gray-800 bg-gray-900 p-4 text-gray-400 md:flex-row md:items-center md:space-x-2">
+      <div className="flex w-full flex-col rounded-t-lg border-l border-r border-t border-gray-800 bg-gray-900 p-4 text-gray-400 md:flex-row md:items-center md:space-x-2">
         <div
           className={`${slider.data ? 'mb-4' : 'mb-0'} flex space-x-2 md:mb-0`}
         >
@@ -285,7 +285,7 @@ const DiscoverSliderEdit = ({
               </Button>
             </>
           )}
-          <div className="absolute right-14 top-4 flex px-2 md:relative md:top-0 md:right-0">
+          <div className="absolute right-14 top-4 flex px-2 md:relative md:right-0 md:top-0">
             <button
               className={'hover:text-white disabled:text-gray-800'}
               onClick={() =>
@@ -305,7 +305,7 @@ const DiscoverSliderEdit = ({
               <ChevronDownIcon className="h-7 w-7 md:h-6 md:w-6" />
             </button>
           </div>
-          <div className="absolute top-4 right-4 flex-1 text-right md:relative md:top-0 md:right-0">
+          <div className="absolute right-4 top-4 flex-1 text-right md:relative md:right-0 md:top-0">
             <Tooltip content={intl.formatMessage(messages.enable)}>
               <div>
                 <SlideCheckbox

src/components/Discover/DiscoverStudio/index.tsx

@@ -45,7 +45,7 @@ const DiscoverMovieStudio = () => {
   return (
     <>
       <PageTitle title={title} />
-      <div className="mt-1 mb-5">
+      <div className="mb-5 mt-1">
         <Header>
           {firstResultData?.studio.logoPath ? (
             <div className="relative mb-6 flex h-24 justify-center sm:h-32">

src/components/Discover/DiscoverTvGenre/index.tsx

@@ -43,7 +43,7 @@ const DiscoverTvGenre = () => {
   return (
     <>
       <PageTitle title={title} />
-      <div className="mt-1 mb-5">
+      <div className="mb-5 mt-1">
         <Header>{title}</Header>
       </div>
       <ListView

src/components/Discover/DiscoverTvKeyword/index.tsx

@@ -49,7 +49,7 @@ const DiscoverTvKeyword = () => {
   return (
     <>
       <PageTitle title={title} />
-      <div className="mt-1 mb-5">
+      <div className="mb-5 mt-1">
         <Header>{title}</Header>
       </div>
       <ListView

src/components/Discover/DiscoverTvLanguage/index.tsx

@@ -52,7 +52,7 @@ const DiscoverTvLanguage = () => {
   return (
     <>
       <PageTitle title={title} />
-      <div className="mt-1 mb-5">
+      <div className="mb-5 mt-1">
         <Header>{title}</Header>
       </div>
       <ListView

src/components/Discover/DiscoverTvUpcoming.tsx

@@ -31,7 +31,7 @@ const DiscoverTvUpcoming = () => {
   return (
     <>
       <PageTitle title={intl.formatMessage(messages.upcomingtv)} />
-      <div className="mt-1 mb-5">
+      <div className="mb-5 mt-1">
         <Header>{intl.formatMessage(messages.upcomingtv)}</Header>
       </div>
       <ListView

src/components/Discover/DiscoverWatchlist/index.tsx

@@ -55,7 +55,7 @@ const DiscoverWatchlist = () => {
       <PageTitle
         title={[title, router.query.userId ? user?.displayName : '']}
       />
-      <div className="mt-1 mb-5">
+      <div className="mb-5 mt-1">
         <Header
           subtext={
             router.query.userId ? (

src/components/Discover/MovieGenreList/index.tsx

@@ -30,7 +30,7 @@ const MovieGenreList = () => {
   return (
     <>
       <PageTitle title={intl.formatMessage(messages.moviegenres)} />
-      <div className="mt-1 mb-5">
+      <div className="mb-5 mt-1">
         <Header>{intl.formatMessage(messages.moviegenres)}</Header>
       </div>
       <ul className="cards-horizontal">

src/components/Discover/Trending.tsx

@@ -36,7 +36,7 @@ const Trending = () => {
   return (
     <>
       <PageTitle title={intl.formatMessage(messages.trending)} />
-      <div className="mt-1 mb-5">
+      <div className="mb-5 mt-1">
         <Header>{intl.formatMessage(messages.trending)}</Header>
       </div>
       <ListView

src/components/Discover/TvGenreList/index.tsx

@@ -30,7 +30,7 @@ const TvGenreList = () => {
   return (
     <>
       <PageTitle title={intl.formatMessage(messages.seriesgenres)} />
-      <div className="mt-1 mb-5">
+      <div className="mb-5 mt-1">
         <Header>{intl.formatMessage(messages.seriesgenres)}</Header>
       </div>
       <ul className="cards-horizontal">

src/components/Discover/Upcoming.tsx

@@ -31,7 +31,7 @@ const UpcomingMovies = () => {
   return (
     <>
       <PageTitle title={intl.formatMessage(messages.upcomingmovies)} />
-      <div className="mt-1 mb-5">
+      <div className="mb-5 mt-1">
         <Header>{intl.formatMessage(messages.upcomingmovies)}</Header>
       </div>
       <ListView

src/components/Discover/index.tsx

@@ -127,7 +127,7 @@ const Discover = () => {
         <>
           {isEditing && (
             <div className="my-6 rounded-lg bg-gray-800">
-              <div className="flex items-center space-x-2 rounded-t-lg border-t border-l border-r border-gray-800 bg-gray-900 p-4 text-lg font-semibold text-gray-400">
+              <div className="flex items-center space-x-2 rounded-t-lg border-l border-r border-t border-gray-800 bg-gray-900 p-4 text-lg font-semibold text-gray-400">
                 <PlusIcon className="w-6" />
                 <span data-testid="create-slider-header">
                   {intl.formatMessage(messages.createnewslider)}
@@ -172,7 +172,7 @@ const Discover = () => {
             leave="transition duration-300"
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-6"
-            className="safe-shift-edit-menu fixed right-0 left-0 z-50 flex flex-col items-center justify-end space-x-0 space-y-2 border-t border-gray-700 bg-gray-800 bg-opacity-80 p-4 backdrop-blur sm:bottom-0 sm:flex-row sm:space-y-0 sm:space-x-3"
+            className="safe-shift-edit-menu fixed left-0 right-0 z-50 flex flex-col items-center justify-end space-x-0 space-y-2 border-t border-gray-700 bg-gray-800 bg-opacity-80 p-4 backdrop-blur sm:bottom-0 sm:flex-row sm:space-x-3 sm:space-y-0"
           >
             <Button
               buttonType="default"

src/components/IssueDetails/IssueComment/index.tsx

@@ -101,7 +101,7 @@ const IssueComment = ({
           {(isActiveUser || hasPermission(Permission.MANAGE_ISSUES)) && (
             <Menu
               as="div"
-              className="absolute top-2 right-1 z-40 inline-block text-left"
+              className="absolute right-1 top-2 z-40 inline-block text-left"
             >
               {({ open }) => (
                 <>

src/components/IssueDetails/index.tsx

@@ -370,7 +370,7 @@ const IssueDetails = () => {
                 </span>
               </div>
             </div>
-            <div className="mt-4 mb-6 flex flex-col space-y-2">
+            <div className="mb-6 mt-4 flex flex-col space-y-2">
               {issueData?.media.mediaUrl && (
                 <Button
                   as="a"
@@ -483,7 +483,7 @@ const IssueDetails = () => {
               />
             ))}
             {otherComments.length === 0 && (
-              <div className="mt-4 mb-10 text-gray-400">
+              <div className="mb-10 mt-4 text-gray-400">
                 <span>{intl.formatMessage(messages.nocomments)}</span>
               </div>
             )}
@@ -636,7 +636,7 @@ const IssueDetails = () => {
               </span>
             </div>
           </div>
-          <div className="mt-4 mb-6 flex flex-col space-y-2">
+          <div className="mb-6 mt-4 flex flex-col space-y-2">
             {issueData?.media.mediaUrl && (
               <Button
                 as="a"

src/components/IssueList/IssueItem/index.tsx

@@ -216,7 +216,7 @@ const IssueItem = ({ issue }: IssueItemProps) => {
             )}
           </div>
         </div>
-        <div className="z-10 mt-4 ml-4 flex w-full flex-col justify-center overflow-hidden pr-4 text-sm sm:ml-2 sm:mt-0 xl:flex-1 xl:pr-0">
+        <div className="z-10 ml-4 mt-4 flex w-full flex-col justify-center overflow-hidden pr-4 text-sm sm:ml-2 sm:mt-0 xl:flex-1 xl:pr-0">
           <div className="card-field">
             <span className="card-field-name">
               {intl.formatMessage(messages.issuestatus)}

src/components/Layout/MobileMenu/index.tsx

@@ -179,7 +179,7 @@ const MobileMenu = ({
         leave="transition duration-500"
         leaveFrom="opacity-100 -translate-y-full"
         leaveTo="opacity-0 translate-y-0"
-        className="absolute top-0 left-0 right-0 flex w-full -translate-y-full flex-col space-y-6 border-t border-gray-600 bg-gray-900 bg-opacity-90 px-6 py-6 font-semibold text-gray-100 backdrop-blur"
+        className="absolute left-0 right-0 top-0 flex w-full -translate-y-full flex-col space-y-6 border-t border-gray-600 bg-gray-900 bg-opacity-90 px-6 py-6 font-semibold text-gray-100 backdrop-blur"
       >
         {filteredLinks.map((link) => {
           const isActive = router.pathname.match(link.activeRegExp);
@@ -249,7 +249,7 @@ const MobileMenu = ({
                   {link.href === '/requests' &&
                     pendingRequestsCount > 0 &&
                     hasPermission(Permission.MANAGE_REQUESTS) && (
-                      <div className="absolute left-3 bottom-3">
+                      <div className="absolute bottom-3 left-3">
                         <Badge
                           className={`bg-gradient-to-br ${
                             router.pathname.match(link.activeRegExp)

src/components/Layout/Sidebar/index.tsx

@@ -188,7 +188,7 @@ const Sidebar = ({
                   </div>
                   <div
                     ref={navRef}
-                    className="flex flex-1 flex-col overflow-y-auto pt-4 pb-8 sm:pb-4"
+                    className="flex flex-1 flex-col overflow-y-auto pb-8 pt-4 sm:pb-4"
                   >
                     <div className="flex flex-shrink-0 items-center px-2">
                       <span className="w-full px-4 text-xl text-gray-50">
@@ -218,13 +218,11 @@ const Sidebar = ({
                             }}
                             role="button"
                             tabIndex={0}
-                            className={`flex items-center rounded-md px-2 py-2 text-base font-medium leading-6 text-white transition duration-150 ease-in-out focus:outline-none
+                            className={`flex items-center rounded-md px-2 py-2 text-base font-medium leading-6 text-white transition duration-150 ease-in-out focus:outline-none ${
-                            ${
                               router.pathname.match(sidebarLink.activeRegExp)
                                 ? 'bg-gradient-to-br from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500'
                                 : 'hover:bg-gray-700 focus:bg-gray-700'
-                            }
+                            } `}
-                          `}
                             data-testid={`${sidebarLink.dataTestId}-mobile`}
                           >
                             {sidebarLink.svgIcon}
@@ -255,7 +253,7 @@ const Sidebar = ({
         </Transition>
       </div>
 
-      <div className="fixed top-0 bottom-0 left-0 z-30 hidden lg:flex lg:flex-shrink-0">
+      <div className="fixed bottom-0 left-0 top-0 z-30 hidden lg:flex lg:flex-shrink-0">
         <div className="sidebar flex w-64 flex-col">
           <div className="flex h-0 flex-1 flex-col">
             <div className="flex flex-1 flex-col overflow-y-auto pb-4">
@@ -279,13 +277,11 @@ const Sidebar = ({
                       key={`desktop-${sidebarLink.messagesKey}`}
                       href={sidebarLink.href}
                       as={sidebarLink.as}
-                      className={`group flex items-center rounded-md px-2 py-2 text-lg font-medium leading-6 text-white transition duration-150 ease-in-out focus:outline-none
+                      className={`group flex items-center rounded-md px-2 py-2 text-lg font-medium leading-6 text-white transition duration-150 ease-in-out focus:outline-none ${
-                              ${
                         router.pathname.match(sidebarLink.activeRegExp)
                           ? 'bg-gradient-to-br from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500'
                           : 'hover:bg-gray-700 focus:bg-gray-700'
-                              }
+                      } `}
-                            `}
                       data-testid={sidebarLink.dataTestId}
                     >
                       {sidebarLink.svgIcon}

src/components/Layout/UserDropdown/MiniQuotaDisplay/index.tsx

@@ -39,7 +39,7 @@ const MiniQuotaDisplay = ({ userId }: MiniQuotaDisplayProps) => {
               {intl.formatMessage(messages.movierequests)}
             </div>
             <div className="flex h-full items-center space-x-2 text-gray-200">
-              {data?.movie.limit ?? 0 > 0 ? (
+              {(data?.movie.limit ?? 0) > 0 ? (
                 <>
                   <ProgressCircle
                     className="h-8 w-8"
@@ -67,7 +67,7 @@ const MiniQuotaDisplay = ({ userId }: MiniQuotaDisplayProps) => {
               {intl.formatMessage(messages.seriesrequests)}
             </div>
             <div className="flex h-full items-center space-x-2 text-gray-200">
-              {data?.tv.limit ?? 0 > 0 ? (
+              {(data?.tv.limit ?? 0) > 0 ? (
                 <>
                   <ProgressCircle
                     className="h-8 w-8"

src/components/Layout/index.tsx

@@ -96,7 +96,7 @@ const Layout = ({ children }: LayoutProps) => {
             WebkitBackdropFilter: isScrolled ? 'blur(5px)' : undefined,
           }}
         >
-          <div className="flex flex-1 items-center justify-between px-4 md:pr-4 md:pl-4">
+          <div className="flex flex-1 items-center justify-between px-4 md:pl-4 md:pr-4">
             <button
               className={`mr-2 hidden text-white sm:block ${
                 isScrolled ? 'opacity-90' : 'opacity-70'

src/components/LoadingBar/index.tsx

@@ -11,7 +11,7 @@ interface BarProps {
 const Bar = ({ progress, isFinished }: BarProps) => {
   return (
     <div
-      className={`duration-400 fixed top-0 left-0 z-50 w-full transition-opacity ease-out ${
+      className={`duration-400 fixed left-0 top-0 z-50 w-full transition-opacity ease-out ${
         isFinished ? 'opacity-0' : 'opacity-100'
       }`}
     >

src/components/Login/AddEmailModal.tsx

@@ -95,7 +95,7 @@ const AddEmailModal: React.FC<AddEmailModalProps> = ({
               <label htmlFor="email" className="text-label">
                 {intl.formatMessage(messages.email)}
               </label>
-              <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
+              <div className="mb-2 mt-1 sm:col-span-2 sm:mt-0">
                 <div className="flex rounded-md shadow-sm">
                   <Field
                     id="email"

src/components/Login/JellyfinLogin.tsx

@@ -113,13 +113,13 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
             <>
               <Form data-form-type="login">
                 <div>
-                  <h2 className="mb-6 -mt-1 text-center text-lg font-bold text-neutral-200">
+                  <h2 className="-mt-1 mb-6 text-center text-lg font-bold text-neutral-200">
                     {intl.formatMessage(messages.loginwithapp, {
                       appName: mediaServerFormatValues.mediaServerName,
                     })}
                   </h2>
 
-                  <div className="mt-1 mb-4">
+                  <div className="mb-4 mt-1">
                     <div className="form-input-field">
                       <Field
                         id="username"
@@ -135,7 +135,7 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
                     )}
                   </div>
 
-                  <div className="mt-1 mb-2">
+                  <div className="mb-2 mt-1">
                     <div className="form-input-field">
                       <SensitiveInput
                         as="field"

src/components/Login/LocalLogin.tsx

@@ -71,13 +71,13 @@ const LocalLogin = ({ revalidate }: LocalLoginProps) => {
           <>
             <Form data-form-type="login">
               <div>
-                <h2 className="mb-6 -mt-1 text-center text-lg font-bold text-neutral-200">
+                <h2 className="-mt-1 mb-6 text-center text-lg font-bold text-neutral-200">
                   {intl.formatMessage(messages.loginwithapp, {
                     appName: settings.currentSettings.applicationTitle,
                   })}
                 </h2>
 
-                <div className="mt-1 mb-4">
+                <div className="mb-4 mt-1">
                   <div className="form-input-field">
                     <Field
                       id="email"
@@ -98,7 +98,7 @@ const LocalLogin = ({ revalidate }: LocalLoginProps) => {
                       <div className="error">{errors.email}</div>
                     )}
                 </div>
-                <div className="mt-1 mb-2">
+                <div className="mb-2 mt-1">
                   <div className="form-input-field">
                     <SensitiveInput
                       as="field"
@@ -132,7 +132,7 @@ const LocalLogin = ({ revalidate }: LocalLoginProps) => {
                   </div>
                 </div>
                 {loginError && (
-                  <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
+                  <div className="mb-2 mt-1 sm:col-span-2 sm:mt-0">
                     <div className="error">{loginError}</div>
                   </div>
                 )}

src/components/Login/PlexLoginButton.tsx

@@ -42,7 +42,7 @@ const PlexLoginButton = ({
         <FormattedMessage
           {...messages.loginwithapp}
           values={{
-            appName: <PlexIcon className="mt-[2px] ml-[0.35em] w-8" />,
+            appName: <PlexIcon className="ml-[0.35em] mt-[2px] w-8" />,
           }}
         >
           {(chunks) => (

src/components/Login/index.tsx

@@ -159,7 +159,7 @@ const Login = () => {
           ) ?? []
         }
       />
-      <div className="absolute top-4 right-4 z-50">
+      <div className="absolute right-4 top-4 z-50">
         <LanguagePicker />
       </div>
       <div className="relative z-40 mt-10 flex flex-col items-center px-4 sm:mx-auto sm:w-full sm:max-w-md">

src/components/ManageSlideOver/index.tsx

@@ -378,7 +378,7 @@ const ManageSlideOver = ({
                           </div>
                         </div>
                         {!!watchData.data.users.length && (
-                          <div className="flex flex-row space-x-2 px-4 pt-3 pb-2">
+                          <div className="flex flex-row space-x-2 px-4 pb-2 pt-3">
                             <span className="shrink-0 font-bold leading-8">
                               {intl.formatMessage(messages.playedby)}
                             </span>
@@ -391,7 +391,7 @@ const ManageSlideOver = ({
                                       : `/users/${user.id}`
                                   }
                                   key={`watch-user-${user.id}`}
-                                  className="z-0 mb-1 -mr-2 shrink-0 hover:z-50"
+                                  className="z-0 -mr-2 mb-1 shrink-0 hover:z-50"
                                 >
                                   <Tooltip
                                     key={`watch-user-${user.id}`}
@@ -540,7 +540,7 @@ const ManageSlideOver = ({
                           </div>
                         </div>
                         {!!watchData.data4k.users.length && (
-                          <div className="flex flex-row space-x-2 px-4 pt-3 pb-2">
+                          <div className="flex flex-row space-x-2 px-4 pb-2 pt-3">
                             <span className="shrink-0 font-bold leading-8">
                               {intl.formatMessage(messages.playedby)}
                             </span>
@@ -553,7 +553,7 @@ const ManageSlideOver = ({
                                       : `/users/${user.id}`
                                   }
                                   key={`watch-user-${user.id}`}
-                                  className="z-0 mb-1 -mr-2 shrink-0 hover:z-50"
+                                  className="z-0 -mr-2 mb-1 shrink-0 hover:z-50"
                                 >
                                   <Tooltip
                                     key={`watch-user-${user.id}`}

src/components/MediaSlider/ShowMoreCard/index.tsx

@@ -48,8 +48,7 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
       tabIndex={0}
     >
       <div
-        className={`relative w-36 transform-gpu cursor-pointer
+        className={`relative w-36 transform-gpu cursor-pointer overflow-hidden rounded-xl text-white shadow-lg ring-1 transition duration-150 ease-in-out sm:w-36 md:w-44 ${
-       overflow-hidden rounded-xl text-white shadow-lg ring-1 transition duration-150 ease-in-out sm:w-36 md:w-44 ${
           isHovered
             ? 'scale-105 bg-gray-600 ring-gray-500'
             : 'scale-100 bg-gray-800 ring-gray-700'

src/components/MovieDetails/MovieCast/index.tsx

@@ -32,7 +32,7 @@ const MovieCast = () => {
   return (
     <>
       <PageTitle title={[intl.formatMessage(messages.fullcast), data.title]} />
-      <div className="mt-1 mb-5">
+      <div className="mb-5 mt-1">
         <Header
           subtext={
             <Link href={`/movie/${data.id}`} className="hover:underline">

src/components/MovieDetails/MovieCrew/index.tsx

@@ -32,7 +32,7 @@ const MovieCrew = () => {
   return (
     <>
       <PageTitle title={[intl.formatMessage(messages.fullcrew), data.title]} />
-      <div className="mt-1 mb-5">
+      <div className="mb-5 mt-1">
         <Header
           subtext={
             <Link href={`/movie/${data.id}`} className="hover:underline">

src/components/MovieDetails/MovieRecommendations.tsx

@@ -42,7 +42,7 @@ const MovieRecommendations = () => {
       <PageTitle
         title={[intl.formatMessage(messages.recommendations), movieData?.title]}
       />
-      <div className="mt-1 mb-5">
+      <div className="mb-5 mt-1">
         <Header
           subtext={
             <Link href={`/movie/${movieData?.id}`} className="hover:underline">

src/components/MovieDetails/MovieSimilar.tsx

@@ -40,7 +40,7 @@ const MovieSimilar = () => {
       <PageTitle
         title={[intl.formatMessage(messages.similar), movieData?.title]}
       />
-      <div className="mt-1 mb-5">
+      <div className="mb-5 mt-1">
         <Header
           subtext={
             <Link href={`/movie/${movieData?.id}`} className="hover:underline">

src/components/PersonCard/index.tsx

@@ -47,7 +47,7 @@ const PersonCard = ({
       >
         <div style={{ paddingBottom: '150%' }}>
           <div className="absolute inset-0 flex h-full w-full flex-col items-center p-2">
-            <div className="relative mt-2 mb-4 flex h-1/2 w-full justify-center">
+            <div className="relative mb-4 mt-2 flex h-1/2 w-full justify-center">
               {profilePath ? (
                 <div className="relative h-full w-3/4 overflow-hidden rounded-full ring-1 ring-gray-700">
                   <CachedImage

src/components/PersonDetails/index.tsx

@@ -241,7 +241,7 @@ const PersonDetails = () => {
     <>
       <PageTitle title={data.name} />
       {(sortedCrew || sortedCast) && (
-        <div className="absolute top-0 left-0 right-0 z-0 h-96">
+        <div className="absolute left-0 right-0 top-0 z-0 h-96">
           <ImageFader
             isDarker
             backgroundImages={[...(sortedCast ?? []), ...(sortedCrew ?? [])]
@@ -255,7 +255,7 @@ const PersonDetails = () => {
         </div>
       )}
       <div
-        className={`relative z-10 mt-4 mb-8 flex flex-col items-center lg:flex-row ${
+        className={`relative z-10 mb-8 mt-4 flex flex-col items-center lg:flex-row ${
           data.biography ? 'lg:items-start' : ''
         }`}
       >
@@ -277,7 +277,7 @@ const PersonDetails = () => {
               {mediaTypePicker}
             </div>
           </div>
-          <div className="mt-1 mb-2 space-y-1 text-xs text-white sm:text-sm lg:text-base">
+          <div className="mb-2 mt-1 space-y-1 text-xs text-white sm:text-sm lg:text-base">
             <div>{personAttributes.join(' | ')}</div>
             {(data.alsoKnownAs ?? []).length > 0 && (
               <div>

src/components/RequestBlock/index.tsx

@@ -285,7 +285,7 @@ const RequestBlock = ({ request, onUpdate }: RequestBlockProps) => {
         )}
         {(server || profile || rootFolder || languageProfile) && (
           <>
-            <div className="mt-4 mb-1 text-sm">
+            <div className="mb-1 mt-4 text-sm">
               {intl.formatMessage(messages.requestoverrides)}
             </div>
             <ul className="divide-y divide-gray-700 rounded-md bg-gray-800 px-2 text-xs">

src/components/RequestButton/index.tsx

@@ -79,15 +79,16 @@ const RequestButton = ({
   // Current user's pending request, or the first pending request
   const activeRequest = useMemo(() => {
     return activeRequests && activeRequests.length > 0
-      ? activeRequests.find((request) => request.requestedBy.id === user?.id) ??
+      ? (activeRequests.find(
-          activeRequests[0]
+          (request) => request.requestedBy.id === user?.id
+        ) ?? activeRequests[0])
       : undefined;
   }, [activeRequests, user]);
   const active4kRequest = useMemo(() => {
     return active4kRequests && active4kRequests.length > 0
-      ? active4kRequests.find(
+      ? (active4kRequests.find(
           (request) => request.requestedBy.id === user?.id
-        ) ?? active4kRequests[0]
+        ) ?? active4kRequests[0])
       : undefined;
   }, [active4kRequests, user]);
 

src/components/RequestList/RequestItem/index.tsx

@@ -115,7 +115,7 @@ const RequestItemError = ({
             </>
           )}
         </div>
-        <div className="mt-4 ml-4 flex w-full flex-col justify-center overflow-hidden pr-4 text-sm sm:ml-2 sm:mt-0 xl:flex-1 xl:pr-0">
+        <div className="ml-4 mt-4 flex w-full flex-col justify-center overflow-hidden pr-4 text-sm sm:ml-2 sm:mt-0 xl:flex-1 xl:pr-0">
           {requestData && (
             <>
               <div className="card-field">
@@ -486,7 +486,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
               )}
             </div>
           </div>
-          <div className="z-10 mt-4 ml-4 flex w-full flex-col justify-center gap-1 overflow-hidden pr-4 text-sm sm:ml-2 sm:mt-0 xl:flex-1 xl:pr-0">
+          <div className="z-10 ml-4 mt-4 flex w-full flex-col justify-center gap-1 overflow-hidden pr-4 text-sm sm:ml-2 sm:mt-0 xl:flex-1 xl:pr-0">
             <div className="card-field">
               <span className="card-field-name">
                 {intl.formatMessage(globalMessages.status)}

src/components/RequestModal/AdvancedRequester/index.tsx

@@ -308,7 +308,7 @@ const AdvancedRequester = ({
 
   return (
     <>
-      <div className="mt-4 mb-2 flex items-center text-lg font-semibold">
+      <div className="mb-2 mt-4 flex items-center text-lg font-semibold">
         {intl.formatMessage(messages.advancedoptions)}
       </div>
       <div className="rounded-md">

src/components/ResetPassword/RequestResetLink.tsx

@@ -52,7 +52,7 @@ const ResetPassword = () => {
           '/images/rotate6.jpg',
         ]}
       />
-      <div className="absolute top-4 right-4 z-50">
+      <div className="absolute right-4 top-4 z-50">
         <LanguagePicker />
       </div>
       <div className="relative z-40 mt-10 flex flex-col items-center px-4 sm:mx-auto sm:w-full sm:max-w-md">
@@ -112,7 +112,7 @@ const ResetPassword = () => {
                         >
                           {intl.formatMessage(messages.email)}
                         </label>
-                        <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
+                        <div className="mb-2 mt-1 sm:col-span-2 sm:mt-0">
                           <div className="form-input-field">
                             <Field
                               id="email"

src/components/ResetPassword/index.tsx

@@ -62,7 +62,7 @@ const ResetPassword = () => {
           '/images/rotate6.jpg',
         ]}
       />
-      <div className="absolute top-4 right-4 z-50">
+      <div className="absolute right-4 top-4 z-50">
         <LanguagePicker />
       </div>
       <div className="relative z-40 mt-10 flex flex-col items-center px-4 sm:mx-auto sm:w-full sm:max-w-md">
@@ -122,7 +122,7 @@ const ResetPassword = () => {
                         >
                           {intl.formatMessage(messages.password)}
                         </label>
-                        <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
+                        <div className="mb-2 mt-1 sm:col-span-2 sm:mt-0">
                           <div className="form-input-field">
                             <SensitiveInput
                               as="field"
@@ -145,7 +145,7 @@ const ResetPassword = () => {
                         >
                           {intl.formatMessage(messages.confirmpassword)}
                         </label>
-                        <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
+                        <div className="mb-2 mt-1 sm:col-span-2 sm:mt-0">
                           <div className="form-input-field">
                             <SensitiveInput
                               as="field"

src/components/Search/index.tsx

@@ -44,7 +44,7 @@ const Search = () => {
   return (
     <>
       <PageTitle title={intl.formatMessage(messages.search)} />
-      <div className="mt-1 mb-5">
+      <div className="mb-5 mt-1">
         <Header>{intl.formatMessage(messages.searchresults)}</Header>
       </div>
       <ListView

src/components/Selector/index.tsx

@@ -476,7 +476,7 @@ export const WatchProviderSelector = ({
                       />
                     </div>
                     {isActive && (
-                      <div className="pointer-events-none absolute -top-1 -left-1 flex items-center justify-center text-indigo-100 opacity-90">
+                      <div className="pointer-events-none absolute -left-1 -top-1 flex items-center justify-center text-indigo-100 opacity-90">
                         <CheckCircleIcon className="h-6 w-6" />
                       </div>
                     )}
@@ -519,7 +519,7 @@ export const WatchProviderSelector = ({
                         />
                       </div>
                       {isActive && (
-                        <div className="pointer-events-none absolute -top-1 -left-1 flex items-center justify-center text-indigo-100 opacity-90">
+                        <div className="pointer-events-none absolute -left-1 -top-1 flex items-center justify-center text-indigo-100 opacity-90">
                           <CheckCircleIcon className="h-6 w-6" />
                         </div>
                       )}

src/components/Settings/LibraryItem.tsx

@@ -9,7 +9,7 @@ interface LibraryItemProps {
 const LibraryItem = ({ isEnabled, name, onToggle }: LibraryItemProps) => {
   return (
     <li className="col-span-1 flex rounded-md shadow-sm">
-      <div className="flex flex-1 items-center justify-between truncate rounded-md border-t border-b border-r border-gray-700 bg-gray-600">
+      <div className="flex flex-1 items-center justify-between truncate rounded-md border-b border-r border-t border-gray-700 bg-gray-600">
         <div className="flex-1 cursor-default truncate px-4 py-6 text-sm leading-5">
           {name}
         </div>

src/components/Settings/Notifications/NotificationsNtfy/index.tsx

@@ -256,7 +256,7 @@ const NotificationsNtfy = () => {
               </div>
             </div>
             {values.authMethodUsernamePassword && (
-              <div className="mr-2 ml-4">
+              <div className="ml-4 mr-2">
                 <div className="form-row">
                   <label htmlFor="username" className="text-label">
                     {intl.formatMessage(messages.username)}
@@ -302,7 +302,7 @@ const NotificationsNtfy = () => {
               </div>
             </div>
             {values.authMethodToken && (
-              <div className="form-row mr-2 ml-4">
+              <div className="form-row ml-4 mr-2">
                 <label htmlFor="token" className="text-label">
                   {intl.formatMessage(messages.token)}
                 </label>

src/components/Settings/RadarrModal/index.tsx

@@ -521,7 +521,9 @@ const RadarrModal = ({ onClose, radarr, onSave }: RadarrModalProps) => {
                               ? intl.formatMessage(
                                   messages.testFirstQualityProfiles
                                 )
-                            : intl.formatMessage(messages.selectQualityProfile)}
+                              : intl.formatMessage(
+                                  messages.selectQualityProfile
+                                )}
                         </option>
                         {testResponse.profiles.length > 0 &&
                           testResponse.profiles.map((profile) => (
@@ -558,7 +560,9 @@ const RadarrModal = ({ onClose, radarr, onSave }: RadarrModalProps) => {
                           {isTesting
                             ? intl.formatMessage(messages.loadingrootfolders)
                             : !isValidated
-                            ? intl.formatMessage(messages.testFirstRootFolders)
+                              ? intl.formatMessage(
+                                  messages.testFirstRootFolders
+                                )
                               : intl.formatMessage(messages.selectRootFolder)}
                         </option>
                         {testResponse.rootFolders.length > 0 &&

src/components/Settings/SettingsAbout/Releases/index.tsx

@@ -61,7 +61,7 @@ const Release = ({ currentVersion, release, isLatest }: ReleaseProps) => {
   const [isModalOpen, setModalOpen] = useState(false);
 
   return (
-    <div className="flex w-full flex-col space-y-3 rounded-md bg-gray-800 px-4 py-2 shadow-md ring-1 ring-gray-700 sm:flex-row sm:space-y-0 sm:space-x-3">
+    <div className="flex w-full flex-col space-y-3 rounded-md bg-gray-800 px-4 py-2 shadow-md ring-1 ring-gray-700 sm:flex-row sm:space-x-3 sm:space-y-0">
       <Transition
         as={Fragment}
         enter="transition-opacity duration-300"

src/components/Settings/SettingsAbout/index.tsx

@@ -69,7 +69,7 @@ const SettingsAbout = () => {
             <p className="text-sm leading-5 text-gray-100">
               {intl.formatMessage(messages.betawarning)}
             </p>
-            <p className="mt-3 text-sm leading-5 md:mt-0 md:ml-6">
+            <p className="mt-3 text-sm leading-5 md:ml-6 md:mt-0">
               <a
                 href="http://github.com/seerr-team/seerr"
                 className="whitespace-nowrap font-medium text-gray-100 transition duration-150 ease-in-out hover:text-white"

src/components/Settings/SettingsJellyfin.tsx

@@ -308,7 +308,7 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
           ))}
         </ul>
       </div>
-      <div className="mt-10 mb-6">
+      <div className="mb-6 mt-10">
         <h3 className="heading">
           <FormattedMessage {...messages.manualscanJellyfin} />
         </h3>
@@ -424,7 +424,7 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
           {intl.formatMessage(messages.scanbackground)}
         </div>
       )}
-      <div className="mt-10 mb-6">
+      <div className="mb-6 mt-10">
         <h3 className="heading">
           {intl.formatMessage(
             messages.jellyfinSettings,

src/components/Settings/SettingsJobsCache/index.tsx

@@ -364,7 +364,7 @@ const SettingsJobs = () => {
                 <label className="text-label">
                   {intl.formatMessage(messages.editJobScheduleCurrent)}
                 </label>
-                <div className="form-input-area mt-2 mb-1">
+                <div className="form-input-area mb-1 mt-2">
                   <div>
                     {jobModalState.job &&
                       cronstrue.toString(jobModalState.job.cronSchedule, {