fix: improve logview UI (#1808)

* style: set max height and max width for code component

This is made not only to stop the logviewer to overflow its height,
which could be done by other means, but also to force the component
to occupy a determined share of the screen

* style: improve WrapperSheetContent component

Such improvement was made by locking a maximun height value and the
optimal value for clamp function

How were these values set? Empirically; no specific technique has been
used to set them.

Closes #1429

* style: wrap elements on log viewer subtitle

* style: allow log view to cover all space on smallest screen

* style: stack footer buttons vertically below lg break

Add flex-col/lg:flex-row so detailsButton and nav buttons
stack on small screens and align side by side on lg+.

* style: improve WrapperSheetContent footer responsiveness

Restructure footer buttons for small screens: wrap nav buttons with
grid-cols-1/lg:grid-cols-3, add vertical spacing (mt/mb) on mobile
removed on lg+, and distribute items with justify-evenly on small
screens and justify-end on lg+.

* style: remove horizontal margin on certain breakpoints

This was made as it was causing the middle button to shrink on smaller
breakpoints

Author: André Luiz

dashboard/src/components/Filter/CodeBlock.tsx

@@ -256,7 +256,7 @@ const CodeBlock = ({
 
   return (
     <>
-      <div className="min-h-[300px]">
+      <div className="min-h-[300px] w-full">
         <div className="pl-3">
           {variant === 'log-viewer' && (
             <h3 className="py-1 text-2xl font-bold">

dashboard/src/components/Log/LogViewerCard.tsx

@@ -123,7 +123,7 @@ export const LogViewerCard = ({
 
   return (
     <div className="gap-0">
-      <div className="flex items-start justify-between p-4 text-lg">
+      <div className="grid grid-cols-1 items-start justify-between p-4 text-lg md:grid-cols-2">
         {isLoading ? (
           <FormattedMessage id="global.loading" />
         ) : (

dashboard/src/components/Sheet/WrapperSheetContent.tsx

@@ -95,21 +95,21 @@ export const WrapperSheetContent = ({
 
       <div
         className={cn(
-          'mt-auto flex',
-          detailsButton ? 'justify-between' : 'justify-end',
+          'mt-auto flex flex-col lg:flex-row',
+          detailsButton ? 'lg:justify-between' : 'lg:justify-end',
         )}
       >
-        {detailsButton}
-        <div className="flex">
-          <div className="mt-auto flex justify-end">
+        <div className="flex justify-around">{detailsButton}</div>
+        <div className="flex flex-wrap justify-evenly lg:justify-end">
+          <div className="mt-auto grid grid-cols-1 lg:grid-cols-3">
             {navigationLogsActions && (
               <>
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button
                       onClick={navigationLogsActions.previousItem}
                       disabled={!navigationLogsActions.hasPrevious}
-                      className="rounded-3xl bg-[#11B3E6] px-14 font-bold text-white"
+                      className="mt-4 mb-2 rounded-3xl bg-[#11B3E6] px-14 font-bold text-white lg:my-0"
                     >
                       <FormattedMessage
                         id="global.prev"
@@ -124,7 +124,7 @@ export const WrapperSheetContent = ({
                     <Button
                       onClick={navigationLogsActions.nextItem}
                       disabled={!navigationLogsActions.hasNext}
-                      className="mx-5 rounded-3xl bg-[#11B3E6] px-14 font-bold text-white"
+                      className="mx-0 my-2 rounded-3xl bg-[#11B3E6] px-14 font-bold text-white lg:mx-5 lg:my-0"
                     >
                       <FormattedMessage
                         id="global.next"
@@ -136,12 +136,12 @@ export const WrapperSheetContent = ({
                 </Tooltip>
               </>
             )}
+            <SheetTrigger asChild>
+              <Button className="mt-2 rounded-3xl bg-[#11B3E6] px-14 font-bold text-white lg:mt-0">
+                <FormattedMessage id="global.close" defaultMessage="Close" />
+              </Button>
+            </SheetTrigger>
           </div>
-          <SheetTrigger asChild>
-            <Button className="rounded-3xl bg-[#11B3E6] px-14 font-bold text-white">
-              <FormattedMessage id="global.close" defaultMessage="Close" />
-            </Button>
-          </SheetTrigger>
         </div>
       </div>
     </SheetContent>

dashboard/src/components/ui/sheet.tsx

@@ -36,9 +36,9 @@ const sheetVariants = cva(
         top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
         bottom:
           'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        left: 'inset-y-0 left-0 h-full w-full border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
         right:
-          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right-[100%] data-[state=open]:slide-in-from-right-[100%] sm:max-w-sm',
+          'inset-y-0 right-0 h-full w-full  border-l data-[state=closed]:slide-out-to-right-[100%] data-[state=open]:slide-in-from-right-[100%] sm:max-w-sm',
       },
     },
     defaultVariants: {