Improve mobile display of activity log

Author: DaneEveritt

package.json

@@ -9,6 +9,7 @@
         "@heroicons/react": "^1.0.6",
         "@hot-loader/react-dom": "^16.14.0",
         "@tailwindcss/forms": "^0.5.2",
+        "@tailwindcss/line-clamp": "^0.4.0",
         "axios": "^0.21.1",
         "chart.js": "^2.8.0",
         "classnames": "^2.3.1",

resources/scripts/components/dashboard/activity/ActivityLogContainer.tsx

@@ -51,7 +51,7 @@ export default () => {
                 <div className={'flex justify-end mb-2'}>
                     <Link
                         to={'#'}
-                        className={classNames(btnStyles.button, btnStyles.text)}
+                        className={classNames(btnStyles.button, btnStyles.text, 'w-full sm:w-auto')}
                         onClick={() => setFilters(value => ({ ...value, filters: {} }))}
                     >
                         Clear Filters <XCircleIcon className={'w-4 h-4 ml-2'}/>
@@ -67,7 +67,7 @@ export default () => {
                             key={`${activity.event}|${activity.timestamp.toString()}`}
                             className={'grid grid-cols-10 py-4 border-b-2 border-gray-800 last:rounded-b last:border-0'}
                         >
-                            <div className={'col-span-1 flex items-center justify-center select-none'}>
+                            <div className={'col-span-2 sm:col-span-1 flex items-center justify-center select-none'}>
                                 <div className={'flex items-center w-8 h-8 rounded-full bg-gray-600 overflow-hidden'}>
                                     {activity.relationships.actor ?
                                         <img src={activity.relationships.actor.image} alt={'User avatar'}/>
@@ -76,13 +76,13 @@ export default () => {
                                     }
                                 </div>
                             </div>
-                            <div className={'col-span-9'}>
+                            <div className={'col-span-8 sm:col-span-9'}>
                                 <div className={'flex items-center text-gray-50'}>
                                     {activity.relationships.actor?.username || 'system'}
                                     <span className={'text-gray-400'}>&nbsp;&mdash;&nbsp;</span>
                                     <Link
                                         to={`?${queryTo({ event: activity.event })}`}
-                                        className={'transition-colors duration-75 hover:text-cyan-400'}
+                                        className={'transition-colors duration-75 active:text-cyan-400 hover:text-cyan-400'}
                                     >
                                         {activity.event}
                                     </Link>
@@ -92,15 +92,15 @@ export default () => {
                                         </Tooltip>
                                     }
                                 </div>
-                                <p className={'mt-1 text-sm'}>
+                                <p className={'mt-1 text-sm break-words line-clamp-2 pr-4'}>
                                     <Translate ns={'activity'} values={activity.properties}>
                                         {activity.event.replace(':', '.')}
                                     </Translate>
                                 </p>
                                 <div className={'mt-1 flex items-center text-sm'}>
                                     <Link
                                         to={`?${queryTo({ ip: activity.ip })}`}
-                                        className={'transition-colors duration-75 hover:text-cyan-400'}
+                                        className={'transition-colors duration-75 active:text-cyan-400 hover:text-cyan-400'}
                                     >
                                         {activity.ip}
                                     </Link>

resources/scripts/components/elements/tooltip/Tooltip.tsx

@@ -73,7 +73,7 @@ export default ({ content, children, disabled = false, ...props }: Props) => {
                         transition={{ type: 'easeIn', damping: 20, stiffness: 300, duration: 0.1 }}
                         {...getFloatingProps({
                             ref: floating,
-                            className: 'absolute top-0 left-0 bg-gray-900 text-sm text-gray-200 px-3 py-2 rounded pointer-events-none',
+                            className: 'absolute top-0 left-0 bg-gray-900 text-sm text-gray-200 px-3 py-2 rounded pointer-events-none max-w-[90vw]',
                             style: {
                                 position: strategy,
                                 top: `${y || 0}px`,

tailwind.config.js

@@ -43,6 +43,7 @@ module.exports = {
         },
     },
     plugins: [
+        require('@tailwindcss/line-clamp'),
         require('@tailwindcss/forms')({
             strategy: 'class',
         }),

yarn.lock

@@ -1412,6 +1412,11 @@
   dependencies:
     mini-svg-data-uri "^1.2.3"
 
+"@tailwindcss/line-clamp@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.0.tgz#03353e31e77636b785f2336e8c978502cec1de81"
+  integrity sha512-HQZo6gfx1D0+DU3nWlNLD5iA6Ef4JAXh0LeD8lOGrJwEDBwwJNKQza6WoXhhY1uQrxOuU8ROxV7CqiQV4CoiLw==
+
 "@types/chart.js@^2.8.5":
   version "2.8.5"
   resolved "https://registry.yarnpkg.com/@types/chart.js/-/chart.js-2.8.5.tgz#7d47cfd36f0a1c2c4ad6a585749bc68e8659492a"