Condense and show all site nav/options on mobile (#1256)

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

* Format countries modal

* Remove unused imports
* Run ESLint and make related fixes

* ESlint formatting for entry pages modal

* WIP: proof of concept for scrollable modals on mobile

* Revert "Merge branch 'feature/details-modal-mobile' of github.com:hirusi/analytics"

This reverts commit 87e9fb92d0, reversing
changes made to beea6a07c7.

* Condense and show all site nav/options on mobile

assets/js/dashboard/datepicker.js

@@ -34,15 +34,15 @@ function renderArrow(query, site, period, prevDate, nextDate) {
     period
   );
 
-  const leftClasses = `flex items-center px-2 border-r border-gray-300 rounded-l
+  const leftClasses = `flex items-center px-1 sm:px-2 border-r border-gray-300 rounded-l
       dark:border-gray-500 dark:text-gray-100 ${
       disabledLeft ? "bg-gray-300 dark:bg-gray-950" : "hover:bg-gray-100 dark:hover:bg-gray-900"
     }`;
-  const rightClasses = `flex items-center px-2 rounded-r dark:text-gray-100 ${
+  const rightClasses = `flex items-center px-1 sm:px-2 rounded-r dark:text-gray-100 ${
       disabledRight ? "bg-gray-300 dark:bg-gray-950" : "hover:bg-gray-100 dark:hover:bg-gray-900"
     }`;
   return (
-    <div className="hidden md:flex rounded shadow bg-white mr-4 cursor-pointer dark:bg-gray-800">
+    <div className="flex rounded shadow bg-white mr-2 sm:mr-4 cursor-pointer dark:bg-gray-800">
       <QueryButton
         to={{ date: prevDate }}
         query={query}
@@ -387,7 +387,7 @@ class DatePicker extends React.Component {
   renderPicker() {
     return (
       <div
-        className="w-28 sm:w-36 md:w-44 md:relative"
+        className="w-20 sm:w-36 md:w-44 md:relative"
         ref={(node) => (this.dropDownNode = node)}
       >
         <div
@@ -402,7 +402,7 @@ class DatePicker extends React.Component {
           aria-expanded="false"
           aria-controls="datemenu"
         >
-          <span className="mr-1 md:mr-2">
+          <span className="truncate mr-1 md:mr-2">
             {this.props.leadingText}
             <span className="font-medium">{this.timeFrameText()}</span>
           </span>

assets/js/dashboard/filters.js

@@ -267,7 +267,8 @@ class Filters extends React.Component {
     return (
       <>
         <PlusIcon className="-ml-1 mr-1 h-4 w-4 md:h-5 md:w-5" aria-hidden="true" />
-        Add filter
+        {/* This would have been a good use-case for JSX! But in the interest of keeping the breakpoint width logic with TailwindCSS, this is a better long-term way to deal with it. */}
+        <span className="sm:hidden">Filter</span><span className="hidden sm:inline-block">Add filter</span>
       </>
     )
   }

assets/js/dashboard/site-switcher.js

@@ -141,7 +141,7 @@ export default class SiteSwitcher extends React.Component {
         <button onClick={this.toggle.bind(this)} className={`inline-flex items-center md:text-lg w-full rounded-md py-2 leading-5 font-bold text-gray-700 dark:text-gray-300 focus:outline-none transition ease-in-out duration-150 ${hoverClass}`}>
 
           <img src={`https://icons.duckduckgo.com/ip3/${this.props.site.domain}.ico`} onError={(e)=>{e.target.onerror = null; e.target.src="https://icons.duckduckgo.com/ip3/placeholder.ico"}} referrerPolicy="no-referrer" className="inline w-4 mr-1 md:mr-2 align-middle" />
-          {this.props.site.domain}
+          <span className="hidden sm:inline-block">{this.props.site.domain}</span>
           {this.renderArrow()}
         </button>