fix(web): mobile ux improvements (#296)

* fix(ListboxFilter): Added z-index in order to properly render dropdown box.
fix(ReleaseTable): Added flex-direction: column to wrap on mobile devices (otherwise it's set to row)
feat(DownloadClientSettingsListItem): Made it possible to toggle client state directly, without opening the update form.

* fix(TitleCell): Improved responsiveness across all relevant screen selectors.

* fix(FilterDetails): Fixed incorrect overflow property ordering.

web/src/components/data-table/Cells.tsx

@@ -17,7 +17,7 @@ export const AgeCell = ({ value }: CellProps) => (
 
 export const TitleCell = ({ value }: CellProps) => (
   <div
-    className="text-sm font-medium box-content text-gray-900 dark:text-gray-300 max-w-[128px] sm:max-w-none overflow-auto py-4"
+    className="text-sm font-medium box-content text-gray-900 dark:text-gray-300 max-w-[128px] sm:max-w-[256px] md:max-w-[360px] lg:max-w-[640px] xl:max-w-[840px] overflow-auto py-4"
     title={value}
   >
     {value}

web/src/screens/filters/details.tsx

@@ -223,10 +223,9 @@ export default function FilterDetails() {
       </header>
       <div className="max-w-screen-xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
         <div className="bg-white dark:bg-gray-800 rounded-lg shadow">
-          <div className="relative mx-auto md:px-6 xl:px-4">
-            <div className="pt-1 pb-6 block overflow-auto">
+          <div className="pt-1 px-4 pb-6 block">
             <div className="border-b border-gray-200 dark:border-gray-700">
-                <nav className="-mb-px flex space-x-6 sm:space-x-8">
+              <nav className="-mb-px flex space-x-6 sm:space-x-8 overflow-x-auto">
                 {tabs.map((tab) => (
                   <TabNavLink item={tab} key={tab.href} />
                 ))}
@@ -303,7 +302,6 @@ export default function FilterDetails() {
           </div>
         </div>
       </div>
-      </div>
     </main>
   );
 }

web/src/screens/releases/Filters.tsx

@@ -49,7 +49,7 @@ const ListboxFilter = ({
           leaveTo="opacity-0"
         >
           <Listbox.Options
-            className="absolute w-full mt-1 overflow-auto text-base bg-white dark:bg-gray-800 rounded-md shadow-lg max-h-60 border border-opacity-5 border-black dark:border-gray-700 dark:border-opacity-40 focus:outline-none sm:text-sm"
+            className="absolute z-10 w-full mt-1 overflow-auto text-base bg-white dark:bg-gray-800 rounded-md shadow-lg max-h-60 border border-opacity-5 border-black dark:border-gray-700 dark:border-opacity-40 focus:outline-none sm:text-sm"
           >
             <FilterOption label="All" />
             {children}

web/src/screens/releases/ReleaseTable.tsx

@@ -181,7 +181,7 @@ export const ReleaseTable = () => {
   // Render the UI for your table
   return (
     <div className="flex flex-col">
-      <div className="flex mb-6">
+      <div className="flex mb-6 flex-col sm:flex-row">
         {headerGroups.map((headerGroup) =>
           headerGroup.headers.map((column) => (
             column.Filter ? (

web/src/screens/settings/DownloadClient.tsx

@@ -1,11 +1,13 @@
 import { useToggle } from "../../hooks/hooks";
 import { Switch } from "@headlessui/react";
-import { useQuery } from "react-query";
+import { useMutation, useQuery, useQueryClient } from "react-query";
 import { classNames } from "../../utils";
 import { DownloadClientAddForm, DownloadClientUpdateForm } from "../../forms";
 import { EmptySimple } from "../../components/emptystates";
 import { APIClient } from "../../api/APIClient";
 import { DownloadClientTypeNameMap } from "../../domain/constants";
+import toast from "react-hot-toast";
+import Toast from "../../components/notifications/Toast";
 
 interface DLSettingsItemProps {
     client: DownloadClient;
@@ -15,14 +17,35 @@ interface DLSettingsItemProps {
 function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
   const [updateClientIsOpen, toggleUpdateClient] = useToggle(false);
 
+  const queryClient = useQueryClient();
+  const mutation = useMutation(
+    (client: DownloadClient) => APIClient.download_clients.update(client),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(["downloadClients"]);
+        toast.custom((t) => <Toast type="success" body={`${client.name} was updated successfully`} t={t}/>);
+      }
+    }
+  );
+
+  const onToggleMutation = (newState: boolean) => {
+    mutation.mutate({
+      ...client,
+      enabled: newState
+    });
+  };
+
   return (
     <tr key={client.name} className={idx % 2 === 0 ? "light:bg-white" : "light:bg-gray-50"}>
-      <DownloadClientUpdateForm client={client} isOpen={updateClientIsOpen} toggle={toggleUpdateClient} />
-            
+      <DownloadClientUpdateForm
+        client={client}
+        isOpen={updateClientIsOpen}
+        toggle={toggleUpdateClient}
+      />
       <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
         <Switch
           checked={client.enabled}
-          onChange={toggleUpdateClient}
+          onChange={onToggleMutation}
           className={classNames(
             client.enabled ? "bg-teal-500 dark:bg-blue-500" : "bg-gray-200 dark:bg-gray-600",
             "relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"