From 52864ef17c464c3434c455ff0ac4379227f1604e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Luiz=20Abdalla=20Silveira?=
 <andre.luiz.as@profusion.mobi>
Date: Thu, 2 Apr 2026 17:47:51 -0300
Subject: [PATCH 1/3] fix(style): prevent drawer content from overflowing on
 small screens

Change w-fit to w-full so the filter container respects the viewport
width instead of expanding to its natural content width.
---
 dashboard/src/components/Filter/Drawer.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/dashboard/src/components/Filter/Drawer.tsx b/dashboard/src/components/Filter/Drawer.tsx
index 1cc284f2f..57f719815 100644
--- a/dashboard/src/components/Filter/Drawer.tsx
+++ b/dashboard/src/components/Filter/Drawer.tsx
@@ -40,7 +40,7 @@ const DrawerHeader = (): JSX.Element => {
   return (
     <header className="mb-7 w-full">
       <DrawerTitle>
-        <div className="mx-auto mb-4 flex w-[1400px] items-center justify-between">
+        <div className="mx-auto mb-4 flex max-w-[1400px] items-center justify-between">
           <span className="text-2xl/[42px] font-bold">
             <FormattedMessage id="filter.filtering" />
           </span>
@@ -58,12 +58,12 @@ const DrawerHeader = (): JSX.Element => {
 const DrawerLink = ({ title, value, url }: IDrawerLink): JSX.Element => {
   return (
     <div className="mb-8 flex items-center justify-between">
-      <div className="border-dark-gray flex h-[52px] w-full flex-col border bg-white px-4 py-2">
+      <div className="border-dark-gray flex min-h-[52px] max-w-full flex-col border bg-white px-4 py-2">
         <span className="text-dark-gray2 text-xs">
           <FormattedMessage id={title} />
         </span>
         <a
-          className="text-dim-black text-base underline"
+          className="text-dim-black text-base break-all underline"
           href={url ?? '#'}
           target={url ? '_blank' : undefined}
           rel="noreferrer"
@@ -168,7 +168,7 @@ const Drawer = ({
         <DrawerHeader />
         <section className="h-full overflow-y-auto">
           {drawerLinkComponent}
-          <div className="w-[1000px] rounded-lg bg-white px-6 py-5">
+          <div className="w-auto rounded-lg bg-white px-6 py-5">
             {showLegend && <Legend />}
             <div>{children}</div>
           </div>

From 62664f73f1cc4ee5bf64114e21fd0b84ff754c40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Luiz=20Abdalla=20Silveira?=
 <andre.luiz.as@profusion.mobi>
Date: Mon, 6 Apr 2026 17:31:25 -0300
Subject: [PATCH 2/3] style: adress the linter concern

The linter politely pointed out that `file?.['name']` is more concise
than `file && file['name']`

Closes #1419
---
 dashboard/src/hooks/useLogData.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dashboard/src/hooks/useLogData.ts b/dashboard/src/hooks/useLogData.ts
index e2085af65..2dc921b75 100644
--- a/dashboard/src/hooks/useLogData.ts
+++ b/dashboard/src/hooks/useLogData.ts
@@ -56,7 +56,7 @@ export const processLogData = (
         : undefined;
 
   const logExcerptFileLink = data?.output_files?.find(
-    file => file && file['name'] === 'log_excerpt',
+    file => file?.['name'] === 'log_excerpt',
   )?.['url'];
 
   return {

From e25f4fdb971a098fc16e6ba21a8bf279363e184a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Luiz=20Abdalla=20Silveira?=
 <andre.luiz.as@profusion.mobi>
Date: Tue, 7 Apr 2026 14:13:07 -0300
Subject: [PATCH 3/3] fix: remove checkbox and text misalignment

Closes #1419
---
 dashboard/src/components/Checkbox/Checkbox.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/dashboard/src/components/Checkbox/Checkbox.tsx b/dashboard/src/components/Checkbox/Checkbox.tsx
index 04e6b5deb..394c2bfa5 100644
--- a/dashboard/src/components/Checkbox/Checkbox.tsx
+++ b/dashboard/src/components/Checkbox/Checkbox.tsx
@@ -45,16 +45,21 @@ const Checkbox = ({
         'border-blue': isChecked,
       })}
     >
-      <input type="checkbox" checked={isChecked} onChange={onToggle} />
+      <input
+        className="mr-4"
+        type="checkbox"
+        checked={isChecked}
+        onChange={onToggle}
+      />
       {shouldTruncateResult ? (
         <Tooltip>
           <TooltipTrigger asChild>
-            <span className="ml-4">{truncatedText}</span>
+            <span>{truncatedText}</span>
           </TooltipTrigger>
           <TooltipContent>{text}</TooltipContent>
         </Tooltip>
       ) : (
-        <span className="ml-4">{truncatedText}</span>
+        <span>{truncatedText}</span>
       )}
     </label>
   );