🎨 Style improve

app/detail/[hash64]/layout.tsx

@@ -12,7 +12,7 @@ export default function DetailLayout({
 }) {
   return (
     <section className="flex flex-col justify-center gap-4 px-3 py-3 md:py-8">
-      <div className="flex items-center max-w-xl mb-4">
+      <div className="flex items-center mb-4">
         <Link
           className="mb-[-2px] mr-2 md:mr-4 leading-none text-[50px] md:text-[60px]"
           href="/"

app/search/page.tsx

@@ -139,7 +139,7 @@ export default async function SearchPage({
   const cost_time = Date.now() - start_time;
 
   return (
-    <div className="w-full max-w-3xl">
+    <div className="w-full md:max-w-3xl lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl">
       <div className="flex items-center mb-7">
         <Link
           className="mb-[-2px] mr-2 md:mr-4 leading-none text-[50px] md:text-[60px]"

components/DetailContent.tsx

@@ -20,7 +20,7 @@ export const DetailContent = ({ data }: { data: TorrentItemProps }) => {
   return (
     <>
       {/* Torrent name */}
-      <h1 className="text-2xl">{data.name}</h1>
+      <h1 className="text-2xl break-words">{data.name}</h1>
 
       {/* Torrent details */}
       <div className="flex gap-x-2 text-xs md:text-sm text-gray-500">

components/FileList.tsx

@@ -133,7 +133,7 @@ function FileItem({
       // data-size={file.type === "file" ? file.size : null}
       // data-type={file.type}
     >
-      <div className="file-item flex items-center text-xs md:text-sm">
+      <div className="file-item flex items-center text-xs md:text-sm md:leading-[1rem]">
         <FileTypeIcon
           className="dark:brightness-90"
           extension={file.type === "folder" ? "folder" : file.extension}

components/SearchResultsItem.tsx

@@ -35,16 +35,7 @@ export default function SearchResultsItem({
     ...item,
     name: item.name,
     url: `/detail/${hexToBase64(item.hash)}`,
-    files: item.single_file
-      ? [
-          {
-            index: 0,
-            path: item.name,
-            size: item.size,
-            extension: item.name.split(".").pop(),
-          },
-        ]
-      : item.files,
+    files: item.files,
   };
 
   const t = useTranslations();

styles/file-type-icon/icons.css

@@ -1,15 +1,16 @@
 .file-type-icon {
   display: inline-block;
   width: 1em;
-  height: 1em;
+  height: 18px;
   font-size: 1.3em;
   flex-shrink: 0;
   align-self: flex-start;
   vertical-align: middle;
   margin-right: 4px;
   background-image: var(--icon);
   background-repeat: no-repeat;
-  background-size: 100% 100%;
+  background-size: 100% auto;
+  background-position: center;
 }
 
 :root {