feat: better responsivness

.env

-REACT_APP_STYLEGUIDE_URL=https://styleguide.pir-test.eu/2.0.4
+REACT_APP_STYLEGUIDE_URL=https://styleguide.pir-test.eu/2.1.0
 REACT_APP_API_BASE_URL=https://cf2021.pir-test.eu/api
 REACT_APP_MATOMO_ID=135
 REACT_APP_SENTRY_DSN=https://aa80453ff4d54b9a9c1b49e79060498a@sentry.pir-test.eu/14

src/components/posts/Post.jsx

@@ -196,15 +196,18 @@ const Post = ({
         className="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3 object-cover"
         alt={author.name}
       />
-      <div className="flex-1">
+      {/* overflow-hidden to avoid spammers damaging the UI */}
+      <div className="flex-1 overflow-hidden">
         <div className="mb-1">
           <div className="flex justify-between items-start xl:items-center">
             <div className="flex flex-col xl:flex-row xl:items-center">
               <div className="flex flex-col xl:flex-row xl:items-center">
                 <span className="font-bold">{author.name}</span>
                 <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-xs">
+                  <span className="text-grey-200 text-xs sm:text-sm">
+                    {author.group}
+                  </span>
+                  <span className="text-grey-200 ml-1 text-xs sm:text-sm">
                     @{" "}
                     {format(
                       datetime,
@@ -314,7 +317,7 @@ const Post = ({
           {labels}
         </div>
         <div
-          className="text-sm lg:text-base text-black leading-normal content-block"
+          className="text-sm lg:text-base text-black leading-normal content-block overflow-x-scroll"
           dangerouslySetInnerHTML={htmlContent}
         ></div>
       </div>

src/containers/AddPostForm.jsx

@@ -71,20 +71,20 @@ const AddPostForm = ({ className }) => {
       />
 
       <div className="form-field" onChange={(evt) => setType(evt.target.value)}>
-        <div className="form-field__wrapper">
+        <div className="form-field__wrapper form-field__wrapper--freeform flex-col sm:flex-row">
           <div className="radio form-field__control">
             <label>
               <input type="radio" name="postType" value="post" defaultChecked />
-              <span>
+              <span className="text-sm sm:text-base">
                 Přidávám <strong>běžný příspěvek</strong>
               </span>
             </label>
           </div>
 
-          <div className="radio form-field__control">
+          <div className="radio form-field__control ml-0 mt-4 sm:mt-0 sm:ml-4">
             <label>
               <input type="radio" name="postType" value="procedure-proposal" />
-              <span>
+              <span className="text-sm sm:text-base">
                 Přidávám <strong>návrh postupu</strong>
               </span>
             </label>

src/containers/GlobalStats.jsx

@@ -25,8 +25,15 @@ const GlobalStats = () => {
     ? items[nextProgramEntryId]
     : null;
 
+  const nextProgramEntryCaption = nextProgramEntry
+    ? `${nextProgramEntry.title} @ ${format(
+        nextProgramEntry.expectedStartAt,
+        isToday(nextProgramEntry.expectedStartAt) ? "H:mm" : "dd. MM. H:mm"
+      )}`
+    : null;
+
   return (
-    <div className="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-2xs md:text-xs lg:text-sm text-grey-300">
+    <div className="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-2xs md:text-xs lg:text-sm text-grey-300 whitespace-no-wrap">
       <div>
         <strong>{onlineMembers}</strong>{" "}
         <span>
@@ -42,16 +49,14 @@ const GlobalStats = () => {
         <span>Vel. skupiny členů je</span> <strong>{groupSizeHalf}</strong>
       </div>
       {nextProgramEntry && (
-        <div className="flex-grow text-right hidden sm:block lg:hidden xl:block">
+        <div className="flex-grow text-right hidden sm:block lg:hidden xl:block truncate">
           Následuje:{" "}
-          <Link to="/program" className="font-bold">
-            {nextProgramEntry.title} @{" "}
-            {format(
-              nextProgramEntry.expectedStartAt,
-              isToday(nextProgramEntry.expectedStartAt)
-                ? "H:mm"
-                : "dd. MM. H:mm"
-            )}
+          <Link
+            to="/program"
+            className="font-bold"
+            title={nextProgramEntryCaption}
+          >
+            {nextProgramEntryCaption}
           </Link>
         </div>
       )}