From 0ce18b21ca547af6c083c3f248e22b7daf92aef0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Espinoza?=
 <31373060+nicospz@users.noreply.github.com>
Date: Mon, 9 Aug 2021 17:44:29 +0900
Subject: [PATCH] fix(ui): fix notifications settings buttons overflowing
 (#1911)

* fix(ui): fix notifications settings buttons overflowing

* fix(ui): fix table overflowing
---
 src/components/Common/Button/index.tsx         |  2 +-
 src/components/Common/SettingsTabs/index.tsx   |  6 +++---
 src/components/Common/Table/index.tsx          |  8 ++++----
 src/components/Settings/SettingsLogs/index.tsx | 13 +++++++------
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/Common/Button/index.tsx b/src/components/Common/Button/index.tsx
index ab94650a0..f1083e5b2 100644
--- a/src/components/Common/Button/index.tsx
+++ b/src/components/Common/Button/index.tsx
@@ -45,7 +45,7 @@ function Button<P extends ElementTypes = 'button'>(
   ref?: React.Ref<Element<P>>
 ): JSX.Element {
   const buttonStyle = [
-    'inline-flex items-center justify-center border border-transparent leading-5 font-medium rounded-md focus:outline-none transition ease-in-out duration-150 cursor-pointer disabled:opacity-50',
+    'inline-flex items-center justify-center border border-transparent leading-5 font-medium rounded-md focus:outline-none transition ease-in-out duration-150 cursor-pointer disabled:opacity-50 whitespace-nowrap',
   ];
   switch (buttonType) {
     case 'primary':
diff --git a/src/components/Common/SettingsTabs/index.tsx b/src/components/Common/SettingsTabs/index.tsx
index 5fcdca734..5f450cf7a 100644
--- a/src/components/Common/SettingsTabs/index.tsx
+++ b/src/components/Common/SettingsTabs/index.tsx
@@ -46,7 +46,7 @@ const SettingsLink: React.FC<{
 
   if (tabType === 'button') {
     linkClasses =
-      'px-3 py-2 ml-8 text-sm font-medium transition duration-300 rounded-md whitespace-nowrap first:ml-0';
+      'px-3 py-2 text-sm font-medium transition duration-300 rounded-md whitespace-nowrap mx-2 my-1';
     activeLinkColor = 'bg-indigo-700';
     inactiveLinkColor = 'bg-gray-800 hover:bg-gray-700 focus:bg-gray-700';
   }
@@ -119,8 +119,8 @@ const SettingsTabs: React.FC<{
         </select>
       </div>
       {tabType === 'button' ? (
-        <div className="hidden overflow-x-scroll overflow-y-hidden sm:block hide-scrollbar">
-          <nav className="flex space-x-4" aria-label="Tabs">
+        <div className="hidden sm:block">
+          <nav className="flex flex-wrap -mx-2 -my-1" aria-label="Tabs">
             {settingsRoutes.map((route, index) => (
               <SettingsLink
                 tabType={tabType}
diff --git a/src/components/Common/Table/index.tsx b/src/components/Common/Table/index.tsx
index 3bf03b7bb..65b1549f7 100644
--- a/src/components/Common/Table/index.tsx
+++ b/src/components/Common/Table/index.tsx
@@ -13,7 +13,7 @@ const TH: React.FC<AllHTMLAttributes<HTMLTableHeaderCellElement>> = ({
   ...props
 }) => {
   const style = [
-    'px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider',
+    'px-4 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider truncate',
   ];
 
   if (className) {
@@ -39,7 +39,7 @@ const TD: React.FC<TDProps> = ({
   className,
   ...props
 }) => {
-  const style = ['whitespace-nowrap text-sm leading-5 text-white'];
+  const style = ['text-sm leading-5 text-white'];
 
   switch (alignText) {
     case 'left':
@@ -54,7 +54,7 @@ const TD: React.FC<TDProps> = ({
   }
 
   if (!noPadding) {
-    style.push('px-6 py-4');
+    style.push('px-4 py-4');
   }
 
   if (className) {
@@ -73,7 +73,7 @@ const Table: React.FC = ({ children }) => {
     <div className="flex flex-col">
       <div className="my-2 -mx-4 overflow-x-auto md:mx-0 lg:mx-0">
         <div className="inline-block min-w-full py-2 align-middle">
-          <div className="overflow-hidden shadow sm:rounded-lg">
+          <div className="overflow-hidden rounded-lg shadow md:mx-0 lg:mx-0">
             <table className="min-w-full">{children}</table>
           </div>
         </div>
diff --git a/src/components/Settings/SettingsLogs/index.tsx b/src/components/Settings/SettingsLogs/index.tsx
index c00dca719..572246fde 100644
--- a/src/components/Settings/SettingsLogs/index.tsx
+++ b/src/components/Settings/SettingsLogs/index.tsx
@@ -323,13 +323,13 @@ const SettingsLogs: React.FC = () => {
                   </Table.TD>
                   <Table.TD className="text-gray-300">{row.label}</Table.TD>
                   <Table.TD className="text-gray-300">{row.message}</Table.TD>
-                  <Table.TD className="flex items-center justify-end">
+                  <Table.TD className="flex flex-wrap items-center justify-end -m-1">
                     {row.data && (
                       <Button
                         buttonType="primary"
                         buttonSize="sm"
                         onClick={() => setActiveLog(row)}
-                        className="mr-2"
+                        className="m-1"
                       >
                         <DocumentSearchIcon className="icon-md" />
                       </Button>
@@ -338,6 +338,7 @@ const SettingsLogs: React.FC = () => {
                       buttonType="primary"
                       buttonSize="sm"
                       onClick={() => copyLogString(row)}
+                      className="m-1"
                     >
                       <ClipboardCopyIcon className="icon-md" />
                     </Button>
@@ -349,7 +350,7 @@ const SettingsLogs: React.FC = () => {
             {data.results.length === 0 && (
               <tr className="relative h-24 p-2 text-white">
                 <Table.TD colSpan={5} noPadding>
-                  <div className="flex flex-col items-center justify-center w-screen p-6 lg:w-full">
+                  <div className="flex flex-col items-center justify-center w-screen p-6 md:w-full">
                     <span className="text-base">
                       {intl.formatMessage(globalMessages.noresults)}
                     </span>
@@ -371,7 +372,7 @@ const SettingsLogs: React.FC = () => {
             <tr className="bg-gray-700">
               <Table.TD colSpan={5} noPadding>
                 <nav
-                  className="flex flex-col items-center w-screen px-6 py-3 space-x-4 space-y-3 sm:space-y-0 sm:flex-row lg:w-full"
+                  className="flex flex-col items-center w-screen px-6 py-3 space-x-4 space-y-3 sm:space-y-0 sm:flex-row md:w-full"
                   aria-label="Pagination"
                 >
                   <div className="hidden lg:flex lg:flex-1">
@@ -391,8 +392,8 @@ const SettingsLogs: React.FC = () => {
                         })}
                     </p>
                   </div>
-                  <div className="flex justify-center sm:flex-1 sm:justify-start lg:justify-center">
-                    <span className="items-center -mt-3 text-sm sm:-ml-4 lg:ml-0 sm:mt-0">
+                  <div className="flex justify-center sm:flex-1 sm:justify-start md:justify-center">
+                    <span className="items-center -mt-3 text-sm sm:-ml-4 md:ml-0 sm:mt-0">
                       {intl.formatMessage(globalMessages.resultsperpage, {
                         pageSize: (
                           <select