Hotfix/bar overflow (#1202)

* 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.

* Break words early to maintain spacing; truncate on larger screens

* Update changelog entry on UI bars

* Truncate bar text from md breakpoint

CHANGELOG.md

@@ -24,7 +24,7 @@ All notable changes to this project will be documented in this file.
 - Crash when changing theme on a loaded dashboard plausible/analytics#1123
 - UI fix for details button overlapping content on mobile plausible/analytics#1114
 - UI fix for the main graph on mobile overlapping its tick items on both axis
-- UI fixes for text not showing properly in bars across multiple lines. This hides the totals on <768px and only shows the uniques and % to accommodate the goals text too.
+- UI fixes for text not showing properly in bars across multiple lines. This hides the totals on <768px and only shows the uniques and % to accommodate the goals text too. Larger screens still truncate as usual.
 - Turn off autocomplete for name and password inputs in the _New shared link_ form.
 
 ### Removed

assets/js/dashboard/stats/conversions/index.js

@@ -59,14 +59,14 @@ export default class Conversions extends React.Component {
 
   renderGoalText(goalName) {
     if (this.props.query.period === 'realtime') {
-      return <span className="block px-2 py-1.5 relative z-9 break-words dark:text-gray-200">{goalName}</span>
+      return <span className="block px-2 py-1.5 relative z-9 md:truncate break-all dark:text-gray-200">{goalName}</span>
     } else {
       const query = new URLSearchParams(window.location.search)
       query.set('goal', goalName)
 
       return (
-        <Link to={{pathname: window.location.pathname, search: query.toString()}} className="block px-2 py-1.5 hover:underline relative z-9 break-words dark:text-gray-200">
-          { goalName }
+        <Link to={{pathname: window.location.pathname, search: query.toString()}} className="block px-2 py-1.5 hover:underline relative z-9 break-all lg:truncate dark:text-gray-200">
+          {goalName}
         </Link>
       )
     }

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

@@ -71,10 +71,10 @@ export default class PropertyBreakdown extends React.Component {
 
   renderPropContent(value, query) {
     return (
-      <span className="flex px-2 py-1.5 group dark:text-gray-300 relative z-9 break-words">
+      <span className="flex px-2 py-1.5 group dark:text-gray-300 relative z-9 break-all">
         <Link
           to={{pathname: window.location.pathname, search: query.toString()}} 
-          className="hover:underline block"
+          className="md:truncate hover:underline block"
         >
           { value.name }
         </Link>

assets/js/dashboard/stats/devices/browsers.js

@@ -43,8 +43,8 @@ export default class Browsers extends React.Component {
 
   renderBrowserContent(browser, query) {
     return (
-        <span className="flex px-2 py-1.5 dark:text-gray-300 relative z-9 break-words">
-          <Link className="block hover:underline" to={{search: query.toString()}}>
+        <span className="flex px-2 py-1.5 dark:text-gray-300 relative z-9 break-all">
+          <Link className="md:truncate block hover:underline" to={{search: query.toString()}}>
             {browser.name}
           </Link>
         </span>

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

@@ -86,7 +86,7 @@ class ScreenSizes extends React.Component {
             tooltip={EXPLANATION[size.name]}
             className="flex px-2 py-1.5 dark:text-gray-300"
           >
-            <Link className="block hover:underline" to={{search: query.toString()}}>
+            <Link className="md:truncate block hover:underline" to={{search: query.toString()}}>
               {iconFor(size.name)} {size.name}
             </Link>
           </span>

assets/js/dashboard/stats/devices/operating-systems.js

@@ -55,8 +55,8 @@ export default class OperatingSystems extends React.Component {
           bg="bg-green-50 dark:gray-500 dark:bg-opacity-15"
           maxWidthDeduction="6rem"
         >
-          <span className="flex px-2 py-1.5 dark:text-gray-300 relative z-9 break-words">
-            <Link className="block hover:underline" to={{search: query.toString()}}>
+          <span className="flex px-2 py-1.5 dark:text-gray-300 relative z-9 break-all">
+            <Link className="md:truncate block hover:underline" to={{search: query.toString()}}>
               {os.name}
             </Link>
           </span>

assets/js/dashboard/stats/pages/entry-pages.js

@@ -46,10 +46,10 @@ export default class EntryPages extends React.Component {
           bg="bg-orange-50 dark:bg-gray-500 dark:bg-opacity-15"
           maxWidthDeduction="4rem"
         >
-          <span className="flex px-2 py-1.5 group dark:text-gray-300 relative break-words z-9">
+          <span className="flex px-2 py-1.5 group dark:text-gray-300 relative break-all z-9">
             <Link
               to={{pathname: window.location.pathname, search: query.toString()}}
-              className="block hover:underline"
+              className="md:truncate block hover:underline"
             >
               {page.name}
             </Link>

assets/js/dashboard/stats/pages/exit-pages.js

@@ -46,10 +46,10 @@ export default class ExitPages extends React.Component {
           bg="bg-orange-50 dark:bg-gray-500 dark:bg-opacity-15"
           maxWidthDeduction="4rem"
         >
-          <span className="flex px-2 py-1.5 group dark:text-gray-300 z-9 relative break-words">
+          <span className="flex px-2 py-1.5 group dark:text-gray-300 z-9 relative break-all">
             <Link
               to={{pathname: window.location.pathname, search: query.toString()}}
-              className="block hover:underline"
+              className="md:truncate block hover:underline"
             >
               {page.name}
             </Link>

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

@@ -52,11 +52,11 @@ export default class Visits extends React.Component {
           maxWidthDeduction="4rem"
         >
           <span
-            className="flex px-2 py-1.5 group dark:text-gray-300 relative z-9 break-words"
+            className="flex px-2 py-1.5 group dark:text-gray-300 relative z-9 break-all"
           >
             <Link
               to={{pathname: window.location.pathname, search: query.toString()}}
-              className="block hover:underline"
+              className="md:truncate block hover:underline"
             >
               {page.name}
             </Link>

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

@@ -78,9 +78,9 @@ export default class Referrers extends React.Component {
           bg="bg-blue-50 dark:bg-gray-500 dark:bg-opacity-15"
           maxWidthDeduction="4rem"
         >
-          <span className="flex px-2 py-1.5 z-9 relative break-words group">
+          <span className="flex px-2 py-1.5 z-9 relative break-all group">
             <LinkOption
-              className="block dark:text-gray-300"
+              className="block md:truncate dark:text-gray-300"
               to={{search: query.toString()}}
               disabled={referrer.name === 'Direct / None'}
             >

assets/js/dashboard/stats/sources/search-terms.js

@@ -42,8 +42,8 @@ export default class SearchTerms extends React.Component {
           bg="bg-blue-50 dark:bg-gray-500 dark:bg-opacity-15"
           maxWidthDeduction="4rem"
         >
-          <span className="flex px-2 py-1.5 dark:text-gray-300 z-9 relative break-words">
-            <span className="block">
+          <span className="flex px-2 py-1.5 dark:text-gray-300 z-9 relative break-all">
+            <span className="md:truncate block">
               { term.name }
             </span>
           </span>

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

@@ -53,9 +53,9 @@ class AllSources extends React.Component {
           bg="bg-blue-50 dark:bg-gray-500 dark:bg-opacity-15"
           maxWidthDeduction="4rem"
         >
-          <span className="flex px-2 py-1.5 dark:text-gray-300 relative z-9 break-words">
+          <span className="flex px-2 py-1.5 dark:text-gray-300 relative z-9 break-all">
             <Link
-              className="block hover:underline"
+              className="md:truncate block hover:underline"
               to={{search: query.toString()}}
             >
               <img
@@ -171,9 +171,9 @@ class UTMSources extends React.Component {
           bg="bg-blue-50 dark:bg-gray-500 dark:bg-opacity-15"
           maxWidthDeduction="4rem"
         >
-          <span className="flex px-2 py-1.5 dark:text-gray-300 relative z-9 break-words">
+          <span className="flex px-2 py-1.5 dark:text-gray-300 relative z-9 break-all">
             <Link 
-              className="block hover:underline"
+              className="md:truncate block hover:underline"
               to={{search: query.toString()}}
             >
               { referrer.name }