Date formatting

app/javascript/components/Show.jsx

@@ -94,7 +94,7 @@ const Show = ({ trackSlug }) => {
         {formatDurationShow(show.duration)}
       </div>
 
-      <hr />
+      <hr className="sidebar-hr" />
 
       <div className="sidebar-control-container">
         <div className="hidden-phone">
@@ -105,7 +105,7 @@ const Show = ({ trackSlug }) => {
 
       <div className="hidden-mobile">
         <TagBadges tags={show.tags} parentId={show.date} />
-        <hr />
+        <hr className="sidebar-hr" />
         <Link to={`/${show.previous_show_date}`}>
           <FontAwesomeIcon icon={faCircleChevronLeft} className="mr-1" />
           Previous show

app/javascript/components/Shows.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useOutletContext, useNavigate } from "react-router-dom";
-import { formatDurationShow, formatDate } from "./helpers/utils";
+import { formatDurationShow, formatDateMed } from "./helpers/utils";
 import TagBadges from "./controls/TagBadges";
 import LikeButton from "./controls/LikeButton";
 import ShowContextMenu from "./controls/ShowContextMenu";
@@ -47,7 +47,7 @@ const Shows = ({ shows, numbering = false, tourHeaders = false }) => {
                 {numbering && <span className="leftside-numbering">#{index + 1}</span>}
                 <span className="leftside-primary">
                   <CoverArt coverArtUrls={show.cover_art_urls} />
-                  {formatDate(show.date)}
+                  {formatDateMed(show.date)}
                 </span>
                 <span className="leftside-secondary">{show.venue.name}</span>
                 <span className="leftside-tertiary">

app/javascript/components/Tracks.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useOutletContext, Link } from "react-router-dom";
-import { formatDurationTrack, formatDurationShow, formatDate, truncate } from "./helpers/utils";
+import { formatDurationTrack, formatDurationShow, formatDateMed, truncate } from "./helpers/utils";
 import TagBadges from "./controls/TagBadges";
 import HighlightedText from "./controls/HighlightedText";
 import LikeButton from "./controls/LikeButton";
@@ -99,7 +99,7 @@ const Tracks = ({ tracks, viewStyle, numbering = false, omitSecondary = false, h
                                 to={`/${track.show_date}/${track.slug}`}
                                 onClick={(e) => e.stopPropagation()}
                               >
-                                {formatDate(track.show_date)}
+                                {formatDateMed(track.show_date)}
                               </Link>
                             </span>{" "}
                           </>

app/javascript/components/controls/ShowContextMenu.jsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState, useEffect } from "react";
 import { Link, useOutletContext } from "react-router-dom";
-import { formatDate } from "../helpers/utils";
+import { formatDateMed } from "../helpers/utils";
 import { useFeedback } from "./FeedbackContext";
 import LikeButton from "./LikeButton";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -36,7 +36,7 @@ const ShowContextMenu = ({ show, adjacentLinks = true }) => {
     const modalContent = (
       <>
         <h2 className="title">Taper Notes</h2>
-        <h3 className="subtitle">{formatDate(show.date)} &bull; {formatDate(show.venue_name)}</h3>
+        <h3 className="subtitle">{formatDateMed(show.date)} &bull; {show.venue_name}</h3>
         <p dangerouslySetInnerHTML={{ __html: (show.taper_notes || "").replace(/\n/g, "<br />") }}></p>
       </>
     );

app/javascript/stylesheets/content.css.scss

@@ -83,6 +83,8 @@
   position: relative;
   top: -3px;
   margin-right: 0.1rem;
+  display: inline-block;
+  width: 3.8rem;
 
   &:hover {
     text-decoration: underline;

app/javascript/stylesheets/layout.css.scss

@@ -203,7 +203,7 @@ main {
         flex: 0;
       }
 
-      hr {
+      .sidebar-hr {
         display: none;
       }