From b118db14135e9d3c383d57d5ee8a69df5ef2bfcc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Luiz=20Abdalla=20Silveira?=
 <andre.luiz.as@profusion.mobi>
Date: Mon, 13 Apr 2026 13:59:04 -0300
Subject: [PATCH 1/2] feat: improve icon layout in Section using float-based
 positioning

Closes #1433
---
 dashboard/src/components/Section/Section.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/dashboard/src/components/Section/Section.tsx b/dashboard/src/components/Section/Section.tsx
index 8f091294d..7b535c4b3 100644
--- a/dashboard/src/components/Section/Section.tsx
+++ b/dashboard/src/components/Section/Section.tsx
@@ -128,14 +128,18 @@ const Section = ({
     <div className="text-dim-gray mb-6 flex flex-col gap-4">
       <div className="flex flex-col gap-2">
         {eyebrow && <span className="text-sm">{eyebrow}</span>}
-        <div className="flex flex-row items-center gap-2">
-          {leftIcon}
+        <div className="overflow-hidden">
+          {leftIcon && (
+            <span className="float-left mr-2 -mb-2 [&_svg]:h-8 [&_svg]:w-8">
+              {leftIcon}
+            </span>
+          )}
+          {rightIcon && <span>{rightIcon}</span>}
           {title && (
             <span className="max-w-full text-2xl font-bold break-all">
               {title}
             </span>
           )}
-          {rightIcon}
         </div>
         {subtitle}
       </div>

From e9cb3d947c80131bbb8d12aca689fe76a5099f3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Luiz=20Abdalla=20Silveira?=
 <andre.luiz.as@profusion.mobi>
Date: Wed, 15 Apr 2026 10:59:44 -0300
Subject: [PATCH 2/2] fix: move rightIcon after title in float-based Section
 layout

---
 dashboard/src/components/Section/Section.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dashboard/src/components/Section/Section.tsx b/dashboard/src/components/Section/Section.tsx
index 7b535c4b3..800b2e928 100644
--- a/dashboard/src/components/Section/Section.tsx
+++ b/dashboard/src/components/Section/Section.tsx
@@ -134,12 +134,12 @@ const Section = ({
               {leftIcon}
             </span>
           )}
-          {rightIcon && <span>{rightIcon}</span>}
           {title && (
             <span className="max-w-full text-2xl font-bold break-all">
               {title}
             </span>
           )}
+          {rightIcon && <span className="ml-1 sm:ml-2">{rightIcon}</span>}
         </div>
         {subtitle}
       </div>