feat(web): settings cosmetic improvements (#621)

* Minor cosmetic changes

- Changed Feeds paragraph to include regular RSS feeds
- Centered "Danger Zone" header on Settings/Releases
- Added punctuations to subtitles and sublabes that were missing them
- Removed some subtitles over "Create new" buttons in Settings

* settings(releases) Added paragraph below header

* Changed user and docs icons

* Fixed Notifications table for narrow screens

* Made Notifications-page dynamic like the IRC-page

- Hiding notification type and events on smaller screens

* Made API table look better on smaller screens

- Adjusted col-spans
- overflow-auto on name

* overflow-hidden on name

* Made Feeds dynamic like Notifications

* Made Clients dynamic like Feeds and Notifications

* name field will now truncate instead of span itself over multiple lines
mouseovering the name will now show the full value
mitigated scrollbars
changes to col-span to move the name column closer to enabled switch
adjusted paddings in desktop and mobile layout

Co-authored-by: martylukyy <35452459+martylukyy@users.noreply.github.com>

web/src/screens/Base.tsx

@@ -1,8 +1,8 @@
 import { Fragment } from "react";
 import { Link, NavLink, Outlet } from "react-router-dom";
 import { Disclosure, Menu, Transition } from "@headlessui/react";
-import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
+import { BookOpenIcon, UserIcon } from "@heroicons/react/24/solid";
-import { Bars3Icon, ChevronDownIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
 
 import { AuthContext } from "../utils/Context";
 
@@ -77,7 +77,7 @@ export default function Base() {
                           )}
                         >
                           Docs
-                          <ArrowTopRightOnSquareIcon className="inline ml-1 h-5 w-5" aria-hidden="true" />
+                          <BookOpenIcon className="inline ml-1 h-5 w-5" aria-hidden="true" />
                         </a>
                       </div>
                     </div>
@@ -90,7 +90,7 @@ export default function Base() {
                             <Menu.Button
                               className={classNames(
                                 open ? "bg-gray-200 dark:bg-gray-800" : "",
-                                "text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800",
+                                "text-gray-600 dark:text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-2xl text-sm font-medium",
                                 "max-w-xs rounded-full flex items-center text-sm px-3 py-2",
                                 "transition-colors duration-200"
                               )}
@@ -99,8 +99,8 @@ export default function Base() {
                                 <span className="sr-only">Open user menu for </span>
                                 {authContext.username}
                               </span>
-                              <ChevronDownIcon
+                              <UserIcon
-                                className="hidden flex-shrink-0 ml-1 h-5 w-5 text-gray-800 dark:text-gray-300 sm:block"
+                                className="inline ml-1 h-5 w-5"
                                 aria-hidden="true"
                               />
                             </Menu.Button>

web/src/screens/filters/details.tsx

@@ -340,7 +340,7 @@ export function General() {
       </div>
 
       <div className="mt-6 lg:pb-8">
-        <TitleSubtitle title="Rules" subtitle="Specify rules on how torrents should be handled/selected" />
+        <TitleSubtitle title="Rules" subtitle="Specify rules on how torrents should be handled/selected." />
 
         <div className="mt-6 grid grid-cols-12 gap-6">
           <TextField name="min_size" label="Min size" columns={6} placeholder="eg. 100MiB, 80GB" />
@@ -354,7 +354,7 @@ export function General() {
       </div>
 
       <div className="border-t dark:border-gray-700">
-        <SwitchGroup name="enabled" label="Enabled" description="Enable or disable this filter" />
+        <SwitchGroup name="enabled" label="Enabled" description="Enable or disable this filter." />
       </div>
 
     </div>
@@ -370,7 +370,7 @@ export function MoviesTv() {
       </div>
 
       <div className="mt-6 lg:pb-8">
-        <TitleSubtitle title="Seasons and Episodes" subtitle="Set season and episode match constraints" />
+        <TitleSubtitle title="Seasons and Episodes" subtitle="Set season and episode match constraints." />
 
         <div className="mt-6 grid grid-cols-12 gap-6">
           <TextField name="seasons" label="Seasons" columns={8} placeholder="eg. 1,3,2-6" />
@@ -383,7 +383,7 @@ export function MoviesTv() {
       </div>
 
       <div className="mt-6 lg:pb-8">
-        <TitleSubtitle title="Quality" subtitle="Set resolution, source, codec and related match constraints" />
+        <TitleSubtitle title="Quality" subtitle="Set resolution, source, codec and related match constraints." />
 
         <div className="mt-6 grid grid-cols-12 gap-6">
           <MultiSelect name="resolutions" options={RESOLUTION_OPTIONS} label="resolutions" columns={6} creatable={true} />
@@ -448,9 +448,9 @@ export function Music({ values }: AdvancedProps) {
                   </div> */}
               <div className="mt-4 sm:mt-0 sm:col-span-2">
                 <div className="max-w-lg space-y-4">
-                  <CheckboxField name="log" label="Log" sublabel="Must include Log" disabled={values.perfect_flac} />
+                  <CheckboxField name="log" label="Log" sublabel="Must include Log." disabled={values.perfect_flac} />
-                  <CheckboxField name="cue" label="Cue" sublabel="Must include Cue" disabled={values.perfect_flac} />
+                  <CheckboxField name="cue" label="Cue" sublabel="Must include Cue." disabled={values.perfect_flac} />
-                  <CheckboxField name="perfect_flac" label="Perfect FLAC" sublabel="Override all options about quality, source, format, and cue/log/log score"/>
+                  <CheckboxField name="perfect_flac" label="Perfect FLAC" sublabel="Override all options about quality, source, format, and cue/log/log score."/>
                 </div>
               </div>
             </div>
@@ -468,7 +468,7 @@ interface AdvancedProps {
 export function Advanced({ values }: AdvancedProps) {
   return (
     <div>
-      <CollapsableSection defaultOpen={true} title="Releases" subtitle="Match only certain release names and/or ignore other release names">
+      <CollapsableSection defaultOpen={true} title="Releases" subtitle="Match only certain release names and/or ignore other release names.">
         <div className="grid col-span-12 gap-6">
           <WarningAlert text="autobrr has extensive filtering built-in - only use this if nothing else works. If you need help please ask." />
 
@@ -498,12 +498,12 @@ export function Advanced({ values }: AdvancedProps) {
         </div>
       </CollapsableSection>
 
-      <CollapsableSection defaultOpen={true} title="Groups" subtitle="Match only certain groups and/or ignore other groups">
+      <CollapsableSection defaultOpen={true} title="Groups" subtitle="Match only certain groups and/or ignore other groups.">
         <TextField name="match_release_groups" label="Match release groups" columns={6} placeholder="eg. group1,group2" />
         <TextField name="except_release_groups" label="Except release groups" columns={6} placeholder="eg. badgroup1,badgroup2" />
       </CollapsableSection>
 
-      <CollapsableSection defaultOpen={true} title="Categories and tags" subtitle="Match or ignore categories or tags">
+      <CollapsableSection defaultOpen={true} title="Categories and tags" subtitle="Match or ignore categories or tags.">
         <TextField name="match_categories" label="Match categories" columns={6} placeholder="eg. *category*,category1" />
         <TextField name="except_categories" label="Except categories" columns={6} placeholder="eg. *category*" />
 
@@ -511,17 +511,17 @@ export function Advanced({ values }: AdvancedProps) {
         <TextField name="except_tags" label="Except tags" columns={6} placeholder="eg. tag1,tag2" />
       </CollapsableSection>
 
-      <CollapsableSection defaultOpen={true} title="Uploaders" subtitle="Match or ignore uploaders">
+      <CollapsableSection defaultOpen={true} title="Uploaders" subtitle="Match or ignore uploaders.">
         <TextField name="match_uploaders" label="Match uploaders" columns={6} placeholder="eg. uploader1" />
         <TextField name="except_uploaders" label="Except uploaders" columns={6} placeholder="eg. anonymous" />
       </CollapsableSection>
 
-      <CollapsableSection defaultOpen={true} title="Origins" subtitle="Match Internals, scene, p2p etc if announced">
+      <CollapsableSection defaultOpen={true} title="Origins" subtitle="Match Internals, scene, p2p etc. if announced.">
         <MultiSelect name="origins" options={ORIGIN_OPTIONS} label="Match Origins" columns={6} creatable={true} />
         <MultiSelect name="except_origins" options={ORIGIN_OPTIONS} label="Except Origins" columns={6} creatable={true} />
       </CollapsableSection>
 
-      <CollapsableSection defaultOpen={true} title="Release Tags" subtitle="This is the non-parsed releaseTags string from the announce">
+      <CollapsableSection defaultOpen={true} title="Release Tags" subtitle="This is the non-parsed releaseTags string from the announce.">
         <div className="grid col-span-12 gap-6">
           <WarningAlert text="These might not be what you think they are. For advanced users who know how things are parsed." />
 
@@ -533,7 +533,7 @@ export function Advanced({ values }: AdvancedProps) {
         </div>
       </CollapsableSection>
 
-      <CollapsableSection defaultOpen={true} title="Freeleech" subtitle="Match only freeleech and freeleech percent">
+      <CollapsableSection defaultOpen={true} title="Freeleech" subtitle="Match only freeleech and freeleech percent.">
         <div className="col-span-6">
           <SwitchGroup name="freeleech" label="Freeleech" />
         </div>
@@ -615,7 +615,7 @@ export function External() {
     <div>
 
       <div className="mt-6">
-        <SwitchGroup name="external_script_enabled" heading={true} label="Script" description="Run external script and check status as part of filtering" />
+        <SwitchGroup name="external_script_enabled" heading={true} label="Script" description="Run external script and check status as part of filtering." />
 
         <div className="mt-6 grid grid-cols-12 gap-6">
           <TextField
@@ -643,7 +643,7 @@ export function External() {
 
       <div className="mt-6">
         <div className="border-t dark:border-gray-700">
-          <SwitchGroup name="external_webhook_enabled" heading={true} label="Webhook" description="Run external webhook and check status as part of filtering" />
+          <SwitchGroup name="external_webhook_enabled" heading={true} label="Webhook" description="Run external webhook and check status as part of filtering." />
         </div>
 
         <div className="mt-6 grid grid-cols-12 gap-6">

web/src/screens/settings/Api.tsx

@@ -53,7 +53,7 @@ function APISettings() {
             <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-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name
+                  className="col-span-4 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
@@ -65,7 +65,7 @@ function APISettings() {
               ))}
             </ol>
           </section>
-          : <EmptySimple title="No API keys" subtitle="Create a new" buttonAction={toggleAddForm}
+          : <EmptySimple title="No API keys" subtitle="" buttonAction={toggleAddForm}
             buttonText="Create API key"/>}
       </div>
     </div>
@@ -107,14 +107,14 @@ function APIListItem({ apikey }: ApiKeyItemProps) {
       />
 
       <div className="grid grid-cols-12 gap-4 items-center py-2">
-        <div className="col-span-5 flex items-center text-sm font-medium text-gray-900 dark:text-white">
+        <div className="col-span-4 overflow-auto flex items-center text-sm font-medium text-gray-900 dark:text-white">
           {apikey.name}
         </div>
         <div className="col-span-6 flex items-center text-sm font-medium text-gray-900 dark:text-white">
           <KeyField value={apikey.key}/>
         </div>
 
-        <div className="col-span-1 flex items-center justify-end text-sm font-medium text-gray-900 dark:text-white">
+        <div className="col-span-2 flex items-center justify-end text-sm font-medium text-gray-900 dark:text-white">
           <button
             className={classNames(
               "text-gray-900 dark:text-gray-300",

web/src/screens/settings/DownloadClient.tsx

@@ -37,13 +37,13 @@ function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
 
   return (
     <li key={client.name}>
-      <div className="grid grid-cols-12 gap-2 lg:gap-4 items-center py-2">
+      <div className="grid grid-cols-12 gap-4 items-center py-3">
         <DownloadClientUpdateForm
           client={client}
           isOpen={updateClientIsOpen}
           toggle={toggleUpdateClient}
         />
-        <div className="col-span-3 sm:col-span-2 px-4 sm:px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+        <div className="col-span-3 px-6 flex items-center sm:px-6">
           <Switch
             checked={client.enabled}
             onChange={onToggleMutation}
@@ -62,9 +62,9 @@ function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
             />
           </Switch>
         </div>
-        <div className="col-span-7 sm:col-span-3 px-1 sm:px-0 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white truncate" title={client.name}>{client.name}</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 sm:block col-span-4 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-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 sm:block col-span-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{DownloadClientTypeNameMap[client.type]}</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">
           <span className="text-blue-600 dark:text-gray-300 hover:text-blue-900 cursor-pointer" onClick={toggleUpdateClient}>
             Edit
@@ -117,16 +117,16 @@ function DownloadClientSettings() {
             <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 gap-4 border-b border-gray-200 dark:border-gray-700">
-                  <div className="col-span-3 sm:col-span-2 px-2 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <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
                   </div>
-                  <div className="col-span-6 sm:col-span-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <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
                   </div>
-                  <div className="hidden sm:block col-span-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <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">
                     Host
                   </div>
-                  <div className="hidden sm:block col-span-2 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <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">
                     Type
                   </div>
                 </li>
@@ -135,7 +135,7 @@ function DownloadClientSettings() {
                 ))}
               </ol>
             </section>
-            : <EmptySimple title="No download clients" subtitle="Add a new client" buttonText="New client" buttonAction={toggleAddClient} />
+            : <EmptySimple title="No download clients" subtitle="" buttonText="Add new client" buttonAction={toggleAddClient} />
           }
         </div>
       </div>

web/src/screens/settings/Feed.tsx

@@ -34,7 +34,7 @@ function FeedSettings() {
           <div className="ml-4 mt-4">
             <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">Feeds</h3>
             <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
-              Manage Torznab feeds.
+              Manage RSS and Torznab feeds.
             </p>
           </div>
         </div>
@@ -44,16 +44,16 @@ function FeedSettings() {
             <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-2 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Enabled
+                  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
                 </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">Name
+                  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
                 </div>
                 <div
-                  className="col-span-2 px-6 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-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type
                 </div>
                 <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">Last run
+                  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>
@@ -101,8 +101,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 py-4">
+      <div className="grid grid-cols-12 gap-4 items-center">
-        <div className="col-span-2 flex items-center sm:px-6 ">
+        <div className="col-span-3 px-6 flex items-center sm:px-6 ">
           <Switch
             checked={feed.enabled}
             onChange={toggleActive}
@@ -121,16 +121,16 @@ function ListItem({ feed }: ListItemProps) {
             />
           </Switch>
         </div>
-        <div className="col-span-4 flex flex-col sm:px-6 text-sm font-medium text-gray-900 dark:text-white">
+        <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">
           <span>{feed.name}</span>
           <span className="text-gray-900 dark:text-gray-500 text-xs">
             {feed.indexer}
           </span>
         </div>
-        <div className="col-span-2 flex items-center sm:px-6">
+        <div className="hidden md:flex col-span-3 py-3 flex items-center">
           {ImplementationBadges[feed.type.toLowerCase()]}
         </div>
-        <div className="col-span-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-2 py-3 flex 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>

web/src/screens/settings/Indexer.tsx

@@ -154,7 +154,7 @@ function IndexerSettings() {
                 </div>
               </div>
             </div>
-            : <EmptySimple title="No indexers" subtitle="Add a new indexer" buttonText="New indexer" buttonAction={toggleAddIndexer} />
+            : <EmptySimple title="No indexers" subtitle="" buttonText="Add new indexer" buttonAction={toggleAddIndexer} />
           }
         </div>
 

web/src/screens/settings/Irc.tsx

@@ -119,8 +119,8 @@ export const IrcSettings = () => {
         ) : (
           <EmptySimple
             title="No networks"
-            subtitle="Add a new network"
+            subtitle="Normally set up via Indexers"
-            buttonText="New network"
+            buttonText="Add new network"
             buttonAction={toggleAddNetwork}
           />
         )}

web/src/screens/settings/Notifications.tsx

@@ -43,10 +43,10 @@ function NotificationSettings() {
           <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 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Enabled</div>
+                <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-4 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 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>
-                <div className="col-span-2 px-6 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-2 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type</div>
-                <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">Events</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>
 
               {data && data.map((n: Notification) => (
@@ -54,7 +54,7 @@ function NotificationSettings() {
               ))}
             </ol>
           </section>
-          : <EmptySimple title="No notifications setup" subtitle="Add a new notification" buttonText="New notification" buttonAction={toggleAddNotifications} />}
+          : <EmptySimple title="No notifications" subtitle="" buttonText="Create new notification" buttonAction={toggleAddNotifications} />}
       </div>
     </div>
   );
@@ -96,7 +96,7 @@ function ListItem({ notification }: ListItemProps) {
       <NotificationUpdateForm isOpen={updateFormIsOpen} toggle={toggleUpdateForm} notification={notification} />
 
       <div className="grid grid-cols-12 gap-4 items-center py-3">
-        <div className="col-span-2 flex items-center sm:px-6">
+        <div className="col-span-2 md:col-span-2 pl-6 flex items-center sm:pl-6">
           <Switch
             checked={notification.enabled}
             onChange={toggleUpdateForm}
@@ -115,13 +115,13 @@ function ListItem({ notification }: ListItemProps) {
             />
           </Switch>
         </div>
-        <div className="col-span-4 flex items-center sm:px-6">
+        <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}>
           {notification.name}
         </div>
-        <div className="col-span-2 flex items-center sm:px-6">
+        <div className="hidden md:flex col-span-2 items-center">
           {iconComponentMap[notification.type]}
         </div>
-        <div className="col-span-3 flex items-center sm:px-6">
+        <div className="hidden md:flex col-span-2 px-6 items-center sm:px-6">
           <span
             className="mr-2 inline-flex items-center px-2.5 py-1 rounded-md text-sm font-medium bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-400"
             title={notification.events.join(", ")}
@@ -129,7 +129,7 @@ function ListItem({ notification }: ListItemProps) {
             {notification.events.length}
           </span>
         </div>
-        <div className="col-span-1 flex items-center">
+        <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}>
             Edit
           </span>

web/src/screens/settings/Releases.tsx

@@ -57,12 +57,12 @@ function ReleaseSettings() {
         <div className="px-4 py-5 sm:p-0">
           <div className="px-4 py-5 sm:p-6">
             <div>
-              <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
+              <h3 style={{ textAlign: "center" }} className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                 Danger Zone
               </h3>
+              <p style={{ textAlign: "center" }} className="mt-1 text-sm text-gray-900 dark:text-white">This will clear all release history in your database.</p>
             </div>
-
+            <div className="flex justify-between items-center p-2 mt-2 max-w-sm m-auto">
-            <div className="flex justify-between items-center p-4 mt-6 max-w-sm m-auto">
               <button
                 type="button"
                 onClick={toggleDeleteModal}