From be999d88b5d4dd9583dd0c9422d721a47082e6e8 Mon Sep 17 00:00:00 2001
From: martylukyy <35452459+martylukyy@users.noreply.github.com>
Date: Fri, 14 Apr 2023 21:20:03 +0200
Subject: [PATCH] fix(web): make log files section responsive (#836)

* adapted Logs page in settings to be responsive
minor layout changes

* show headers on narrow screens

* adapted padding on Logs page

---------

Co-authored-by: soup <soup@r4tio.dev>
---
 web/src/screens/Logs.tsx | 33 ++++++++++++++++-----------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/web/src/screens/Logs.tsx b/web/src/screens/Logs.tsx
index eb6dd05..cdd1c60 100644
--- a/web/src/screens/Logs.tsx
+++ b/web/src/screens/Logs.tsx
@@ -147,8 +147,8 @@ export const Logs = () => {
       </div>
 
       <div className="max-w-screen-xl mx-auto pb-10 px-2 sm:px-4 lg:px-8">
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg px-2 sm:px-4 pt-3 sm:pt-4">
-          <LogFiles />
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg px-4 sm:px-6 pt-3 sm:pt-4">
+            <LogFiles />
         </div>
       </div>
 
@@ -179,15 +179,15 @@ export const LogFiles = () => {
       {data && data.files.length > 0 ? (
         <section className="py-3 light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
           <ol className="min-w-full relative">
-            <li className="hidden sm:grid grid-cols-12 gap-4 mb-2 border-b border-gray-200 dark:border-gray-700">
-              <div className="col-span-5 px-2 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+            <li className="grid grid-cols-12 mb-2 border-b border-gray-200 dark:border-gray-700">
+              <div className="hidden sm:block col-span-5 px-2 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                   Name
               </div>
-              <div className="col-span-2 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                  Size
+              <div className="col-span-8 sm:col-span-4 px-1 sm:px-2 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                Last modified
               </div>
-              <div className="col-span-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                  Last modified
+              <div className="col-span-3 sm:col-span-2 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  Size
               </div>
             </li>
 
@@ -260,20 +260,19 @@ const LogFilesItem = ({ file }: LogFilesItemProps) => {
   return (
 
     <li className="text-gray-500 dark:text-gray-400">
-      <div className="sm:grid grid-cols-12 gap-4 items-center py-2">
-        <div className="col-span-5 px-2 py-2 sm:py-0 truncate block sm:text-sm text-md font-medium text-gray-900 dark:text-gray-200">
-          <div className="flex justify-between">
+      <div className="grid grid-cols-12 items-center py-2">
+        <div className="col-span-4 sm:col-span-5 px-2 py-0 truncate hidden sm:block sm:text-sm text-md font-medium text-gray-900 dark:text-gray-200">
+          <div className="block truncate justify-between">
             {file.filename}
           </div>
         </div>
-        <div className="col-span-2 flex items-center text-sm font-medium text-gray-900 dark:text-gray-200">
-          {file.size}
-        </div>
-
-        <div className="col-span-4 flex items-center text-sm font-medium text-gray-900 dark:text-gray-200" title={file.updated_at}>
+        <div className="col-span-8 sm:col-span-4 block truncate px-1 sm:px-2 items-center text-sm font-medium text-gray-900 dark:text-gray-200" title={file.updated_at}>
           {simplifyDate(file.updated_at)}
         </div>
-        <div className="col-span-1 hidden sm:flex items-center justify-center text-sm font-medium text-gray-900 dark:text-white">
+        <div className="col-span-3 sm:col-span-2 flex items-center text-sm font-small sm:font-medium text-gray-900 dark:text-gray-200">
+          {file.size}
+        </div>
+        <div className="col-span-1 sm:col-span-1 pl-0 flex items-center justify-center text-sm font-medium text-gray-900 dark:text-white">
           <div className="logFilesItem">
             <button
               className={classNames(