UI fix for multi-line pill text underline issues (#1499)

* chore(docker): improve repeat contributions workflow

* This change adds two new commands to gracefully stop and remove the Postgres and Clickhouse docker containers. To do so, it also gives them a recognizable name.

* Additionally, the Postgres container is updated to use a named volume for its data. This lower friction for repeat contributions where one would otherwise sign up and activate their accounts again and again each time.

* fix(ui): pill text to use text decoration instead of border

Support is pretty good including Safari 12+ without a prefix.

* docs(changelog): entry for pill text fix

CHANGELOG.md

@@ -9,6 +9,9 @@ All notable changes to this project will be documented in this file.
 - Region and city-level geolocation plausible/analytics#1449
 - The `u` option can now be used in the `manual` extension to specify a URL when triggering events.
 
+### Fixed
+- UI fix where multi-line text in pills would not be underlined properly on small screens.
+
 ## v1.4.1
 
 ### Fixed

assets/css/app.css

@@ -322,3 +322,17 @@ iframe[hidden] {
     left: 0 !important;
   }
 }
+
+.active-prop-heading {
+  /* Properties related to text-decoration are all here in one place. TailwindCSS does support underline but that's about it. */
+  text-decoration-line: underline;
+  text-decoration-color: #4338CA; /* tailwind's indigo-700 */
+  text-decoration-thickness: 2px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .active-prop-heading {
+    text-decoration-color: #6366F1; /* tailwind's indigo-500 */
+  }
+
+}

assets/js/dashboard/stats/conversions/prop-breakdown.js

@@ -168,7 +168,7 @@ 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 mr-2">{key}</li>
+      return <li key={key} className="inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold mr-2 active-prop-heading">{key}</li>
     } else {
       return <li key={key} className="hover:text-indigo-600 cursor-pointer mr-2" onClick={this.changePropKey.bind(this, key)}>{key}</li>
     }

assets/js/dashboard/stats/devices/index.js

@@ -161,7 +161,7 @@ export default class Devices extends React.Component {
     if (isActive) {
       return (
         <li
-          className="inline-block h-5 font-bold text-indigo-700 border-b-2 border-indigo-700 dark:text-indigo-500 dark:border-indigo-500"
+          className="inline-block h-5 font-bold text-indigo-700 active-prop-heading dark:text-indigo-500"
         >
           {name}
         </li>

assets/js/dashboard/stats/locations/index.js

@@ -104,7 +104,7 @@ export default class Locations extends React.Component {
     if (isActive) {
       return (
         <li
-          className="inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold border-b-2 border-indigo-700 dark:border-indigo-500"
+          className="inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold active-prop-heading"
         >
           {name}
         </li>

assets/js/dashboard/stats/pages/index.js

@@ -47,7 +47,7 @@ export default class Pages extends React.Component {
     if (isActive) {
       return (
         <li
-          className="inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold border-b-2 border-indigo-700 dark:border-indigo-500"
+          className="inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold active-prop-heading"
         >
           {name}
         </li>

assets/js/dashboard/stats/sources/source-list.js

@@ -284,7 +284,7 @@ export default class SourceList extends React.Component {
   }
 
   renderTabs() {
-    const activeClass = 'inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold border-b-2 border-indigo-700 dark:border-indigo-500'
+    const activeClass = 'inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold active-prop-heading'
     const defaultClass = 'hover:text-indigo-600 cursor-pointer'
     return (
       <ul className="flex text-xs font-medium text-gray-500 dark:text-gray-400 space-x-2">