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/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",