fixed browse and tailwindcss style

resources/js/components/upload/ScreenshotUploader.jsx

@@ -77,7 +77,7 @@ export default function ScreenshotUploader({
           <p className="text-sm text-white/85">Drop screenshots here or click to browse</p>
           <button
             type="button"
-            className="mt-2 rounded-md border border-white/20 bg-white/10 px-3 py-1.5 text-xs text-white/85 transition hover:bg-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-300/70"
+            className="btn-secondary mt-2 text-xs"
             onClick={() => inputRef.current?.click()}
           >
             Browse screenshots
@@ -118,8 +118,16 @@ export default function ScreenshotUploader({
                   transition={quickTransition}
                   className="rounded-lg border border-white/50 bg-white/5 p-2 text-xs"
                 >
-                  <div className="overflow-hidden rounded-md border border-white/50 bg-black/25">
-                    <img src={item.url} alt={`Screenshot ${index + 1}`} className="h-24 w-full object-cover" />
+                  <div className="flex h-40 w-40 items-center justify-center overflow-hidden rounded-md border border-white/50 bg-black/25">
+                    <img
+                      src={item.url}
+                      alt={`Screenshot ${index + 1}`}
+                      className="max-h-full max-w-full object-contain"
+                      loading="lazy"
+                      decoding="async"
+                      width="160"
+                      height="160"
+                    />
                   </div>
                   <div className="mt-2 truncate text-white/90">{item.file.name}</div>
                   <div className="mt-1 text-white/55">{Math.round(item.file.size / 1024)} KB</div>