nowrap the date/time in byline instead of flexbox layout

This reverts commit 6aba91b.
crosshare-org · Mar 27, 2024 · 2dc1c81 · 2dc1c81
1 parent 4645705
commit 2dc1c81
Showing 1 changed file with 17 additions and 31 deletions.
diff --git a/app/components/SlateHeader.tsx b/app/components/SlateHeader.tsx
@@ -58,27 +58,22 @@ function LocalDateString(props: { date: Date }) {
 
   if (!mounted) return <></>;
 
-  return props.date.toLocaleDateString('en-us', {
-    month: 'long',
-    day: '2-digit',
-    year: 'numeric',
-  });
-}
-
-function LocalTimeString(props: { date: Date }) {
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) return <></>;
-
-  return props.date.toLocaleTimeString('en-US', {
-    hour: 'numeric',
-    minute: '2-digit',
-    hour12: true,
-    timeZone: 'EST',
-  });
+  return (
+    <span css={{ whiteSpace: 'nowrap' }}>
+      {props.date.toLocaleDateString('en-us', {
+        month: 'long',
+        day: '2-digit',
+        year: 'numeric',
+      })}
+      &emsp;&emsp;
+      {props.date.toLocaleTimeString('en-US', {
+        hour: 'numeric',
+        minute: '2-digit',
+        hour12: true,
+        timeZone: 'EST',
+      })}
+    </span>
+  );
 }
 
 export const SlateHeader = (props: SlateHeaderProps) => {
@@ -113,18 +108,9 @@ export const SlateHeader = (props: SlateHeaderProps) => {
           color: 'var(--slate-subtitle)',
           letterSpacing: '0.08rem',
           marginBottom: '2.24rem',
-          display: 'flex',
-          justifyContent: 'center',
-          flexWrap: 'wrap',
-          columnGap: '2.15rem',
         }}
       >
-        <span>
-          By {props.author} &bull; <LocalDateString date={publishDate} />
-        </span>
-        <span>
-          <LocalTimeString date={publishDate} />
-        </span>
+        By {props.author} &bull; <LocalDateString date={publishDate} />
       </h2>
     </div>
   );