Fixes custom prop tab wrapping & spacing on smaller viewports (#1383)

* Fixes custom prop tab wrapping & spacing on smaller viewports * Changelog Co-authored-by: Uku Taht <[email protected]>
plausible · Oct 13, 2021 · 688e195 · 688e195
1 parent f569925
commit 688e195
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -30,6 +30,7 @@ All notable changes to this project will be documented in this file.
 - Details modals are now responsive and take up less horizontal space on smaller screens to make it easier to scroll.
 - Fix reading config from file
 - Fix some links not opening correctly in new tab
+- UI fix for more than one row of custom event properties plausible/analytics#1383
 - UI fix for user menu and time picker overlapping plausible/analytics#1352
 
 ### Removed

diff --git a/assets/js/dashboard/stats/conversions/prop-breakdown.js b/assets/js/dashboard/stats/conversions/prop-breakdown.js
@@ -146,18 +146,18 @@ export default class PropertyBreakdown extends React.Component {
     const isActive = this.state.propKey === key
 
     if (isActive) {
-      return <li key={key} className="inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold border-b-2 border-indigo-700 dark:border-indigo-500 ">{key}</li>
+      return <li key={key} className="inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold border-b-2 border-indigo-700 dark:border-indigo-500 mr-2">{key}</li>
     } else {
-      return <li key={key} className="hover:text-indigo-600 cursor-pointer" onClick={this.changePropKey.bind(this, key)}>{key}</li>
+      return <li key={key} className="hover:text-indigo-600 cursor-pointer mr-2" onClick={this.changePropKey.bind(this, key)}>{key}</li>
     }
   }
 
   render() {
     return (
-      <div className="w-full pl-6 mt-4">
-        <div className="flex items-center pb-1">
-          <span className="text-xs font-bold text-gray-600 dark:text-gray-300">Breakdown by:</span>
-          <ul className="flex font-medium text-xs text-gray-500 dark:text-gray-400 space-x-2 leading-5 pl-1">
+      <div className="w-full pl-3 sm:pl-6 mt-4">
+        <div className="flex-col sm:flex-row flex items-center pb-1">
+          <span className="text-xs font-bold text-gray-600 dark:text-gray-300 self-start sm:self-auto mb-1 sm:mb-0">Breakdown by:</span>
+          <ul className="flex flex-wrap font-medium text-xs text-gray-500 dark:text-gray-400 leading-5 pl-1 sm:pl-2">
             { this.props.goal.prop_names.map(this.renderPill.bind(this)) }
           </ul>
         </div>