ui/AdminsPage.tsx

@@ -48,14 +48,18 @@ export function AdminsPage(props: { sessionId: string | null }) {
 
       {getAdmins.data?.length
         ? (
-          <ul className="my-4 flex flex-col gap-2">
+          <ul className="flex flex-col gap-2">
             {getAdmins.data.map((admin) => (
               <AdminListItem key={admin.id} admin={admin} sessionId={sessionId} />
             ))}
           </ul>
         )
         : getAdmins.data?.length === 0
-        ? <p>No admins</p>
+        ? (
+          <li className="flex flex-col gap-2 rounded-md bg-zinc-100 dark:bg-zinc-800 p-2">
+            <p key="no-admins" className="text-center text-gray-500">No admins.</p>
+          </li>
+        )
         : getAdmins.error
         ? <p className="alert">Loading admins failed</p>
         : <div className="spinner self-center" />}

ui/QueuePage.tsx

@@ -15,36 +15,43 @@ export function QueuePage() {
   return (
     <FlipMove
       typeName={"ul"}
-      className="flex flex-col items-stretch gap-2 p-2 bg-zinc-200 dark:bg-zinc-800 rounded-xl"
+      className="flex flex-col items-stretch gap-2 p-2 bg-zinc-200 dark:bg-zinc-800 rounded-md"
       enterAnimation="fade"
       leaveAnimation="fade"
     >
-      {getJobs.data?.map((job) => (
+      {getJobs.data && getJobs.data.length === 0
+        ? <li key="no-jobs" className="text-center text-gray-500">Queue is empty.</li>
+        : (
+          getJobs.data?.map((job) => (
             <li
-          className="flex items-baseline gap-2 bg-zinc-100 dark:bg-zinc-700 px-2 py-1 rounded-xl"
+              className="flex items-baseline gap-2 bg-zinc-100 dark:bg-zinc-700 px-2 py-1 rounded-md"
               key={job.id.join("/")}
             >
-          <span className="">
+              <span className="">{job.place}.</span>
-            {job.place}.
-          </span>
               <span>{getFlagEmoji(job.state.from.language_code)}</span>
               <strong>{job.state.from.first_name} {job.state.from.last_name}</strong>
               {job.state.from.username
                 ? (
-              <a className="link" href={`https://t.me/${job.state.from.username}`} target="_blank">
+                  <a
+                    className="link"
+                    href={`https://t.me/${job.state.from.username}`}
+                    target="_blank"
+                  >
                     @{job.state.from.username}
                   </a>
                 )
                 : null}
               <span className="flex-grow self-center h-full">
-            {job.state.progress != null &&
+                {job.state.progress != null && (
-              <Progress className="w-full h-full" value={job.state.progress} />}
+                  <Progress className="w-full h-full" value={job.state.progress} />
+                )}
               </span>
               <span className="text-sm text-zinc-500 dark:text-zinc-400">
                 {job.state.workerInstanceKey}
               </span>
             </li>
-      ))}
+          ))
+        )}
     </FlipMove>
   );
 }

ui/WorkersPage.tsx

@@ -31,14 +31,18 @@ export function WorkersPage(props: { sessionId: string | null }) {
     <>
       {getWorkers.data?.length
         ? (
-          <ul className="my-4 flex flex-col gap-2">
+          <ul className="flex flex-col gap-2">
             {getWorkers.data?.map((worker) => (
               <WorkerListItem key={worker.id} worker={worker} sessionId={sessionId} />
             ))}
           </ul>
         )
         : getWorkers.data?.length === 0
-        ? <p>No workers</p>
+        ? (
+          <li className="flex flex-col gap-2 rounded-md bg-zinc-100 dark:bg-zinc-800 p-2">
+            <p key="no-workers" className="text-center text-gray-500">No workers.</p>
+          </li>
+        )
         : getWorkers.error
         ? <p className="alert">Loading workers failed</p>
         : <div className="spinner self-center" />}