From 05edb7c7a7549ecf9f58428c604ac6b39139a136 Mon Sep 17 00:00:00 2001
From: martylukyy <35452459+martylukyy@users.noreply.github.com>
Date: Tue, 17 Jan 2023 23:43:49 +0100
Subject: [PATCH] enhancement(web): make settings pages uniform for desktop and
 mobile (#634)

* enhancement(web): make settings pages uniform for desktop and mobile
removed var 'idx' from line 17:51 since it is defined but never used
converted the indexer table in to a responsive grid

* fix missing col-span adjustment for mobile

Co-authored-by: ze0s <43699394+zze0s@users.noreply.github.com>
---
 web/src/screens/settings/Api.tsx            |  90 +++++++----
 web/src/screens/settings/DownloadClient.tsx |  28 ++--
 web/src/screens/settings/Feed.tsx           |  20 ++-
 web/src/screens/settings/Indexer.tsx        | 164 ++++++++++----------
 web/src/screens/settings/Notifications.tsx  |  20 ++-
 5 files changed, 169 insertions(+), 153 deletions(-)

diff --git a/web/src/screens/settings/Api.tsx b/web/src/screens/settings/Api.tsx
index f659e05..db4f4ee 100644
--- a/web/src/screens/settings/Api.tsx
+++ b/web/src/screens/settings/Api.tsx
@@ -15,24 +15,22 @@ import { EmptySimple } from "../../components/emptystates";
 function APISettings() {
   const [addFormIsOpen, toggleAddForm] = useToggle(false);
 
-  const { data } = useQuery(
-    ["apikeys"],
-    () => APIClient.apikeys.getAll(),
-    {
-      retry: false,
-      refetchOnWindowFocus: false,
-      onError: err => console.log(err)
-    }
-  );
+  const { data } = useQuery(["apikeys"], () => APIClient.apikeys.getAll(), {
+    retry: false,
+    refetchOnWindowFocus: false,
+    onError: (err) => console.log(err)
+  });
 
   return (
     <div className="divide-y divide-gray-200 dark:divide-gray-700 lg:col-span-9">
       <div className="pb-6 py-6 px-4 sm:p-6 lg:pb-8">
-        <APIKeyAddForm isOpen={addFormIsOpen} toggle={toggleAddForm}/>
+        <APIKeyAddForm isOpen={addFormIsOpen} toggle={toggleAddForm} />
 
         <div className="-ml-4 -mt-4 flex justify-between items-center flex-wrap sm:flex-nowrap">
           <div className="ml-4 mt-4">
-            <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">API keys</h3>
+            <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
+              API keys
+            </h3>
             <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
               Manage API keys.
             </p>
@@ -48,32 +46,36 @@ function APISettings() {
           </div>
         </div>
 
-        {data && data.length > 0 ?
+        {data && data.length > 0 ? (
           <section className="mt-6 light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
             <ol className="min-w-full relative">
-              <li className="grid grid-cols-12 gap-4 mb-2 border-b border-gray-200 dark:border-gray-700">
-                <div
-                  className="col-span-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name
+              <li className="hidden sm:grid grid-cols-12 gap-4 mb-2 border-b border-gray-200 dark:border-gray-700">
+                <div className="col-span-5 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  Name
                 </div>
-                <div
-                  className="col-span-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Key
+                <div className="col-span-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  Key
                 </div>
               </li>
 
-              {data && data.map((k) => (
-                <APIListItem key={k.key} apikey={k}/>
-              ))}
+              {data && data.map((k) => <APIListItem key={k.key} apikey={k} />)}
             </ol>
           </section>
-          : <EmptySimple title="No API keys" subtitle="" buttonAction={toggleAddForm}
-            buttonText="Create API key"/>}
+        ) : (
+          <EmptySimple
+            title="No API keys"
+            subtitle=""
+            buttonAction={toggleAddForm}
+            buttonText="Create API key"
+          />
+        )}
       </div>
     </div>
   );
 }
 
 interface ApiKeyItemProps {
-  apikey: APIKey
+  apikey: APIKey;
 }
 
 function APIListItem({ apikey }: ApiKeyItemProps) {
@@ -87,7 +89,13 @@ function APIListItem({ apikey }: ApiKeyItemProps) {
         queryClient.invalidateQueries(["apikeys"]);
         queryClient.invalidateQueries(["apikeys", apikey.key]);
 
-        toast.custom((t) => <Toast type="success" body={`API key ${apikey?.name} was deleted`} t={t}/>);
+        toast.custom((t) => (
+          <Toast
+            type="success"
+            body={`API key ${apikey?.name} was deleted`}
+            t={t}
+          />
+        ));
       }
     }
   );
@@ -106,15 +114,32 @@ function APIListItem({ apikey }: ApiKeyItemProps) {
         text="Are you sure you want to remove this API key? This action cannot be undone."
       />
 
-      <div className="grid grid-cols-12 gap-4 items-center py-2">
-        <div className="col-span-4 overflow-auto flex items-center text-sm font-medium text-gray-900 dark:text-white">
-          {apikey.name}
+      <div className="sm:grid grid-cols-12 gap-4 items-center py-2">
+        <div className="col-span-5 px-2 sm:px-6 py-2 sm:py-0 truncate block sm:text-sm text-md font-medium text-gray-900 dark:text-white">
+          <div className="flex justify-between">
+            <div className="pl-1 py-2">{apikey.name}</div>
+            <div>
+              <button
+                className={classNames(
+                  "text-gray-900 dark:text-gray-300",
+                  "sm:hidden font-medium group rounded-md items-center px-2 py-2 text-sm"
+                )}
+                onClick={toggleDeleteModal}
+                title="Delete key"
+              >
+                <TrashIcon
+                  className="text-red-500 w-5 h-5"
+                  aria-hidden="true"
+                />
+              </button>
+            </div>
+          </div>
         </div>
         <div className="col-span-6 flex items-center text-sm font-medium text-gray-900 dark:text-white">
-          <KeyField value={apikey.key}/>
+          <KeyField value={apikey.key} />
         </div>
 
-        <div className="col-span-2 flex items-center justify-end text-sm font-medium text-gray-900 dark:text-white">
+        <div className="col-span-1 hidden sm:flex items-center text-sm font-medium text-gray-900 dark:text-white">
           <button
             className={classNames(
               "text-gray-900 dark:text-gray-300",
@@ -123,10 +148,7 @@ function APIListItem({ apikey }: ApiKeyItemProps) {
             onClick={toggleDeleteModal}
             title="Delete key"
           >
-            <TrashIcon
-              className="text-red-500 w-5 h-5"
-              aria-hidden="true"
-            />
+            <TrashIcon className="text-red-500 w-5 h-5" aria-hidden="true" />
           </button>
         </div>
       </div>
@@ -134,4 +156,4 @@ function APIListItem({ apikey }: ApiKeyItemProps) {
   );
 }
 
-export default APISettings;
\ No newline at end of file
+export default APISettings;
diff --git a/web/src/screens/settings/DownloadClient.tsx b/web/src/screens/settings/DownloadClient.tsx
index ea08219..7f89d38 100644
--- a/web/src/screens/settings/DownloadClient.tsx
+++ b/web/src/screens/settings/DownloadClient.tsx
@@ -14,7 +14,7 @@ interface DLSettingsItemProps {
     idx: number;
 }
 
-function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
+function DownloadClientSettingsListItem({ client }: DLSettingsItemProps) {
   const [updateClientIsOpen, toggleUpdateClient] = useToggle(false);
 
   const queryClient = useQueryClient();
@@ -37,13 +37,13 @@ function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
 
   return (
     <li key={client.name}>
-      <div className="grid grid-cols-12 gap-4 items-center py-3">
+      <div className="grid grid-cols-12 items-center py-2">
         <DownloadClientUpdateForm
           client={client}
           isOpen={updateClientIsOpen}
           toggle={toggleUpdateClient}
         />
-        <div className="col-span-3 px-6 flex items-center sm:px-6">
+        <div className="col-span-2 sm:col-span-1 px-6 flex items-center sm:px-6">
           <Switch
             checked={client.enabled}
             onChange={onToggleMutation}
@@ -62,10 +62,10 @@ function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
             />
           </Switch>
         </div>
-        <div className="col-span-6 md:col-span-3 lg:col-span-3 px-6 py-3 flex flex-col px-6 text-sm font-medium text-gray-900 dark:text-white truncate" title={client.name}>{client.name}</div>
-        <div className="hidden md:flex col-span-3 py-3 flex items-center whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 truncate" title={client.host}>{client.host}</div>
-        <div className="hidden md:flex col-span-2 py-3 flex items-center sm:px-6 text-sm text-gray-500 dark:text-gray-400">{DownloadClientTypeNameMap[client.type]}</div>
-        <div className="col-span-1 whitespace-nowrap text-center text-sm font-medium">
+        <div className="col-span-8 sm:col-span-4 lg:col-span-4 pl-12 pr-6 py-3 block flex-col text-sm font-medium text-gray-900 dark:text-white truncate" title={client.name}>{client.name}</div>
+        <div className="hidden sm:block col-span-4 pr-6 py-3 text-left items-center whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 truncate" title={client.host}>{client.host}</div>
+        <div className="hidden sm:block col-span-2 py-3 text-left items-center text-sm text-gray-500 dark:text-gray-400">{DownloadClientTypeNameMap[client.type]}</div>
+        <div className="col-span-1 pl-0.5 whitespace-nowrap text-center text-sm font-medium">
           <span className="text-blue-600 dark:text-gray-300 hover:text-blue-900 cursor-pointer" onClick={toggleUpdateClient}>
             Edit
           </span>
@@ -104,7 +104,7 @@ function DownloadClientSettings() {
           <div className="ml-4 mt-4 flex-shrink-0">
             <button
               type="button"
-              className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-sm text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
               onClick={toggleAddClient}
             >
               Add new
@@ -114,19 +114,19 @@ function DownloadClientSettings() {
 
         <div className="flex flex-col mt-6 px-4">
           {data && data.length > 0 ?
-            <section className="light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
+            <section className="light:bg-white dark:bg-gray-800 light:shadow sm:rounded-sm">
               <ol className="min-w-full relative">
-                <li className="grid grid-cols-12 gap-4 border-b border-gray-200 dark:border-gray-700">
-                  <div className="col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                <li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
+                  <div className="col-span-2 sm:col-span-1 px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                     Enabled
                   </div>
-                  <div className="col-span-6 md:col-span-3 lg:col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <div className="col-span-6 sm:col-span-4 lg:col-span-4 pl-12 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                     Name
                   </div>
-                  <div className="hidden md:flex col-span-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <div className="hidden sm:flex col-span-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                     Host
                   </div>
-                  <div className="hidden md:flex col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <div className="hidden sm:flex col-span-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                     Type
                   </div>
                 </li>
diff --git a/web/src/screens/settings/Feed.tsx b/web/src/screens/settings/Feed.tsx
index 2021f37..c3a4fe5 100644
--- a/web/src/screens/settings/Feed.tsx
+++ b/web/src/screens/settings/Feed.tsx
@@ -42,22 +42,20 @@ function FeedSettings() {
         {data && data.length > 0 ?
           <section className="mt-6 light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
             <ol className="min-w-full relative">
-              <li className="grid grid-cols-12 gap-4 border-b border-gray-200 dark:border-gray-700">
+              <li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
                 <div
-                  className="col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Enabled
+                  className="col-span-2 sm:col-span-1 px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Enabled
                 </div>
                 <div
-                  className="col-span-6 md:col-span-3 lg:col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name
+                  className="col-span-6 pl-12 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name
                 </div>
                 <div
-                  className="hidden md:flex col-span-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type
+                  className="hidden md:flex col-span-1 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type
                 </div>
                 <div
                   className="hidden md:flex col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Last run
                 </div>
-                {/*<div className="col-span-4 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Events</div>*/}
               </li>
-
               {data && data.map((f) => (
                 <ListItem key={f.id} feed={f}/>
               ))}
@@ -101,8 +99,8 @@ function ListItem({ feed }: ListItemProps) {
     <li key={feed.id} className="text-gray-500 dark:text-gray-400">
       <FeedUpdateForm isOpen={updateFormIsOpen} toggle={toggleUpdateForm} feed={feed}/>
 
-      <div className="grid grid-cols-12 gap-4 items-center">
-        <div className="col-span-3 px-6 flex items-center sm:px-6 ">
+      <div className="grid grid-cols-12 items-center">
+        <div className="col-span-2 sm:col-span-1 px-6 flex items-center">
           <Switch
             checked={feed.enabled}
             onChange={toggleActive}
@@ -121,16 +119,16 @@ function ListItem({ feed }: ListItemProps) {
             />
           </Switch>
         </div>
-        <div className="col-span-6 md:col-span-3 lg:col-span-3 px-6 py-3 flex flex-col px-6 text-sm font-medium text-gray-900 dark:text-white">
+        <div className="col-span-8 sm:col-span-6 pl-12 py-3 flex flex-col text-sm font-medium text-gray-900 dark:text-white">
           <span>{feed.name}</span>
           <span className="text-gray-900 dark:text-gray-500 text-xs">
             {feed.indexer}
           </span>
         </div>
-        <div className="hidden md:flex col-span-3 py-3 flex items-center">
+        <div className="hidden md:flex col-span-1 py-3 items-center">
           {ImplementationBadges[feed.type.toLowerCase()]}
         </div>
-        <div className="hidden md:flex col-span-2 py-3 flex items-center sm:px-6 text-sm font-medium text-gray-900 dark:text-gray-500">
+        <div className="hidden md:flex col-span-3 py-3 items-center sm:px-6 text-sm font-medium text-gray-900 dark:text-gray-500">
           <span title={simplifyDate(feed.last_run)}>
             {IsEmptyDate(feed.last_run)}
           </span>
diff --git a/web/src/screens/settings/Indexer.tsx b/web/src/screens/settings/Indexer.tsx
index 6af10cd..ef8523c 100644
--- a/web/src/screens/settings/Indexer.tsx
+++ b/web/src/screens/settings/Indexer.tsx
@@ -8,33 +8,27 @@ import { APIClient } from "../../api/APIClient";
 import { componentMapType } from "../../forms/settings/DownloadClientForms";
 
 const ImplementationBadgeIRC = () => (
-  <span
-    className="mr-2 inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-green-200 dark:bg-green-400 text-green-800 dark:text-green-800"
-  >
+  <span className="mr-2 inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-green-200 dark:bg-green-400 text-green-800 dark:text-green-800">
     IRC
   </span>
 );
 
 const ImplementationBadgeTorznab = () => (
-  <span
-    className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-orange-200 dark:bg-orange-400 text-orange-800 dark:text-orange-800"
-  >
+  <span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-orange-200 dark:bg-orange-400 text-orange-800 dark:text-orange-800">
     Torznab
   </span>
 );
 
 const ImplementationBadgeRSS = () => (
-  <span
-    className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-amber-200 dark:bg-amber-400 text-amber-800 dark:text-amber-800"
-  >
+  <span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-amber-200 dark:bg-amber-400 text-amber-800 dark:text-amber-800">
     RSS
   </span>
 );
 
 export const ImplementationBadges: componentMapType = {
-  "irc": <ImplementationBadgeIRC/>,
-  "torznab": <ImplementationBadgeTorznab />,
-  "rss": <ImplementationBadgeRSS />
+  irc: <ImplementationBadgeIRC />,
+  torznab: <ImplementationBadgeTorznab />,
+  rss: <ImplementationBadgeRSS />
 };
 
 interface ListItemProps {
@@ -45,36 +39,48 @@ const ListItem = ({ indexer }: ListItemProps) => {
   const [updateIsOpen, toggleUpdate] = useToggle(false);
 
   return (
-    <tr key={indexer.name}>
-      <IndexerUpdateForm isOpen={updateIsOpen} toggle={toggleUpdate} indexer={indexer} />
-
-      <td className="px-6 py-4 whitespace-nowrap">
-        <Switch
-          checked={indexer.enabled ?? false}
-          onChange={toggleUpdate}
-          className={classNames(
-            indexer.enabled ? "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"
-          )}
-        >
-          <span className="sr-only">Enable</span>
-          <span
-            aria-hidden="true"
+    <li key={indexer.name}>
+      <div className="grid grid-cols-12 items-center py-1.5">
+        <IndexerUpdateForm
+          isOpen={updateIsOpen}
+          toggle={toggleUpdate}
+          indexer={indexer}
+        />
+        <div className="col-span-2 sm:col-span-1 flex px-6 items-center sm:px-6">
+          <Switch
+            checked={indexer.enabled ?? false}
+            onChange={toggleUpdate}
             className={classNames(
-              indexer.enabled ? "translate-x-5" : "translate-x-0",
-              "inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
+              indexer.enabled ? "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"
             )}
-          />
-        </Switch>
-      </td>
-      <td className="px-6 py-4 w-full whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">{indexer.name}</td>
-      <td className="px-6 py-4 w-full whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">{ImplementationBadges[indexer.implementation]}</td>
-      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-        <span className="text-blue-600 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-500 cursor-pointer" onClick={toggleUpdate}>
-          Edit
-        </span>
-      </td>
-    </tr>
+          >
+            <span className="sr-only">Enable</span>
+            <span
+              aria-hidden="true"
+              className={classNames(
+                indexer.enabled ? "translate-x-5" : "translate-x-0",
+                "inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
+              )}
+            />
+          </Switch>
+        </div>
+        <div className="col-span-7 sm:col-span-8 pl-12 sm:pr-6 py-3 block flex-col text-sm font-medium text-gray-900 dark:text-white truncate">
+          {indexer.name}
+        </div>
+        <div className="hidden md:block col-span-2 pr-6 py-3 text-left items-center whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 truncate">
+          {ImplementationBadges[indexer.implementation]}
+        </div>
+        <div className="col-span-1 flex first-letter:px-6 py-3 whitespace-nowrap text-right text-sm font-medium">
+          <span
+            className="col-span-1 px-6 text-blue-600 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-500 cursor-pointer"
+            onClick={toggleUpdate}
+          >
+            Edit
+          </span>
+        </div>
+      </div>
+    </li>
   );
 };
 
@@ -92,15 +98,16 @@ function IndexerSettings() {
 
   return (
     <div className="lg:col-span-9">
-
       <IndexerAddForm isOpen={addIndexerIsOpen} toggle={toggleAddIndexer} />
 
       <div className="py-6 px-4 sm:p-6 lg:pb-8">
         <div className="-ml-4 -mt-4 flex justify-between items-center flex-wrap sm:flex-nowrap">
           <div className="ml-4 mt-4">
-            <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">Indexers</h3>
+            <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
+              Indexers
+            </h3>
             <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
-                            Indexer settings.
+              Indexer settings.
             </p>
           </div>
           <div className="ml-4 mt-4 flex-shrink-0">
@@ -115,52 +122,37 @@ function IndexerSettings() {
         </div>
 
         <div className="flex flex-col mt-6">
-          {data && data.length > 0 ?
-            <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-              <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
-                <div className="light:shadow overflow-hidden light:border-b light:border-gray-200 dark:border-gray-700 sm:rounded-lg">
-                  <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-                    <thead className="light:bg-gray-50">
-                      <tr>
-                        <th
-                          scope="col"
-                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
-                        >
-                          Enabled
-                        </th>
-                        <th
-                          scope="col"
-                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
-                        >
-                          Name
-                        </th>
-                        <th
-                          scope="col"
-                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
-                        >
-                          Implementation
-                        </th>
-                        <th scope="col" className="relative px-6 py-3">
-                          <span className="sr-only">Edit</span>
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody className="light:bg-white divide-y divide-gray-200 dark:divide-gray-700">
-                      {data.map((indexer, idx) => (
-                        <ListItem indexer={indexer} key={idx} />
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
-            : <EmptySimple title="No indexers" subtitle="" buttonText="Add new indexer" buttonAction={toggleAddIndexer} />
-          }
+          {data && data.length > 0 ? (
+            <section className="light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
+              <ol className="min-w-full relative">
+                <li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
+                  <div className="col-span-2 sm:col-span-1 px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Enabled
+                  </div>
+                  <div className="col-span-7 sm:col-span-8 pl-12 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Name
+                  </div>
+                  <div className="hidden md:flex col-span-1 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Implementation
+                  </div>
+                </li>
+                {data.map((indexer, idx) => (
+                  <ListItem indexer={indexer} key={idx} />
+                ))}
+              </ol>
+            </section>
+          ) : (
+            <EmptySimple
+              title="No indexers"
+              subtitle=""
+              buttonText="Add new indexer"
+              buttonAction={toggleAddIndexer}
+            />
+          )}
         </div>
-
       </div>
     </div>
   );
 }
 
-export default IndexerSettings;
\ No newline at end of file
+export default IndexerSettings;
diff --git a/web/src/screens/settings/Notifications.tsx b/web/src/screens/settings/Notifications.tsx
index 62c6a8c..fbde0eb 100644
--- a/web/src/screens/settings/Notifications.tsx
+++ b/web/src/screens/settings/Notifications.tsx
@@ -42,9 +42,9 @@ function NotificationSettings() {
         {data && data.length > 0 ?
           <section className="mt-6 light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
             <ol className="min-w-full">
-              <li className="grid grid-cols-12 gap-4 border-b border-gray-200 dark:border-gray-700">
-                <div className="col-span-2 pl-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Enabled</div>
-                <div className="col-span-6 md:col-span-5 pl-10 md:pl-0 pr-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name</div>
+              <li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
+                <div className="col-span-2 sm:col-span-1 pl-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Enabled</div>
+                <div className="col-span-6 pl-10 md:pl-12 pr-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name</div>
                 <div className="hidden md:flex col-span-2 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type</div>
                 <div className="hidden md:flex col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Events</div>
               </li>
@@ -95,8 +95,8 @@ function ListItem({ notification }: ListItemProps) {
     <li key={notification.id} className="text-gray-500 dark:text-gray-400">
       <NotificationUpdateForm isOpen={updateFormIsOpen} toggle={toggleUpdateForm} notification={notification} />
 
-      <div className="grid grid-cols-12 gap-4 items-center py-3">
-        <div className="col-span-2 md:col-span-2 pl-6 flex items-center sm:pl-6">
+      <div className="grid grid-cols-12 items-center py-4">
+        <div className="col-span-2 sm:col-span-1 px-6 flex items-center ">
           <Switch
             checked={notification.enabled}
             onChange={toggleUpdateForm}
@@ -115,7 +115,7 @@ function ListItem({ notification }: ListItemProps) {
             />
           </Switch>
         </div>
-        <div className="col-span-8 md:col-span-5 pl-10 md:pl-0 pr-2 sm:pr-6 truncate block items-center" title={notification.name}>
+        <div className="col-span-8 md:col-span-6 pl-10 md:pl-12 pr-2 sm:pr-6 truncate block items-center text-sm font-medium text-gray-900 dark:text-white" title={notification.name}>
           {notification.name}
         </div>
         <div className="hidden md:flex col-span-2 items-center">
@@ -129,11 +129,15 @@ function ListItem({ notification }: ListItemProps) {
             {notification.events.length}
           </span>
         </div>
-        <div className="col-span-2 md:col-span-1 flex items-center">
-          <span className="text-blue-600 dark:text-gray-300 hover:text-blue-900 cursor-pointer" onClick={toggleUpdateForm}>
+        <div className="col-span-1 flex first-letter:px-6 whitespace-nowrap text-right text-sm font-medium">
+          <span
+            className="col-span-1 px-6 text-blue-600 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-500 cursor-pointer"
+            onClick={toggleUpdateForm}
+          >
             Edit
           </span>
         </div>
+
       </div>
     </li>
   );