💄 chore: Optimize some styles

web/src/components/about.tsx

@@ -50,7 +50,8 @@ export default function About() {
         <CardHeader>
           <CardTitle className="text-white">About This Project</CardTitle>
           <CardDescription className="text-white">
-            A simple telegram file downloader.
+            A self-hosted Telegram file downloader for continuous, stable, and
+            unattended downloads.
           </CardDescription>
         </CardHeader>
         <CardContent className="relative">

web/src/components/file-extra.tsx

@@ -33,8 +33,8 @@ function FileName({ file }: { file: TelegramFile }) {
   return (
     <SpoiledWrapper hasSensitiveContent={file.hasSensitiveContent}>
       <p className="flex items-center gap-2">
-        <Mountain className="h-4 w-4" />
+        <Mountain className="h-4 w-4 flex-shrink-0" />
-        <span className="rounded px-1 text-sm hover:bg-gray-100 dark:hover:bg-gray-800">
+        <span className="overflow-hidden truncate text-ellipsis rounded px-1 text-sm hover:bg-gray-100 dark:hover:bg-gray-800">
           {file.fileName}
         </span>
       </p>
@@ -109,13 +109,14 @@ function FilePath({ file }: { file: TelegramFile }) {
 }
 
 function FileTime({ file }: { file: TelegramFile }) {
+  const isMobile = useIsMobile();
   return (
     <div className="flex items-center gap-2">
       <Tooltip>
         <TooltipTrigger asChild>
           <p className="flex items-center gap-2">
-            <Clock className="h-4 w-4" />
+            <Clock className="h-4 w-4 flex-shrink-0" />
-            <span className="rounded px-1 text-sm text-muted-foreground hover:bg-gray-100 dark:hover:bg-gray-800">
+            <span className="rounded px-1 text-sm hover:bg-gray-100 dark:hover:bg-gray-800">
               {formatDistanceToNow(new Date(file.date * 1000), {
                 addSuffix: true,
               })}
@@ -128,7 +129,7 @@ function FileTime({ file }: { file: TelegramFile }) {
           </div>
         </TooltipContent>
       </Tooltip>
-      {file.completionDate && (
+      {!isMobile && file.completionDate && (
         <Tooltip>
           <TooltipTrigger asChild>
             <p className="flex items-center gap-2">

web/src/components/file-filters.tsx

@@ -129,7 +129,7 @@ export function FileFilters({
   }, [search, handleSearchChange]);
 
   return (
-    <div className="mb-6 flex flex-col justify-between md:flex-row">
+    <div className="mb-6 flex flex-col flex-wrap gap-2 justify-between md:flex-row">
       <div className="grid grid-cols-3 gap-4 md:flex md:flex-row">
         <div className="relative col-span-3">
           <Input

web/src/components/file-statistics.tsx

@@ -235,7 +235,7 @@ const FileStatistics: React.FC<FileStatisticsProps> = ({ telegramId }) => {
 
       <div className="flex-1 rounded-lg bg-white p-4 shadow-md dark:bg-gray-900">
         <div className="flex items-center space-x-3 border-gray-200 dark:border-gray-700">
-          <h3 className="text-md flex items-center space-x-2 font-semibold text-gray-700 dark:text-gray-200">
+          <h3 className="text-md text-nowrap flex items-center space-x-2 font-semibold text-gray-700 dark:text-gray-200">
             <Clock className="h-5 w-5 text-yellow-500" />
             <span>Speed Statistics</span>
             <span className="text-sm font-medium text-gray-500 dark:text-gray-400">

web/src/components/file-status.tsx

@@ -12,6 +12,7 @@ import {
   Pause,
   XCircle,
 } from "lucide-react";
+import useIsMobile from "@/hooks/use-is-mobile";
 
 export const DOWNLOAD_STATUS = {
   idle: {
@@ -80,6 +81,7 @@ export default function FileStatus({
     },
     exit: { opacity: 0, scale: 0.9, transition: { duration: 0.2 } },
   };
+  const isMobile = useIsMobile();
 
   return (
     <div
@@ -99,6 +101,7 @@ export default function FileStatus({
                 className={cn(
                   "text-xs hover:bg-gray-200",
                   DOWNLOAD_STATUS[file.downloadStatus].className,
+                  isMobile && "shadow-none",
                 )}
               >
                 {DOWNLOAD_STATUS[file.downloadStatus].text}

web/src/components/header.tsx

@@ -47,7 +47,7 @@ export function Header() {
   return (
     <Card className="mb-6">
       <CardContent className="p-4">
-        <div className="relative flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
+        <div className="relative flex flex-col flex-wrap items-start justify-between gap-4 md:flex-row md:items-center">
           <div className="flex w-full flex-1 flex-col gap-4 md:flex-row md:items-center">
             <Link href={"/"} className="hidden md:inline-flex">
               <TelegramIcon className="h-6 w-6" />

web/src/components/proxy-ping.tsx

@@ -30,7 +30,9 @@ export default function ProxyPing({ accountId }: { accountId: string }) {
           >
             <ChevronsLeftRightEllipsis className="h-4 w-4 text-gray-500" />
             {isLoading && (
-              <div className="h-6 w-16 animate-pulse rounded bg-gray-200 dark:bg-gray-700"></div>
+              <div className="h-6 w-14 animate-pulse rounded bg-gray-200 dark:bg-gray-700">
+                testing
+              </div>
             )}
             {!isLoading && error && <span>Failed</span>}
             {!isLoading && data && (

web/src/components/settings-dialog.tsx

@@ -47,7 +47,7 @@ export const SettingsDialog: React.FC = () => {
           defaultValue="general"
           className="mt-3 flex h-full flex-col overflow-hidden"
         >
-          <TabsList className="justify-start">
+          <TabsList className="justify-start overflow-auto">
             <TabsTrigger value="general">General</TabsTrigger>
             <TabsTrigger value="statistics">Statistics</TabsTrigger>
             <TabsTrigger value="proxys">Proxys</TabsTrigger>

web/src/components/ui/toaster.tsx

@@ -9,12 +9,14 @@ import {
   ToastTitle,
   ToastViewport,
 } from "@/components/ui/toast";
+import useIsMobile from "@/hooks/use-is-mobile";
 
 export function Toaster() {
   const { toasts } = useToast();
+  const isMobile = useIsMobile();
 
   return (
-    <ToastProvider>
+    <ToastProvider duration={isMobile ? 1000 : 5000}>
       {toasts.map(function ({ id, title, description, action, ...props }) {
         return (
           <Toast key={id} {...props}>