fix(frontend): changed request block for slideover on mobile UI (#387)

src/components/RequestBlock/index.tsx

@@ -43,11 +43,12 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
 
   return (
     <div className="block">
-      <div className="px-4 py-4 sm:px-6 ">
+      <div className="px-4 py-4 sm:px-6">
         <div className="flex items-center justify-between">
-          <div className="mr-6 flex items-center text-sm leading-5 text-gray-300">
+          <div className="mr-6 flex-col items-center text-sm leading-5 text-gray-300 flex-1 min-w-0">
+            <div className="flex flex-nowrap mb-1 white">
               <svg
-              className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-300"
+                className="min-w-0 flex-shrink-0 mr-1.5 h-5 w-5 text-gray-300"
                 fill="currentColor"
                 viewBox="0 0 20 20"
                 xmlns="http://www.w3.org/2000/svg"
@@ -58,11 +59,14 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
                   clipRule="evenodd"
                 />
               </svg>
-            <span>{request.requestedBy.username}</span>
+              <span className="truncate w-40 md:w-auto">
+                {request.requestedBy.username}
+              </span>
+            </div>
             {request.modifiedBy && (
-              <>
+              <div className="flex flex-nowrap">
                 <svg
-                  className="flex-shrink-0 ml-2 mr-1.5 h-5 w-5 text-gray-300"
+                  className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-300"
                   fill="currentColor"
                   viewBox="0 0 20 20"
                   xmlns="http://www.w3.org/2000/svg"
@@ -74,8 +78,10 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
                     clipRule="evenodd"
                   />
                 </svg>
-                <span>{request.modifiedBy?.username}</span>
+                <span className="truncate w-40 md:w-auto">
-              </>
+                  {request.modifiedBy?.username}
+                </span>
+              </div>
             )}
           </div>
           <div className="ml-2 flex-shrink-0 flex">
@@ -189,14 +195,19 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
           </div>
         </div>
         {(request.seasons ?? []).length > 0 && (
-          <div className="mt-2 text-sm flex items-center">
+          <div className="mt-2 text-sm flex flex-col">
-            <span className="mr-2">{intl.formatMessage(messages.seasons)}</span>
+            <div className="mb-2">{intl.formatMessage(messages.seasons)}</div>
+            <div>
               {request.seasons.map((season) => (
-              <span key={`season-${season.id}`} className="mr-2">
+                <span
+                  key={`season-${season.id}`}
+                  className="mr-2 mb-1 inline-block"
+                >
                   <Badge>{season.seasonNumber}</Badge>
                 </span>
               ))}
             </div>
+          </div>
         )}
       </div>
     </div>