Change classNames "status-check" to use only Tailwind

src/features/report/components/status-check-box.tsx

@@ -1,12 +1,13 @@
+import clsx from 'clsx';
 import noop from 'lodash/noop';
 import React, { Suspense } from 'react';
 
 import { toggleStatusReport } from 'soapbox/actions/reports';
 import StatusContent from 'soapbox/components/status-content';
 import { Toggle } from 'soapbox/components/ui';
+import { MediaGallery, Video, Audio } from 'soapbox/features/ui/util/async-components';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
-import { MediaGallery, Video, Audio } from '../../ui/util/async-components';
 
 interface IStatusCheckBox {
   id: string;
@@ -20,6 +21,8 @@ const StatusCheckBox: React.FC<IStatusCheckBox> = ({ id, disabled }) => {
 
   const onToggle: React.ChangeEventHandler<HTMLInputElement> = (e) => dispatch(toggleStatusReport(id, e.target.checked));
 
+  const mediaType = status?.media_attachments.get(0)?.type;
+
   if (!status || status.reblog) {
     return null;
   }
@@ -70,13 +73,17 @@ const StatusCheckBox: React.FC<IStatusCheckBox> = ({ id, disabled }) => {
   }
 
   return (
-    <div className='status-check-box'>
-      <div className='status-check-box__status'>
+    <div className='flex items-center justify-between'>
+      <div className='py-2'>
         <StatusContent status={status} />
-        <Suspense>{media}</Suspense>
+        <Suspense>
+          <div className={clsx('max-w-[250px]', { 'mt-2': mediaType === 'audio' || mediaType === 'video' })}>
+            {media}
+          </div>
+        </Suspense>
       </div>
 
-      <div className='status-check-box-toggle'>
+      <div className='flex flex-[0_0_auto] items-center justify-center p-2.5'>
         <Toggle checked={checked} onChange={onToggle} disabled={disabled} />
       </div>
     </div>