fix(dashboard): image alignment

src/app/dashboard/layout.tsx

@@ -27,7 +27,7 @@ export default async function DashboardLayout({ children }: Props) {
         libraries={libraries}
         isUsersPageActive={settings.features.isUsersPageActive}
       />
-      <CardWrapper className='my-3 lg:min-h-[560px] 2xl:min-h-[648px]'>
+      <CardWrapper className='my-3 lg:min-h-[585px] 2xl:min-h-[648px]'>
         {children}
       </CardWrapper>
       <PeriodSelect settings={settings} />

src/app/dashboard/loading.tsx

@@ -30,9 +30,9 @@ export default function Loading() {
 
 function ListItem() {
   return (
-    <li className='flex items-center gap-3 last:hidden lg:last:flex'>
-      <div className='skeleton aspect-[2/3] w-20 flex-shrink-0 rounded-none 2xl:w-24'></div>
-      <div className='w-full'>
+    <li className='flex gap-3 last:hidden lg:last:flex 2xl:items-center'>
+      <div className='skeleton aspect-[2/3] w-20 flex-shrink-0 rounded-none sm:w-[5.35rem] 2xl:w-24'></div>
+      <div className='mt-3 w-full 2xl:mt-0'>
         <h3 className='skeleton mb-2 w-2/3 sm:w-1/3'></h3>
         <ul className='flex flex-wrap items-center gap-2 text-xs italic sm:gap-3 sm:text-base'>
           <li className='icon-stat-wrapper icon-stat-wrapper icon-stat-wrapper--clean'>

src/app/settings/connection/page.tsx

@@ -3,7 +3,7 @@ import { Metadata } from 'next'
 import ConnectionSettingsForm from './_components/ConnectionSettingsForm'
 
 export const metadata: Metadata = {
-  title: 'Connection Settings',
+  title: 'Connection settings',
 }
 
 export default async function ConnectionSettingsPage() {

src/app/settings/features/page.tsx

@@ -4,7 +4,7 @@ import { Metadata } from 'next'
 import FeaturesSettingsForm from './_components/FeaturesSettingsForm'
 
 export const metadata: Metadata = {
-  title: 'Features Settings',
+  title: 'Features settings',
 }
 
 export default async function FeaturesSettingsPage() {

src/components/MediaItem/MediaItem.tsx

@@ -51,22 +51,23 @@ export default function MediaItem({
   return (
     <motion.li
       key={dataKey}
-      className={clsx('flex items-center gap-3', i > 4 && 'hidden lg:flex')}
+      className={clsx('flex gap-3 2xl:items-center', i > 4 && 'hidden lg:flex')}
       variants={slideDown}
       initial='hidden'
       animate='show'
       transition={{ delay: i * 0.075 }}
     >
-      <div className='relative aspect-[2/3] w-[4.5rem] flex-shrink-0 sm:w-20 2xl:w-24'>
+      <div className='w-20 flex-shrink-0 sm:w-[5.35rem] 2xl:w-24'>
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
-          className='img-w-fallback h-full w-full object-cover object-top'
+          className='img-w-fallback aspect-[2/3] w-full object-cover object-top'
           alt={
             type === 'users' ? data.user + ' avatar' : data.title + ' poster'
           }
           src={posterSrc}
         />
       </div>
+
       <div className='overflow-hidden' ref={titleContainerRef}>
         <MediaItemTitle
           i={i}

src/styles/globals.css

@@ -211,6 +211,8 @@
   }
 
   .img-w-fallback {
+    @apply relative;
+
     &::before {
       @apply absolute inset-0 bg-neutral-800 content-[''];
     }

src/utils/fetchOverseerr.ts

@@ -65,7 +65,7 @@ export async function fetchOverseerrUserId(
   plexId: string,
 ): Promise<number | null> {
   const users = await fetchOverseerr<OverseerrResponse<User[]>>('user')
-  const user = users?.results.find((user) => String(user.plexId) === plexId)
+  const user = users?.results?.find((user) => String(user.plexId) === plexId)
 
   return user ? user.id : null
 }