Tweak footer

crates/librqbit/webui/src/components/Footer.tsx

@@ -2,19 +2,23 @@ import { formatBytes } from "../helper/formatBytes";
 import { formatSecondsToTime } from "../helper/formatSecondsToTime";
 import { useStatsStore } from "../stores/statsStore";
 
+const FooterPiece: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <div className="p-1">{children}</div>;
+};
+
 export const Footer: React.FC<{}> = () => {
   let stats = useStatsStore((stats) => stats.stats);
   return (
-    <div className="sticky bottom-0 bg-white/10 dark:text-gray-200 backdrop-blur text-nowrap text-xs font-medium text-gray-500 flex p-2 gap-x-5 justify-evenly flex-wrap">
+    <div className="sticky bottom-0 bg-white/10 dark:text-gray-200 backdrop-blur text-nowrap text-xs font-medium text-gray-500 flex gap-x-1 lg:gap-x-5 justify-evenly flex-wrap">
-      <div>
+      <FooterPiece>
         ↓ {stats.download_speed.human_readable} (
         {formatBytes(stats.fetched_bytes)})
-      </div>
+      </FooterPiece>
-      <div>
+      <FooterPiece>
         ↑ {stats.upload_speed.human_readable} (
         {formatBytes(stats.uploaded_bytes)})
-      </div>
+      </FooterPiece>
-      <div>up {formatSecondsToTime(stats.uptime_seconds)}</div>
+      <FooterPiece>up {formatSecondsToTime(stats.uptime_seconds)}</FooterPiece>
     </div>
   );
 };

crates/librqbit/webui/src/components/TorrentRow.tsx

@@ -61,8 +61,8 @@ export const TorrentRow: React.FC<{
         detailsResponse?.files
           .map((f, id) => ({ f, id }))
           .filter(({ f }) => f.included)
-          .map(({ id }) => id) ?? [],
+          .map(({ id }) => id) ?? []
-      ),
+      )
     );
   }, [detailsResponse]);
 
@@ -87,7 +87,7 @@ export const TorrentRow: React.FC<{
             text: "Error configuring torrent",
             details: e as ErrorDetails,
           });
-        },
+        }
       )
       .finally(() => setSavingSelectedFiles(false));
   };
@@ -104,7 +104,7 @@ export const TorrentRow: React.FC<{
           {detailsResponse && (
             <div className="flex items-center gap-2">
               <div className="md:hidden">{statusIcon("w-5 h-5")}</div>
-              <div className="text-left text-lg text-gray-900 text-ellipsis break-all dark:text-slate-200">
+              <div className="text-left text-sm lg:text-lg text-gray-900 text-ellipsis break-all dark:text-slate-200">
                 {torrentDisplayName(detailsResponse)}
               </div>
             </div>

crates/librqbit/webui/src/main.tsx

@@ -13,7 +13,7 @@ const RootWithVersion = () => {
       API.getVersion().then(
         (version) => {
           setVersion(version);
-          const title = `rqbit web UI - v${version}`;
+          const title = `rqbit web - v${version}`;
           document.title = title;
           return 10000;
         },
@@ -26,7 +26,7 @@ const RootWithVersion = () => {
 
   return (
     <APIContext.Provider value={API}>
-      <RqbitWebUI title="rqbit web UI" version={version} />
+      <RqbitWebUI title="rqbit" version={version} />
     </APIContext.Provider>
   );
 };