From e6b3d6117e6a795c8135e1d6e6c611d9861a1138 Mon Sep 17 00:00:00 2001
From: soup <soup@r4tio.dev>
Date: Wed, 22 Nov 2023 20:12:18 +0100
Subject: [PATCH] fix(web): improve responsiveness on settings pages (#1270)

* fix(web): truncate feed name and adjust margins

This is to avoid clipping on narrow screens.
Bug: https://i.imgur.com/Aw3FzRK.png

* fix(web): fix boundaries and layout on feed page
fix(web): align switches on download client, feed and notification page

* fix(web): add truncate and margin to feed names

* correct truncate
change margin to padding

* inherit text styles

---------

Co-authored-by: martylukyy <35452459+martylukyy@users.noreply.github.com>
Co-authored-by: Fabricio Silva <hi@fabricio.dev>
---
 web/src/screens/settings/DownloadClient.tsx |  2 +-
 web/src/screens/settings/Feed.tsx           | 38 ++++++++++-----------
 web/src/screens/settings/Notifications.tsx  |  2 +-
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/web/src/screens/settings/DownloadClient.tsx b/web/src/screens/settings/DownloadClient.tsx
index f0fb7b8..6221a7b 100644
--- a/web/src/screens/settings/DownloadClient.tsx
+++ b/web/src/screens/settings/DownloadClient.tsx
@@ -116,7 +116,7 @@ function ListItem({ client }: DLSettingsItemProps) {
           isOpen={updateClientIsOpen}
           toggle={toggleUpdateClient}
         />
-        <div className="col-span-2 sm:col-span-1 pl-1 sm:pl-5 flex items-center">
+        <div className="col-span-2 sm:col-span-1 pl-1 sm:pl-6 flex items-center">
           <Checkbox
             value={client.enabled}
             setValue={onToggleMutation}
diff --git a/web/src/screens/settings/Feed.tsx b/web/src/screens/settings/Feed.tsx
index 860da0c..33dc18f 100644
--- a/web/src/screens/settings/Feed.tsx
+++ b/web/src/screens/settings/Feed.tsx
@@ -108,29 +108,29 @@ function FeedSettings() {
     >
       {data && data.length > 0 ? (
         <ul className="min-w-full relative">
-          <li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
+          <li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400 font-medium uppercase tracking-wider">
             <div
-              className="flex col-span-2 sm:col-span-1 pl-0 sm:pl-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer"
+              className="flex col-span-2 sm:col-span-1 pl-4 py-3 cursor-pointer"
               onClick={() => sortedFeeds.requestSort("enabled")}>
               Enabled <span className="sort-indicator">{sortedFeeds.getSortIndicator("enabled")}</span>
             </div>
             <div
-              className="col-span-5 pl-10 sm:pl-12 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer"
+              className="col-span-4 pl-10 sm:pl-12 py-3 cursor-pointer"
               onClick={() => sortedFeeds.requestSort("name")}>
               Name <span className="sort-indicator">{sortedFeeds.getSortIndicator("name")}</span>
             </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 cursor-pointer"
+              className="hidden md:flex col-span-2 py-3 cursor-pointer"
               onClick={() => sortedFeeds.requestSort("type")}>
               Type <span className="sort-indicator">{sortedFeeds.getSortIndicator("type")}</span>
             </div>
             <div
-              className="hidden md:flex col-span-2 px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer"
+              className="hidden md:flex col-span-2 px-4 py-3 cursor-pointer"
               onClick={() => sortedFeeds.requestSort("last_run")}>
               Last run <span className="sort-indicator">{sortedFeeds.getSortIndicator("last_run")}</span>
             </div>
             <div
-              className="hidden md:flex col-span-2 px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer"
+              className="hidden md:flex col-span-2 px-4 py-3 cursor-pointer"
               onClick={() => sortedFeeds.requestSort("next_run")}>
               Next run <span className="sort-indicator">{sortedFeeds.getSortIndicator("next_run")}</span>
             </div>
@@ -172,36 +172,36 @@ function ListItem({ feed }: ListItemProps) {
   };
 
   return (
-    <li key={feed.id} className="text-gray-500 dark:text-gray-400">
+    <li key={feed.id}>
       <FeedUpdateForm isOpen={updateFormIsOpen} toggle={toggleUpdateForm} feed={feed} />
 
-      <div className="grid grid-cols-12 items-center">
-        <div className="col-span-2 sm:col-span-1 pl-1 sm:pl-5 flex items-center">
+      <div className="grid grid-cols-12 items-center text-sm font-medium text-gray-900 dark:text-gray-500">
+        <div className="col-span-2 sm:col-span-1 pl-6 flex items-center">
           <Checkbox
             value={feed.enabled}
             setValue={toggleActive}
           />
         </div>
-        <div className="col-span-8 sm:col-span-5 pl-10 sm: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">
+        <div className="col-span-9 md:col-span-4 pl-10 sm:pl-12 py-3 flex flex-col">
+          <span className="pr-2 dark:text-white truncate">{feed.name}</span>
+          <span className="pr-3 text-xs truncate">
             {feed.indexer}
           </span>
         </div>
-        <div className="hidden md:flex col-span-1 py-3 items-center">
+        <div className="hidden md:flex col-span-2 py-3 items-center">
           {ImplementationBadges[feed.type.toLowerCase()]}
         </div>
-        <div className="hidden md:flex col-span-2 py-3 items-center sm:px-4 text-sm font-medium text-gray-900 dark:text-gray-500">
+        <div className="hidden md:flex col-span-2 py-3 items-center sm:px-4">
           <span title={simplifyDate(feed.last_run)}>
             {IsEmptyDate(feed.last_run)}
           </span>
         </div>
-        <div className="hidden md:flex col-span-2 py-3 items-center sm:px-4 text-sm font-medium text-gray-900 dark:text-gray-500">
+        <div className="hidden md:flex col-span-2 py-3 items-center sm:px-4">
           <span title={simplifyDate(feed.next_run)}>
             {IsEmptyDate(feed.next_run)}
           </span>
         </div>
-        <div className="col-span-1 flex justify-center items-center sm:px-6">
+        <div className="col-span-1 md:col-span-1 sm:col-span-2 flex justify-center items-center md:px-6">
           <FeedItemDropdown
             feed={feed}
             onToggle={toggleActive}
@@ -255,13 +255,13 @@ const FeedItemDropdown = ({
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: feedKeys.lists() });
       toast.custom((t) => <Toast type="success" body={`Feed ${feed?.name} was force run successfully.`} t={t} />);
-      toggleForceRunModal(); 
+      toggleForceRunModal();
     },
     onError: (error: any) => {
       toast.custom((t) => <Toast type="error" body={`Failed to force run ${feed?.name}. Error: ${error.message}`} t={t} />, {
         duration: 10000
-      });    
-      toggleForceRunModal(); 
+      });
+      toggleForceRunModal();
     }
   });
 
diff --git a/web/src/screens/settings/Notifications.tsx b/web/src/screens/settings/Notifications.tsx
index 0d37dd9..3092b6c 100644
--- a/web/src/screens/settings/Notifications.tsx
+++ b/web/src/screens/settings/Notifications.tsx
@@ -137,7 +137,7 @@ function ListItem({ notification }: ListItemProps) {
       <NotificationUpdateForm isOpen={updateFormIsOpen} toggle={toggleUpdateForm} notification={notification} />
 
       <div className="grid grid-cols-12 items-center py-2">
-        <div className="col-span-2 sm:col-span-1 pl-1 py-0.5 sm:pl-5 flex items-center">
+        <div className="col-span-2 sm:col-span-1 pl-1 py-0.5 sm:pl-6 flex items-center">
           <Checkbox
             value={notification.enabled}
             setValue={onToggleMutation}