fix: safari rendering issues

src/components/annoucements/Announcement.jsx

 import React, { useEffect } from "react";
 import { useInView } from "react-intersection-observer";
 import classNames from "classnames";
-import { format } from "date-fns";
+import { format, isToday } from "date-fns";
 
 import Chip from "components/Chip";
 import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu";
@@ -79,7 +79,9 @@ const Announcement = ({
     <div className={wrapperClassName} ref={ref}>
       <div className="flex items-center justify-between mb-2">
         <div className="space-x-2 flex items-center">
-          <div className="font-bold text-sm">{format(datetime, "H:mm")}</div>
+          <div className="font-bold text-sm">
+            {format(datetime, isToday(datetime) ? "H:mm" : "dd. MM. H:mm")}
+          </div>
           <Chip color={chipColor} condensed>
             {chipLabel}
           </Chip>

src/components/mde/MarkdownEditor.css

@@ -19,7 +19,7 @@
 }
 
 .mde-header .mde-tabs button {
-  padding: .5rem 1rem;
+  padding: .25rem 0.25rem;
   font-family: Bebas Neue,Helvetica,Arial,sans-serif;
   font-weight: 400;
   font-size: 1.1rem;
@@ -34,6 +34,11 @@
   outline: 0;
 }
 
+.mde-header {
+  /* grey-50 */
+  background-color: #f7f7f7;
+}
+
 .mde-header .mde-tabs button.selected {
   /* blue-300 */
   background: #027da8;
@@ -69,9 +74,29 @@
 
 
 .mde-header ul.mde-header-group {
-  padding: 0 0.5rem;
+  padding: 0;
+}
+
+.mde-header ul.mde-header-group:first-of-type {
+  padding-left: .5rem;
 }
 
 .mde-header ul.mde-header-group + .mde-header-group {
-  margin-left: .5rem;
+  margin-left: 0;
+}
+
+@media (min-width: 992px) {
+  .mde-header .mde-tabs button {
+    padding: .5rem 1rem;
+  }
+}
+
+@media (min-width: 1200px) {
+  .mde-header ul.mde-header-group {
+    padding: 0 0.5rem;
+  }
+
+  .mde-header ul.mde-header-group + .mde-header-group {
+    margin-left: .5rem;
+  }
 }

src/components/mde/MarkdownEditor.jsx

@@ -17,8 +17,8 @@ const MarkdownEditor = ({
   const [selectedTab, setSelectedTab] = useState("write");
 
   const classes = {
-    preview: "p-2 content-block text-input",
-    textArea: "p-2 text-input text-base",
+    preview: "p-2 content-block text-input text-sm md:text-base",
+    textArea: "p-2 text-input text-sm md:text-base",
   };
 
   const l18n = {

src/components/posts/Post.jsx

 import React, { useEffect } from "react";
 import { useInView } from "react-intersection-observer";
 import classNames from "classnames";
-import { format } from "date-fns";
+import { format, isToday } from "date-fns";
 
 import Chip from "components/Chip";
 import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu";
@@ -155,7 +155,11 @@ const Post = ({
                 <div className="mt-1 xl:mt-0 xl:ml-2 leading-tight">
                   <span className="text-grey-200 text-sm">{author.group}</span>
                   <span className="text-grey-200 ml-1 text-sm">
-                    @ {format(datetime, "H:mm")}
+                    @{" "}
+                    {format(
+                      datetime,
+                      isToday(datetime) ? "H:mm" : "dd. MM. H:mm"
+                    )}
                     {modified && (
                       <span className="text-grey-200 text-sm block md:inline md:ml-2 underline">
                         (upraveno)

src/utils.js

+import { parse } from "date-fns";
 import filter from "lodash/filter";
 import pick from "lodash/pick";
 import property from "lodash/property";
@@ -123,7 +124,7 @@ export const parseRawPost = (rawPost) => {
   const post = {
     ...pick(rawPost, ["id", "content", "author"]),
     contentHtml: markdownConverter.makeHtml(rawPost.content),
-    datetime: new Date(rawPost.datetime),
+    datetime: parse(rawPost.datetime, "yyyy-MM-dd HH:mm:ss", new Date()),
     historyLog: rawPost.history_log,
     ranking: {
       dislikes: rawPost.ranking.dislikes,
@@ -154,7 +155,11 @@ export const parseRawPost = (rawPost) => {
 export const parseRawAnnouncement = (rawAnnouncement) => {
   const announcement = {
     ...pick(rawAnnouncement, ["id", "content", "link"]),
-    datetime: new Date(rawAnnouncement.datetime),
+    datetime: parse(
+      rawAnnouncement.datetime,
+      "yyyy-MM-dd HH:mm:ss",
+      new Date()
+    ),
     type: announcementTypeMapping[rawAnnouncement.type],
     seen: false,
   };